1.2.2: Events

Search…

1.2.2: Events

1.2.2: Events
Introduction
DOM inputs are also known as events, which trigger on user actions. When the user performs an action such as a click, the browser triggers a designated "callback function", which triggers our logic to manipulate the DOM. This is how our main function worked in Coding Basics. Note there are many more types of user actions than clicks.
The following is an example of a callback function myNewMain passed to addEventListener so that our browser knows what logic to run when the user clicks on the wowParagraph HTML element.
1
const myNewMain = (event) => {
2
  console.log("hey wow my new function");
3
};
4
​
5
wowParagraph.addEventListener("click", myNewMain);
Copied!
Exercises
Setup
1.Clone this repo:https://github.com/rocketacademy/dom-starter-bootcamp​
2.Don't forget to run npm install in the starter code directory.​
3.When you finish each exercise, make a commit and start over in the same repo
Click to Create
1.Create a button in JS and add a click event listener with a callback function to it
2.When the user clicks the button, build the above HTML elements. Multiple clicks create multiple grey boxes.
3.Feel free to re-use code from 1.4.1: Creating Elements.
Create with Other Events
1.Instead of a click event, attach other events to the button:dblclick, mouseenter, mouseleave.
2.Use this page to find out more about these events: https://developer.mozilla.org/en-US/docs/Web/Events​
Click to Create with Nested Button
1.Start with code from Click to Create exercise above
2.Inside each grey box create a button and add a click event listener with a callback function to the button
3.When the user clicks the button in the grey box, create and add another yellow box with 2 pink boxes inside. These can also say "hello" and "banana", or you can come up with your own text.
Click and Input
1.Start with code from the Click to Create with Nested Button exercise above
2.Add an input field to each generated grey box in addition to the nested button
3.When the user clicks the button in the grey box, the app creates another yellow square with a single pink square inside. Inside the pink square is the text the user typed in the input box.
In the following example: The user has typed "hello" and clicked submit, and also typed "world" and clicked submit. Not shown are any other sets of grey boxes.
<<<<<<< Updated upstream 
​
Could not load image
Stashed changes