Responsive HTML, CSS, JS

Hi

Your CSS and JS code have lot of repeated code.

1. **CSS:

.errors-and-icons-1, .errors-and-icons-2,.errors-and-icons-3,.errors-and-icons-4{
  visibility: hidden;
  display: flex;
  justify-content: end;
}
.error1,.error2,.error3,.error4 {
  color: red;
  font-size: 10px;
}

You do not need to create 4 different classes. Create a single .error and .errors-and-icons class. And use them for each input element.

1. To place the error icon correctly: You need to change your html code. wrap input element, error icon and error message in a div element. set position: relative on div. and use position: absolute; top: 50%; transform: translateY(-50%); right: 2px; on error icon. This place the error icon on the right edge of input element.

2. **In JS code **. This code is repeated:

if (nameInput.validity.valid) {
    nameError.textContent = "";
    nameInput.className = "border";
    const divEl = document.querySelector(".errors-and-icons-1");
    divEl.style.visibility = "hidden";
  }

You can wrap it into a function like this:

function removeError(inputElem, errorElem){
      if (inputElem.validity.valid) {
               errorElem.textContent = "";
               inputElem.className = "border";
               const divEl = document.querySelector(".errors-and-icons-1");
              divEl.style.visibility = "hidden";
  }
}

Similarly you can wrap following code into a function:

if (nameInput.value.trim() === "") {
    nameError.textContent = "First Name cannot be empty!";
    nameInput.className = "border-invalid";
    const divEl = document.querySelector(".errors-and-icons-1");
    divEl.style.visibility = "visible";
  }

Hey Aygulio,

I really like this solution, well done, it looks great!

I see that you've used Flexbox for the layout of the two containers. A useful flex property to use is flex-flow: row wrap or flex-wrap: wrap, instead of changing the flex-direction with a media query.

After switching your layout to use flex-wrap: wrap and removing width: 50% from your right container, I was able to see the layout responsively optimised.

Let me know if this helps.

Great job!