Help me with this challenge from frontendmentor


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.


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

    <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>
        <form id="survey-form" action="/datos" method="post">
            <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>
        <p class="message_error">Please provide a valid email</p>
      <div class="col-der">
        <img src="images/hero-desktop.jpg" alt="photo of model" class="hero">
  <script src="main.js"></script>


* {
  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;


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)) {
  } else {

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