Hello world

[aratempesto]

// Welcome name input
document.getElementById('btnSetName')?.addEventListener('click', () => {
  const nameInput = document.getElementById('nameInput');
  const userNameSpan = document.getElementById('userName');
  const name = nameInput.value.trim();
  if(name) {
    userNameSpan.textContent = name;
    nameInput.value = '';
  }
});

// Contact Form Validation and Submission
const contactForm = document.getElementById('contactForm');
const formResult = document.getElementById('formResult');

if(contactForm) {
  contactForm.addEventListener('submit', function(event){
    event.preventDefault();
    
    const name = this.msgName.value.trim();
    const email = this.msgEmail.value.trim();
    const message = this.msgMessage.value.trim();
    
    if (!name || !email || !message) {
      formResult.style.color = 'red';
      formResult.textContent = 'Please fill in all fields.';
      return;
    }
    
    // Simple email validation regex
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if(!emailRegex.test(email)) {
      formResult.style.color = 'red';
      formResult.textContent = 'Please enter a valid email.';
      return;
    }
    
    // Show success message with entered values
    formResult.style.color = 'green';
    formResult.innerHTML = `<p>Thank you, <strong>${name}</strong>! Your message has been received.</p>
                            <p><strong>Email:</strong> ${email}</p>
                            <p><strong>Message:</strong> ${message}</p>`;
    this.reset();
  });
}