feat(curriculum): add accessibility-quiz practice project (#43244)
* feat(curriculum): add accessibility-quiz practice project * add parts 002-006 * add parts 7-8, tentative on logo aspect-ratio * add parts 008-013 * add parts 013-016 * add parts 017-026 * add parts 026-027 * add parts 027-029 * add parts 029-044 * add parts 044-067 - all parts done * add tests 001-009 * add tests 010 - 033 * add tests 034 - 039 * update tests 008~033, add tests 040-050 * add all tests * fix some stuff, remove final.md * take reasonable suggestions from Nich, ignore rest Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * replace svg link with actual CDN * remove getAttribute in potentially bad places * add method to form * fix silly querySelectors * adjust selectors for 028 * fix selectors, and add color transformations Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com> * fix: typos, and make one test lenient Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>
This commit is contained in:
Shaun Hamilton
GitHub
@@ -0,0 +1,161 @@
|
||||
---
|
||||
id: 6143908b6aafb00a659ca189
|
||||
title: Part 21
|
||||
challengeType: 0
|
||||
dashedName: part-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Keeping in mind best-practices for form inputs, give each `input` an appropriate `type` and `name` attribute. Then, give the first `input` a `placeholder` attribute.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `input` a `type` of `text`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[0]?.type, 'text');
|
||||
```
|
||||
|
||||
You should give the second `input` a `type` of `email`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email');
|
||||
```
|
||||
|
||||
You should give the third `input` a `type` of `date`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date');
|
||||
```
|
||||
|
||||
You should give the first `input` an appropriate `name` attribute.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1);
|
||||
```
|
||||
|
||||
You should give the second `input` an appropriate `name` attribute.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1);
|
||||
```
|
||||
|
||||
You should give the third `input` an appropriate `name` attribute.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1);
|
||||
```
|
||||
|
||||
You should give the first `input` a `placeholder` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>freeCodeCamp: 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">
|
||||
--fcc-editable-region--
|
||||
<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" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.:</label>
|
||||
<input id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
Reference in New Issue
Block a user