Frontend Mentor

[R3ygoski]

Hello Kaoutar, here's the JS and CSS Structure fixed.

JavaScript

const contactForm = document.querySelector('#contactForm');
const nameErrorMsg = document.querySelector('#name-error-msg');
const nameErrorSvg = document.querySelector('#name-error-svg');
const nameInput = document.querySelector('#name');
const messageErrorMsg = document.querySelector('#message-error-msg');
const messageErrorSvg = document.querySelector('#message-error-svg');
const messageInput = document.querySelector('#message');
const emailErrorMsg = document.querySelector('#email-error-msg');
const emailErrorSvg = document.querySelector('#email-error-svg');
const emailInput = document.querySelector('#email');
const emailPattern = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/;

function errorHandler(fieldErrorMsg, fieldErrorSvg, fieldInput, valid = false){
    if (!valid){
        fieldErrorMsg.style.display = 'block';
        fieldErrorMsg.classList.add('error-msg');
        fieldErrorSvg.style.display = 'block';
        fieldInput.classList.add('input-error')
    } else {
        fieldErrorMsg.style.display = 'none';
        fieldErrorMsg.classList.remove('error-msg');
        fieldErrorSvg.style.display = 'none';
        fieldInput.classList.remove('input-error');
        fieldInput.classList.add('valid-input');
    }
}
function clearForm(){
    nameInput.classList.remove('valid-input');
    emailInput.classList.remove('valid-input');
    messageInput.classList.remove('valid-input');
    contactForm.reset();
}

contactForm.addEventListener('submit', (e)=>{
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);
    if(data.name.length == 0){
        errorHandler(nameErrorMsg,nameErrorSvg,nameInput)

    }else{
        errorHandler(nameErrorMsg,nameErrorSvg,nameInput, true)

    }
    if(data.email.length == 0 || !emailPattern.test(data.email)){
        errorHandler(emailErrorMsg,emailErrorSvg,emailInput)

    }
    else{
        errorHandler(emailErrorMsg,emailErrorSvg,emailInput, true)

    }
    if(data.message.length == 0){
        errorHandler(messageErrorMsg,messageErrorSvg,messageInput)

    }
    else{
        errorHandler(messageErrorMsg,messageErrorSvg,messageInput, true)

    }
    if(data.name.length != 0 && data.email.length != 0 && data.message.length != 0 && emailPattern.test(data.email)){
        clearForm()
    }
})

Note: I changed pattern to emailPattern because pattern is very generic, and can cause some confusion.

CSS

/* This is the Style File */
@import url(./font.css);
@import url(./reset.css);
@import url(./responsive-mobile.css);
@import url(./responsive-tablet.css);

/* Ommited CSS */

If something that I said was unclear, please, comment here below or in FEM so I can help you.

[kaoutar-ouadih]

Thank you for your useful feedback. For this css structure when I work with it, the reset and the font files are just working fine but the media queries for tablet and mobile are not working, they are loaded but overridden by the style in the style.css. when I put them in the end they are not even loaded I don't know how to make them work. If you have any idea how can I fix that, I would be glad. Thank you again.

[R3ygoski]

Yes, I tested it here and encountered the same problem, the @import really didn't work as expected. Instead of using @import in your CSS, you can then use <link> in the HTML, which is more likely to work, it would look like this:

  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/responsive-mobile.css">
  <link rel="stylesheet" href="./css/responsive-tablet.css">

[kaoutar-ouadih]

Okay thank you.