Report how many paragraphs are on the page.
Acceptance criteria
- 1.#out should show 3.
JavaScript Tutorial · JavaScript DOM
These 10 tasks go with the JavaScript DOM Collections chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “querySelectorAll returns a NodeList, which looks like an array but is not one.” .
1.Count the matchesexercise · easy · 10 min
Report how many paragraphs are on the page.
Passes when: #out should show 3.
2.Loop with forEachexercise · easy · 10 min · practice plan
Join the text of every row using forEach.
Passes when: #out should show AB.
3.Turn a NodeList into an arrayexercise · easy · 10 min · practice plan
Use Array.from with map to join the row texts with dashes.
Passes when: #out should show A-B-C.
4.Filter elementsexercise · easy · 10 min · practice plan
Count how many rows have the class on.
Passes when: #out should show 2.
5.Show a NodeList is not an arrayexercise · medium · 10 min · practice plan
Report whether a NodeList is a real array.
Passes when: #out should show false.
6.Fix map called on a NodeListbug fix · easy · 8 min
A NodeList has forEach but not map.
Passes when: #out should show A-B.
7.Fix the live collection removed in a loopbug fix · easy · 8 min · practice plan
Removing from a live collection while looping skips elements.
Passes when: #out should show 0.
8.Fix the stale static listbug fix · easy · 8 min · practice plan
A NodeList does not update when elements are added.
Passes when: #out should show 2.
9.Fix the collection used as one elementbug fix · easy · 8 min · practice plan
querySelectorAll returns a list, so textContent must be read per element.
Passes when: #out should show AB.
10.Fix the index used on a single elementbug fix · easy · 8 min · practice plan
querySelector returns one element, which cannot be indexed.
Passes when: #out should show item A.
Between them these tasks cover NodeList, HTMLCollection and Array.from.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.