Base apparel Landing Page

Community feedback

• 

  Victoria Azola Silva•1,290

  @VickyAzola

  Posted over 1 year ago

  Hi! Great work finishing this challenge! I tried to put the icon using your code, and this is what I came up with.

  • First on the HTML i added the <svg> with an id and class, and I also added a class for the image on the button:

           <div class="input-wrapper">
                <input type="text" class="text-input" placeholder="Email Address">
                <svg id="error-icon" class="error-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" r="12" fill="#F96464"/><path fill="#FFF" fill-rule="nonzero" d="M13.256 6v9.056h-2V6h2zm-.944 12.464c-.384 0-.699-.104-.944-.312a1.027 1.027 0 0 1-.368-.824c0-.33.125-.608.376-.832.25-.224.563-.336.936-.336.373 0 .68.112.92.336.24.224.36.501.36.832 0 .341-.117.616-.352.824-.235.208-.544.312-.928.312z"/></g></svg>
                <button class="email-button">
                  <img class="btn-img" src="images/icon-arrow.svg" alt="">
                </button>
            </div>
  

  • Then for the CSS styled the .error-icon class like this:

  .error-icon {
      position: absolute;
      display: none;
      right: 63%;
      top: 15%;
  }
  

  • Modified the .email-button:

  .email-button {
      background: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
      width: 70px;
      height: 45px;
      border: 0;
      border-radius: 30px;
      cursor: pointer;
      position: absolute;
      left: 39%;
  }
  

  • I added the .btn-img class with some padding to center it and changed the color of the .error-message to red:

  .btn-img {
      margin-left: 40%;
  }
  

  #error-message {
      position: relative;
      font-family: 'Josefin Sans';
      font-size: 75%;
      padding-left: 3%;
      color: hsl(0, 93%, 68%);
      margin-top: 8px;
  }
  

  • Lastly, for the javascript, I changed the border to 1px (so the input doesn't change size when clicked) and added the errorIcon variable:

  line 9      const errorIcon = document.getElementById("error-icon")
  line 13   emailInput.style.border = '1px solid hsl(0, 93%, 68%)'
  line 16   errorIcon.style.display = "block"
  line 20   errorIcon.style.display = "none"
  

  • I also added an event listener to the emailimput variable, so when clicked, the error disappeared.

  line 25   emailInput.addEventListener("click", () => {
                     errorIcon.style.display = "none"
                     errorMessage.style.display = 'none';
                     emailInput.style.border = '0.5px solid hsl(0, 36%, 70%)'
                 })
  

  Hope this helps!

  01

  Marked as helpful