Create and fire an event called itemAdded, then report it was heard.
Acceptance criteria
- 1.#out should show heard it.
JavaScript Tutorial · JavaScript Events
These 10 tasks go with the JavaScript Custom Events 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: “A custom event lets one part of your code announce something to another.” .
1.Fire a custom eventexercise · easy · 10 min
Create and fire an event called itemAdded, then report it was heard.
Passes when: #out should show heard it.
2.Send data with the eventexercise · easy · 10 min · practice plan
Pass a name in detail and report it.
Passes when: #out should show Book.
3.Make it bubbleexercise · easy · 10 min · practice plan
Fire the event on the inner div so the outer one hears it.
Passes when: #out should show outer heard it.
4.Fire on documentexercise · easy · 10 min · practice plan
Fire a themeChanged event on document and report the detail.
Passes when: #out should show dark.
5.Let two listeners respondexercise · medium · 10 min · practice plan
Attach two listeners to one custom event and report that both ran.
Passes when: #out should show both ran.
6.Fix the event never dispatchedbug fix · easy · 8 min
Creating an event does not fire it.
Passes when: #out should show heard it.
7.Fix the data put on the wrong propertybug fix · easy · 8 min · practice plan
Data travels in detail, not in a property of your own.
Passes when: #out should show Book.
8.Fix the missing bubbles optionbug fix · easy · 8 min · practice plan
A custom event does not bubble unless it is told to.
Passes when: #out should show outer heard it.
9.Fix the event fired on the wrong elementbug fix · easy · 8 min · practice plan
The listener is on the cart, so the event must be fired there.
Passes when: #out should show heard it.
10.Fix Event used where detail is neededbug fix · easy · 8 min · practice plan
A plain Event cannot carry a detail property.
Passes when: #out should show Book.
Between them these tasks cover CustomEvent, detail and dispatchEvent.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.