Responsive HTML, CSS, JS

Community feedback

• 

  Mahesh Yadav•1,220

  @Mahesh-yadavPosted over 4 years ago

  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.

  2. 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.

  3. **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";
    }
  

  2
• 

  Ramsay Sewell•585

  @ramsaysewellPosted over 4 years ago

  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!

  1

  ---

  

  Aygulio•75

  @aokdirovaPosted over 4 years ago

  @ramsaysewell Hey thanks for great advice! I implemented it right away. Did not even know that such things existed. Good to know

  0