Chapter 3: DOM Manipulation and Event Handling

Activity 3 – Implementing jQuery

You want to make a web app that controls your home's smart LED light system. You have three LEDs that can be individually turned on or off, or all toggled together. You must build a simple HTML and jQuery interface that shows the on state of the lights. It must also have buttons to control the lights.

To utilize jQuery to build a functioning application, follow these steps:

1. Create a directory for the activity and in that directory, in the command prompt, run npm run init to set up package.json.
2. Run npm install jquery -s to install jQuery.
3. Create an HTML file for the activity and give the HTML block a body.
4. Add a style block.
5. Add a div to hold all of the buttons and lights.
6. Add a script tag with the source to the jQuery file.

   <script src="./node_modules/jquery/dist/jquery.js"></script>

7. Add a script tag to hold the main JavaScript code...