Events

:books: What You'll Learn

In this activity, you will:

• Master event handling with addEventListener() method
• Create interactive buttons with click events
• Implement dynamic hover effects using mouse events
• Build a keyboard event detector
• Practice using arrow functions as event handlers

⏱️ Estimated Time: 45-60 minutes total

:warning: IMPORTANT: Before You Start

:warning: Warning DO NOT DELETE the existing files in the template:

• Package files
• Any other files you didn't create

ONLY EDIT the necessary files.

In each exercise below, click the Stackblitz link and familiarize yourself with the interface.

Steps to Create Your Event Projects

:computer: Exercise One: Click Event with addEventListener

⏱️ Time: 15 minutes

1. Open StackBlitz and access the template: Exercise 1
   • Alternative: Download the source code template from Stackblitz Download Project button if you want to use your IDE.

Follow these steps:

1. Add an HTML button with "Click Me" text
2. Declare a variable called button and select the button element using DOM
3. Use the .addEventListener() method to add a click event to the button:
   • Use an arrow function for the handler
   • Inside the function, alert with the message: "I love JavaScript!"

:bulb: Tip Use this syntax: button.addEventListener("click", () => { alert("I love JavaScript!"); });

Expected Results:

When you click the button:

:bulb: Tip Quick Reference:

• Select elements: document.querySelector('.className') or document.querySelector('#id')
• Arrow function syntax: () => { /*statement*/ }

:art: Exercise 2: Mouse Events - Hover Effects

⏱️ Time: 15 minutes

1. Open StackBlitz and access the template: Exercise 2
   • Alternative: Download the source code template from Stackblitz Download Project button if you want to use your IDE.

Goal: Create text that turns red when you hover over it

Follow these steps:

1. Add this paragraph element to your index.html file:

   html

   <p class="m-5 p-2">I love JavaScript</p>
   

2. In your JavaScript file:

   • Declare a variable called text and select the paragraph element
   • Add a mouseover event listener with an arrow function
   • Inside the function, add the class "text-danger" to the paragraph
   • Add a mouseout event listener with an arrow function
   • Inside the function, remove the class "text-danger" from the paragraph

:bulb: Tip Helpful Methods:

• Add class: text.classList.add("text-danger")
• Remove class: text.classList.remove("text-danger")

Expected Results:

Normal state:

When hovering:

:computer: Exercise 3: Keyboard Events - Key Press Detector

⏱️ Time: 15 minutes

1. Open StackBlitz and access the template: Exercise 3
   • Alternative: Download the source code template from Stackblitz Download Project button if you want to use your IDE.

Goal: Create a key press detector that alerts which key was pressed

Follow these steps:

1. Add an event listener to the document for keydown events
2. Use an arrow function that accepts an event parameter
3. Inside the function, alert the pressed key using event.key
4. Test by pressing different keys on your keyboard

:bulb: Tip Code Structure:

document.addEventListener("keydown", (event) => {
  alert(event.key);
});

Expected Result:

When pressing the 'w' key:

:white_check_mark: Required Elements

Your completed projects must include:

Exercise 1 - Click Event:

• :emoji: Button with click event listener using addEventListener()
• :emoji: Arrow function as event handler
• :emoji: Alert message when clicked

Exercise 2 - Mouse Events:

• :emoji: Paragraph element with mouseover/mouseout events
• :emoji: Dynamic class addition/removal
• :emoji: Visual feedback on hover

Exercise 3 - Keyboard Events:

• :emoji: Document-level keyboard event listener
• :emoji: Event object usage to detect pressed keys
• :emoji: Alert displaying the pressed key

:mag: Troubleshooting

:bulb: Tip Common Issues:

• Button click not working? Make sure you're selecting the button after it's added to the HTML
• Hover effect not changing color? Check that Bootstrap's text-danger class is included in your project
• Keyboard events not firing? Ensure you're adding the listener to document, not a specific element
• Code running before page loads? Wrap your code in window.addEventListener('DOMContentLoaded', () => { ... })

:emoji: Project Submission

:information_source: Ready to submit? When you have completed all three Event exercises, submit your projects using the link below:

Submit Your Projects Here

Before submitting, test that:

• :emoji: Button click shows alert
• :emoji: Text changes color on hover
• :emoji: Keyboard presses are detected