Base Apparel Page using HTML CSS and JS (grid & absolute position)

Hi, First of all congtratulations on completing this challenge. Tho there are few things you need to change which I am going to point out:

• When ever you use form rather that adding the eventListner on the submit-button add the eventListerner on the <form> element. When we click on button with type submit(that is very important) form automatically get submitted.

  <form  class="email-input-wrapper" id="form"> // no need to mention action
            <input
              id="user-input"
              name="email"  // with this we can extract the value of input. 
            />
            <button type="submit" id="submit-button">
              <img src="images/icon-arrow.svg" alt="" />
            </button>
          </form>

const formEl = document.getElementById("form")

formEl.addEventListner("submit", (event) => {
   event.preventDefault() ;// form has default behaviour of going to differnt url for submission. We need to avoid that 

   const valueEntered = event.target.email.value ; // using the name to extract the value

   //DO ALL THE CHECKING HERE...ONCE EVERYTHING IS OKAY..YOU CAN CLEAR THE INPUT
   //FOR THAT YOU DONT HAVE TO USE ANY TIMER. JUST RESET THE VALUE LIKE THIS.
    event.target.email.value = "";

• For gradient you can refer to https://www.w3schools.com/css/css3_gradients.asp or https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

Feel free to drop a mesg incase you need any help. I am no expert but will try to help you out

Good Luck,

Happy Coding

Hey good job completing this challenge

Keep up the good work

Your solution looks great however I think that the logo is a bit too small. Secondly the description is supposed to wrap by the keyword "our" to look like the design.

I hope this helps

Cheers

Happy coding 👍

Hi, Nguyen! 👋

It's great to see you submitting another solution! 👏 Good effort on this challenge! 👍

Regarding your questions.

• For me, I used the Netlify form. So, when the user submitted their email, there will be a "Thank you" page and inside it, there's a link to go back to my site. Then, once the user goes back the email input has been cleared. So, if I would do it by myself, I would probably clear the input by setting the value to an empty string and adding a pop-up that says "Thank you for submitting your email!".
• If I don't have the design file, I would just probably use a solid background because I think it is hard to measure the color for the gradient background. However, I use this linear-gradient(135deg, white, #fff5f5) code. So, you can just copy-paste it if you want. Regarding the learning resource, I would recommend reading the MDN documentation and/or CSS Trick articles about gradients.

I recommend adjusting the breakpoint for the media query, it's too late to change the layout into desktop layout on 1440px.

I would highly recommend never using inline CSS in JavaScript. It's best to always use CSS classes to style different states. For example, you can have is-invalid class in your CSS to style any element that is invalid. So, in JavaScript you can add and remove the is-invalid class based on different conditions.

That's it! Happy coding! 😁