https://github.com/JS-Beginners/lightbulb-effect-project (Hosted on Github)
- 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.
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.
What To Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
- Add a link to your finished project below!
What You Should See