7.1 KiB
7.1 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 6145f14f019a4b0adb94b051 | Крок 36 | 0 | step-36 |
--description--
В межах першого елементу div.answer вкладіть один обов'язковий елемент select з трьома відповідними елементами option.
Першому елементу option надайте value зі значенням "" та текст Select an option. Другому елементу option надайте value зі значенням yes та текст Yes. Третьому елементу option надайте value зі значенням no та текст No.
--hints--
Вкладіть один елемент select в межах першого елементу div.answer.
assert.exists(document.querySelector('div.answer > select'));
Вкладіть три елементи option в межах елементу select.
assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3);
Першому елементу option надайте value зі значенням "".
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, '');
Першому елементу option надайте текстовий вміст зі значенням Select an option.
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option');
Другому елементу option надайте value зі значенням yes.
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes');
Другому елементу option надайте текстовий вміст зі значенням Yes.
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes');
Третьому елементу option надайте value зі значенням no.
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no');
Третьому елементу option надайте текстовий вміст зі значенням No.
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No');
Для select надайте атрибут required.
assert.isTrue(document.querySelector('div.answer > select')?.required);
--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>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>Are you a frontend developer?</label>
</div>
--fcc-editable-region--
<div class="answer">
</div>
--fcc-editable-region--
<div class="question-block">
<label>Do you have any questions:</label>
</div>
<div class="answer">
</div>
</div>
</section>
</form>
</main>
</body>
</html>
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;
}
p::before {
content: "Question #";
}
.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;
}