Span Manipulation Lab
Medium
11
64.7% Acceptance
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
- Create 4
span
elements with the following IDs:span1
,span2
,span3
, andspan4
- Add a class
highlighted
tospan1
when the user clicks on it - Add a class
blue
tospan2
when the user hovers over it (mouseover event) - Add a class
green
tospan3
when the user double-clicks on it - Add a class
yellow
tospan4
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.