Help me with this challenge from frontendmentor

Hi,

I’m practice my new knowledge in javascript (thanks freeCodeCamp) with the challenges of frontendmentor. Now, I’m sticking with this challenge: Base-Apparel.

This challenge has a email send button and it has a special features. I’ve looked some hints and the most uses javascript. I follow the next solution: github repo.

But in my local machine the solution doesn’t work. I put here my HTML, CSS and JS for please look my mistakes.

HTML:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Base Apparel coming soon</title>
    <link rel="stylesheet" type="text/css" href="style.css">

  </head>
  <body>
    <div class="container">
      <div class="col-izq">
        <img src="images/logo.svg" alt="logo" class="logo">
        <div class="text-zone">
          <p id="t1">WE'RE</p>
          <p id="t2">COMING<br>SOON</p>
          <p id="t3">Hello fellow shoppers! We're currently building our new fashion store. Add your email below to stay up-to-date with announcements and our launch deals.</p>
        </div>
        <form id="survey-form" action="/datos" method="post">
          <label>
            <input id="email" type="email" name="email" placeholder="Email Address" required>
            <iml src="images/icon-error.svg" class="icon_error" alt="icon error">
            <button id="submit"><img src="images/icon-arrow.svg" alt="submit email address"/></button>
          </label>
        </form>
        <p class="message_error">Please provide a valid email</p>
      </div>
      <div class="col-der">
        <img src="images/hero-desktop.jpg" alt="photo of model" class="hero">
      </div>
    </div>
  <script src="main.js"></script>
  </body>
</html>

CSS:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: #fff;
  width: 1440px;
}

.container {
  display: grid;
  grid-template-columns: 830px 610px;
  /*justify-con tent: space-around;*/
}

.col-izq {
  background-size: cover;
  background-image: url("images/bg-pattern-desktop.svg");
}

.hero {
  object-fit: contain;
}

.logo {
  margin-top: 90px;
  margin-bottom: 100px;
  margin-left: 150px;
}

.text-zone {
  margin-left: 150px;
  font-family: sans-serif;
}

form {
  margin-left: 150px;
}

#t1, #t2 {
  font-size: 48px;
  letter-spacing: 9px;
}

#t1 {
  color: hsl(0, 36%, 70%);
}

#t2 {
  color: hsl(0, 6%, 24%);
}

#t3 {
  font-size: 16px;
  margin: 20px 0px 40px 0px;
  padding-right: 12rem;
  color: hsl(0, 36%, 70%);
  line-height: 1.5;
}

#email {
  color: hsl(0, 36%, 70%);
  font-weight: bold;
  padding: 10px 0 10px 20px;
  border-radius: 50px;
  border: 1px solid hsl(0, 25.8%, 74.1%);
  width: 20rem;
  height: 40px;
}

#submit {
  width: 80px;
  height: 40px;
  border-radius: 50px;
  border: 0;
  cursor: pointer;
  margin-left: -80px;
  background: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
  position: absolute;
}

.message_error {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 10px;
  color: hsl(0, 36%, 70%); 
  margin-top: 12px;
  margin-left: 170px;
}

.icon_error {
	position: absolute;
	right: 90px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
}

JavaScript:

let formEmail = document.querySelector('#email');
let button = document.querySelector('#submit');

let iconError = document.querySelector('.icon_error');
let textError = document.querySelector('.message_error');

const emailForm = /^[a-zA-Z0-9.!#$%&'*+/=?^_{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

button.addEventListener('click', () => {
  let emailValue = formEmail.value;
  if (emailForm.test(emailValue)) {
    iconError.classList.add('hidden')
    textError.classList.add('hidden')
  } else {
      iconError.classList.remove('hidden')
      textError.classList.remove('hidden')  
  }
})

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.