2deb73c8d1
* 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>
7.0 KiB
7.0 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 6148dd31d210990f0fb140f8 | Part 59 | 0 | part-59 |
--description--
It is useful to see the default border around the fieldset elements, during development. However, it might not be the style you want.
Remove the border and bottom padding on the .question elements.
--hints--
You should use the .question selector.
assert.exists(new __helpers.CSSHelp(document).getStyle('.question'));
You should give the .question a border of none.
assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.border, 'none');
You should give the .question a padding-bottom of 0.
assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBottom, '0px');
--seed--
--seed-contents--
<!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">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
text-align: center;
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
}
nav > ul > li {
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
}
li > a {
color: inherit;
text-decoration: none;
}
main {
padding-top: 50px;
}
section {
width: 80%;
margin: 0 auto 10px auto;
max-width: 600px;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
margin-top: 0px;
padding-top: 60px;
}
.info {
padding: 10px 0 0 5px;
}
.formrow {
margin-top: 30px;
padding: 0px 15px;
}
input {
font-size: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::before {
content: "Question #";
}
--fcc-editable-region--
--fcc-editable-region--
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}