JavaScript Simplified / Chapter 71 Exercises

  • Index of exercises
  • Email me

1

2

3

4

5

6

7

8

9

10

Congratulations. You've aced all the exercises for this chapter.


To practice on your own, or to check code you believe shouldn't have been scored as incorrect, go to CodePen.


Are you ready to rate JavaScript Simplified? on Amazon?


Rate it on Amazon.

0,1,2,3,4,5,6,7,8,9

0

0

0

0

Fill in the blank to add the class "pretty" to the element. document.querySelector("p")_____________________; .classList.add("pretty") \.classList\.add\(•pretty•\)
Fill in the blank to remove the class "pretty" from the element. document.querySelector("p")_____________________; .classList.remove("pretty") \.classList\.remove\(•pretty•\)
An element has been assigned to the variable targetedDiv. Assign its class list to the variable cList. let cList = targetedDiv.classList; letcList=targetedDiv\.classList;
An element has been assigned to the variable targetedDiv. Add a class. Make up the class name. targetedDiv.classList.add("narrow"); targetedDiv\.classList\.add\(•.*•\);
Add a class to an h1 heading. Make up the class name. document.querySelector("h1").classList.add("emphasized"); document\.querySelector\(•h1•\)\.classList\.add\(•.*•\);
An element has been assigned to a variable. Remove two classes from it. Make up the variable name and the class names. elem.classList.remove("big", "bold"); [a-z_$][a-zA-Z0-9_$]*\.classList\.remove\(•.*•,•.*•\);
Code the first line of an if statement that checks whether the first unordered list in the document has a particular class. Make up the class name. if (document.querySelector("ul").hasClass("indented") { if\(document\.querySelector\(•ul•\)\.hasClass\(•.*•\){
An element has been assigned to the variable contentDiv. Add three classes to it. Make up the class names. contentDiv.classList.add("normal", "prominent", "wide"); contentDiv\.classList\.add\(•.*•,•.*•,•.*•\);
  1. In the HTML panel I've coded a paragraph and a button.
  2. Click the HTML button to see my HTML markup.
  3. In the CSS panel, I've coded a class, "greatBig".
  4. Click the CSS button to see the class.
  5. Click the Result button to see my HTML markup rendered on the page.
  6. Click the JS button.
  7. In the JS panel, I've assigned the paragraph and the button to variables.
  8. When the button is clicked, the class is added to the paragraph by an anonymous function.
  9. Code the event listener and anonymous function.
  10. Click the Click to enlarge button
  11. If you've coded correctly, the paragraph text will get big.
  12. For help with this code, see Chapter 71 in the book.
  1. In the HTML panel I've coded a hidden paragraph and a button.
  2. Click the HTML panel to see my markup.
  3. In the CSS panel, I've coded a class.
  4. Click the CSS panel to see my CSS.
  5. Click the Result button to see my HTML markup rendered on the page.
  6. Click the JS button.
  7. I've assigned the hidden paragraph and button to variables. And I've coded an event listener that calls a function.
  8. Code the function. It removes the "hidden" class.
  9. Click the Unhide button.
  10. If you've coded correctly, the hidden paragraph will display the text.
  11. For help with this code, see Chapter 71 in the book.