In the survey form project, user story 5 required that the email input must have an attribute of type=“email” and required but even if my input consists of those attributes, the script doesn’t recognize that those attributes are present.
My code so far:
HTML
<!DOCTYPE html>
<html>
<head>
<title>OS survey</title>
<link rel="stylesheet" href="surveystyle.css">
</head>
<div id="script">
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</div>
<main id="main">
<div class="title-section">
<h1 id="title">macOS vs. Windows</h1>
<p id="description">Thank you for helping us decide which platform to focus on</p>
</div>
<div id="surveyform">
<form id="survey-form">
<label>Name</label>
<input id="name" class="input-text" type="text" placeholder="Name*" required/>
<label id="email">E-Mail</label>
<input id="email" class="input-text" type="email" placeholder="E-Mail Address*" required/>
<label>Age</label>
<input id="age" class="input-text" type="number" placeholder="Enter your name here" required/>
</form>
</div>
</main>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
*{
font-family: 'Roboto', sans-serif;
}
@media (max-width: 699px){
.input-text{
max-width: 600px;
}
}
.title-section{
text-align: center;
color: white;
margin-top: 3em;
}
html{
height: 100%;
}
body{
background: linear-gradient(135deg, purple, pink);
max-height: 100%;
}
#survey-form .input-text{
display: block;
justify-content: center;
}
#survey-form{
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
padding-top: 10px;
padding-bottom: 35px;
padding-left: 2em;
padding-right: 2.5em;
max-width: 700px;
margin: 50px auto 0 auto;
border-radius: 5px;
padding-top: 30px;
}
.input-text{
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 1em;
margin-right: 1em;
font-size: 15px;
border: hidden;
border-bottom: 2px solid;
margin: 10px auto 30px auto;
outline: none;
}
.input-text:focus{
transition: all 0.3s ease;
border-bottom: 2px solid purple;
}
Anything I’m doing wrong?
Link to challenge: