Hosted Project
JavaScript Light Switch Project (Hosted on Github Pages)
Source Files
https://github.com/JS-Beginners/lightbulb-effect-project (Hosted on Github)
Project Objective
This small JavaScript light switch project turns a light bulb on and off with the click of the mouse.
JavaScript Used
- CSS Styling using JavaScript
- DOM manipulation
My Personalize Summary
Ok. This project was fairly simple.
The hardest part about the project was finding images of light bulbs that would create the light-on light-off affect.
After a fairly long search on Google images, I finally found an image with both bulbs attached. I then used my picture editing software to split the image into two equal sizes.
From there, I made the light switch on and off by using JavaScript to toggle two different CSS backgrounds.
One CSS class has the bulb on and the other has the bulb off.
Once I wired up the click event, the project was as good as done.
New Things Learned or Refreshed
This project was pretty simple so there wasn't much that I learned.
I did, however, have to think for a while for the best way to change the CSS backgrounds.
I first thought I would add one class while simultaneously removing another.
But, I eventually settled on the toggle function.
Time to Code
This project took me about fifteeen minutes to code, including the HTML and CSS.
Your Turn!
What To Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
app.jsfile. - Implement the JavaScript code in your own
app.js file. - If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
- Add a link to your finished project below!
What You Should See
Visit the hosted github page to see this JavaScript Light Switch Project in action.
Leave a Reply