Span Manipulation Lab

In this lab, you have to create 4 span elements with unique IDs: span1, span2, span3, and span4. You have to write JavaScript code that adds a class to each span on different user-triggered events. More explanations about concepts are given below.

Event listeners allow you to detect various events that occur in your web application such as mouse clicks, hover, focus, etc. You can attach event listeners to HTML elements using the addEventListener method in JavaScript.

addEventListener syntax:

element.addEventListener(event, function, useCapture);

Example:

document.getElementById('myButton').addEventListener('click', function () {
  alert('Button clicked!');
});

In this lab, you will practice attaching event listeners to span elements and manipulating their CSS classes using JavaScript.

Challenges

1. Create 4 span elements with the following IDs: span1, span2, span3, and span4
2. Add a class highlighted to span1 when the user clicks on it
3. Add a class blue to span2 when the user hovers over it (mouseover event)
4. Add a class green to span3 when the user double-clicks on it
5. Add a class yellow to span4 when the user focuses on it (using the keyboard Tab key)

Make sure to complete the entire setup including the evaluation script, initial files, and test environment setup script.