The key concepts utilized in this lab are:
- Event Listeners - To respond to user interactions.
Follow these steps to complete the lab:
Start by creating an HTML file. Name it 'index.html'. In this file, create a button with the id 'applyStyles' and a paragraph element with the id 'target'.
document.getElementByIdmethod to select the 'applyStyles' button. Assign an event listener to this button that responds to click events.
Inside the event listener, target the paragraph element by its id 'target' using
document.getElementById. Then, manipulate the paragraph's style properties - fontSize, fontStyle, and color - as per the requirements.
Similar to what we did for the 'applyStyles' button, assign an event listener to the 'resetStyles' button. Inside this event listener, reset the paragraph's styles to their original state by setting the style properties to an empty string.
Append this 'resetStyles' button to the document's body using
- Ensure the event listeners are correctly attached and function as expected.