Learn Accessibility by Building a Quiz - Step 21

HTML-CSS
1

I added name and type attributes to all 3 input elements and added a placeholder attribute to the first input but my code is still incorrect. Everything looks correct to me so I don’t know where I messed up.

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
   <title>Accessibility Quiz</title>
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
   <header>
     <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
     <h1>HTML/CSS Quiz</h1>
     <nav>
       <ul>
         <li><a href="#student-info">INFO</a></li>
         <li><a href="#html-questions">HTML</a></li>
         <li><a href="#css-questions">CSS</a></li>
			  </ul>
     </nav>
   </header>
   <main>
     <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
       <section role="region" aria-labelledby="student-info">
         <h2 id="student-info">Student Info</h2>
         <div class="info">
           <label for="student-name">Name:</label>
           <input id="student-name" name="student-name" type="text" placeholder="John Doe" />
         </div>
         <div class="info">
           <label for="student-email">Email:</label>
           <input id="student-email" name="student-email" type="email" />
         </div>
         <div class="info">
           <label for="birth-date">D.O.B.:</label>
           <input id="birth-date" name="birth-date" />
         </div>
       </section>
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
       </section>
       <section role="region" aria-labelledby="css-questions">
         <h2 id="css-questions">CSS</h2>
       </section>
     </form>
   </main>
 </body>
</html>


/* file: styles.css */
body {
 background: #f5f6f7;
	color: #1b1b32;
	font-family: Helvetica;
	margin: 0;
}

header {
 width: 100%;
	height: 50px;
	background-color: #1b1b32;
	display: flex;
}

#logo {
 width: max(100px, 18vw);
	background-color: #0a0a23;
 aspect-ratio: 35 / 4;
	padding: 0.4rem;
}

h1 {
 color: #f1be32;
	font-size: min(5vw, 1.2em);
}

nav {
 width: 50%;
	max-width: 300px;
	height: 50px;
}

nav > ul {
 display: flex;
	justify-content: space-evenly;
}

h1,
h2 {
	font-family: Verdana, Tahoma;
}

h2 {
	border-bottom: 4px solid #dfdfe2;
}


   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 21

Link to the challenge:

2

When I test your code I get this error message
Hint

You should give the third input a type of date.

When I look at the input they are talking about I don’t see that type of date.

3

I added type=“date” but it is still considered incorrect.

          <div class="info">
            <label for="birth-date">D.O.B.:</label>
            <input id="birth-date" name="birth-date" type="date" />
          </div>
4

it is passing on my end.

Can you post your new code for the entire section element?

It might be an issue with your browser or browser extension that is messing with the test

5

Here is the code for the entire section.

        <section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
          <div class="info">
            <label for="student-name">Name:</label>
            <input id="student-name" name="student-name" type="text" placeholder="John Doe" />
          </div>
          <div class="info">
            <label for="student-email">Email:</label>
            <input id="student-email" name="student-email" type="email" />
          </div>
          <div class="info">
            <label for="birth-date">D.O.B.:</label>
            <input id="birth-date" name="birth-date" type="date" />
          </div>
        </section>
6

The code you have shared works on my end. Please ensure that you have disabled any extensions that interface with the freeCodeCamp website (such as Dark Mode and Ad Blocker), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

Or try another browser.

I am testing it on chrome without extensions and it passes

7

Thanks for helping, I submitted the answer using Microsoft edge and now it is working on chrome again.

8

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