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')
}
})