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:
- Create a directory for the activity and in that directory, in the command prompt, run
npm run init
to set uppackage.json
. - Run
npm install jquery -s
to install jQuery. - Create an HTML file for the activity and give the HTML block a body.
- Add a style block.
- Add a div to hold all of the buttons and lights.
- Add a
script
tag with the source to thejQuery
file.<script src="./node_modules/jquery/dist/jquery.js"></script>
- Add a
script
tag to hold the main JavaScript code...