How to use Events exercise?
Clone the git from Github/rekapalanki
to your computer via CLI.
1. Event listener on a single element
Select "Click Me" button
Make a function that says "It got clicked!"
Attach a listener to the button
Hints
The object selection operation is executed on the document object.
The addeventListener() method accepts two arguments: event type and
operation to be executed.
When calling the event listener, we do not type () after the
function, cos' that way the function will run even if the event
does not occurr.
2. Event listener on multiple elements
Select all Buy buttons
Make a buyItem function that returns the name and the price of the item.
Loop over the buttons and attach a listener.
Hints
For traversing the DOM, investigate the element in the DOM tree by
right mouse click -> Investigate. This opens up the DevTools.
To get the DOM tree of the parent element, you can always refer to it
in the console with $0.parentElement. $0 refers to the element that is
selected on the Elements tab.
3. DOM manipulation - adding an element
Show the price of the individual items as a paragraph element within each card
4. DOM manipulation. Applying computational logic
Add a counter to each items with + / - options and additional Buy button.
4.a. After clicking Buy button, default input value to 0.
5. DOM manipulation - hiding elements (Optional)
Hide the unnecessary Buy buttons
6. DOM manipulation - adding an element (Optional)
Add an image element to the document representing a photo. You may choose
https://picsum.photos/200
7. Event listener
Count into the console how many times the mouse enters into the image