mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
66 lines
2.2 KiB
HTML
66 lines
2.2 KiB
HTML
<html>
|
|
<body>
|
|
<div
|
|
class="codepen"
|
|
data-theme-id="36294"
|
|
data-prefill
|
|
data-editable="true"
|
|
data-height="100%"
|
|
data-theme-id="1"
|
|
data-default-tab="js,result"
|
|
>
|
|
<pre data-lang="css">
|
|
label,
|
|
button {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
</pre>
|
|
<pre data-lang="html">
|
|
<label><input type="checkbox" />Ice cream</label>
|
|
<label><input type="checkbox" />Pizza</label>
|
|
<label><input type="checkbox" />Tacos</label>
|
|
<label><input type="checkbox" />Meatloaf</label>
|
|
<label><input type="checkbox" />Brocolli</label>
|
|
|
|
<button>Display Your Favorites</button>
|
|
|
|
<div class="favorites"></div>
|
|
</pre>
|
|
<pre data-lang="js">
|
|
/*
|
|
1. Create a function named `getFavs`. Inside, run:
|
|
alert('clicked')
|
|
|
|
2. Create a variable `button` and set it to a reference to our button using:
|
|
document.querySelector('button')
|
|
|
|
3. Add a click event listener to the button that calls `getFavs`.
|
|
Click the button and make sure the alert is displayed.
|
|
|
|
4. Replace the `alert` call with a new `favList` variable set to an empty array: []
|
|
|
|
5. Create a const variable `inputs` set to all of the inputs on the page.
|
|
`querySelectorAll` will help here.
|
|
|
|
6. Iterate over all of the inputs using:
|
|
for (const input of inputs) {}
|
|
|
|
7. In each iteration, use an `if` statement to check if `input.checked` is equal to true
|
|
|
|
8. If the above tests passes, push the `input.parentNode.textContent` into the `favList`
|
|
array by passing the text as a parameter to `favList.push()`
|
|
- `push` is a built-in array method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
|
|
|
|
9. Outside of the for loop, use `document.querySelector('.favorites')` to target the
|
|
div at the bottom of the page. Set the div's `textContent` to `favList.join(' ')`.
|
|
This will join each of the foods together into a string separated by a space.
|
|
*/
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
|
|
</body>
|
|
</html>
|