error check with javascript

Community feedback

• 

  Mo•840

  @MohamedAridahPosted over 2 years ago

  Hello @Gab-Ferreira, i have seen you solution. you did good job, but i have some notes on you solution.

  1. HTML

  • your general structure :

    body
     main
      header
       section
        footer
    

  could be better for SEO and semantically, the general html layout could be:

  body
  header--> contains logo (the image).
  
  main --> contains:
  	 1. landing text
  	 2. subscribe form
  	 3. banner image
  	 
  footer --> contains:
  	   1. social media icon
  	   2. copyrights
  div --> for your attribution
  

  • .texts-container use <h1> heading level instead of <h2>. this will fix you html accessibility issue
  • .button-email could be <button type="submit">

  2. CSS

  • main should have more space in the top and bottom add

    main {
    	padding: 70px 0
    }
    

  • for the input you should rest outline and border

    .email-button-container > form > input{
    	outline:none;
    	border 1px solid var(--pale-blue:hsl(223, 100%,88%))
    }
    

  • .button-email hover state background-color is very light try use:

    	.button-email:hover{
    		opacity: .7
    	}
    

  • icons doesn't work check this issue.
  • you can use @media media queries right after the element that need to be responsive instead of writing them all at page's end.

  3. JavaScript

  • why you add .error class before check if email validation or input value.

  sendEmailButton.addEventListener("click", () => {
  
  emailError.classList.add("error");
  }
  });
  

  • you can use submit event for the form directly. So JavaScript could be:

  const emailError = document.querySelector(".email-error");
  const form = document.querySelector("form");
  const inputEmail = form.getElementById("input-email");
  let emailRegex =
    /^(?![_.-])((?![_.-][_.-])[a-zA-Z\d_.-]){0,63}[a-zA-Z\d]@((?!-)((?!--)[a-zA-Z\d-]){0,63}[a-zA-Z\d]\.){1,2}([a-zA-Z]{2,14}\.)?[a-zA-Z]{2,14}$/;
  
  form.addEventListener('submit',(e)=>{
      let inputValue = inputEmail.value.trim();
      if(inputValue ==""){
          e.preventDefault();
          emailError.innerHTML = "Email cannot be empty";
          inputEmail.style.border = "var(--red) 1px solid";
      }else if(!emailRegex.test(inputValue)){
          e.preventDefault();
          emailError.innerHTML = "Please provide a valid email address";
      }
  })
  

  I hope this wasn't too long for you, hoping also it was useful😍.

  Goodbye and have a nice day. Keep coding🚀

  Marked as helpful

  0

  ---

  

  GabFerreira•240

  @Gab-FerreiraPosted over 2 years ago

  @MohamedAridah I'm glad you answer to my questions, keep helping people because it's really cool to receive a ton of advices. Thanks a lot.

  0

  

  Mo•840

  @MohamedAridahPosted over 2 years ago

  @Gab-Ferreira It's my pleasure😍👍

  0
• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there. Your decision looks good, but there are some corrections:

  • Icons are still not displayed. In my opinion, it is better not to rely on third-party libraries, so I always use svg sprite. The icons are always on the server and it will not be such a surprise that a third-party library did not work.

  • making the button an extraneous element is a bad practice, why don't you just use the input type submit or the button type submit?

  • You also need to add an alternative description for the picture. Or hide it with aria-hidden = true.

  • Your site is perfectly responsive, but he lacks padding top

  I hope my comment will be useful

  All the best

  Marked as helpful

  0

  ---

  

  GabFerreira•240

  @Gab-FerreiraPosted over 2 years ago

  @isprutfromua Thanks for your answer, it's really helpful for me. I will try to do this challenge again with tour advices.

  0

  

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  @Gab-Ferreira Your welcome.

  Feel free to contact me if you have any questions

  Thanks and have a nice day!

  0