Learn Accessibility by Building a Quiz - Step 21

HTML-CSS
1

I’m on Step 21 of the Accessibility of Building a Quiz Project. The system won’t accept my answer for creating a type and name for the student-name, student-email and birth-date input elements. I think the issue lies in the type attribute for birth-date and it won’t accept my answer.

Would someone know what I should put for birth-date type that the system would accept?

Hope to hear from someone soon, thank you!

   **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" type="name" name="student-name" placeholder="First and Last Name" />
         </div>
         <div class="info">
           <label for="student-email">Email:</label>
           <input id="student-email" type="email" name="student-email" />
         </div>
         <div class="info">
           <label for="birth-date">D.O.B.:</label>
           <input id="birth-date" type="month-date-year" 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/104.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 21

Link to the challenge:

2

Hey, looks like you were almost there, just instead of the format that the input data is in, they want to know what type of data the input is. In order to turn the input into a date-picker it will simply be date.

For a list of all the possible input types, a reference I like to use is the MDN web docs page

3

An example would be better eg Jaden Smith

This type has to be changed, type has default values but not something that you create

4

Thank you for helping, and thanks for sharing the input type reference page, I appreciate it! I never know what to type for these attributes lol.

Is there a similar website for styling? I get stuck on what to type there too!

5

Yep! That site has a page covering CSS as well. On the left under “Reference” there’s a dropdown for properties that gives you the different syntax for the properties, as well as a dropdown for selectors, psuedo-classes, and psuedo-elements. It’s a bit like looking things up in a dictionary though, so it can be helpful to have an idea of what you want to look up.

The other site I like to use for referencing things is this just because sometimes one explains things better or vice versa.

6

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