Hosted Project
https://js-beginners.github.io/background-color-switcher/GitHub Source Files
https://github.com/JS-Beginners/background-color-switcherProject Objective
The objective of this project is to code a four-button JavaScript background color switcher. The control switches are buttons with event listeners.JavaScript Used
- JavaScript conditionals
- JavaScript addEventListener property
- JavaScript CSS selectors
- JavaScript CSS manipulation
My Personalize Summary
This project was pretty straight forward. After watching the “project requirements” video, or visiting my github hosted page, you'll see that the project is pretty simple as long as you know and remember some basic CSS and JavaScript.New Things Learned or Refreshed
I coded this project's solution all on my own so, I'm sure my code will be 100% different than the author's solution. Or, maybe not, since I haven't seen his solution. 🙂 Anyway, I used CSS to create the four control switch buttons. Then, I used the forEach loop to attach an eventListener to each of the buttons. Within the eventListener, I used some basic logic to change the background color of the page as each control button is clicked. All in all, I think you'll find this pretty fun to code, since it uses visual interactions as opposed to being a calculator. I used Google one time to search. I had to remind myself how to actually use JavaScript to manipulate the CSS. Specifically, I went to W3Schools to remember how to code out the first part of the following line of code:body.style.backgroundColor = e.target.id;Time to Code
This project took me about 20 minutes to code out the solution.Lines of Code
This project uses around 20 lines of JavaScript code, including white space and code comments.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 Background Color Switcher in action.Need to see the video solution for this project?
Get BlueLime's JavaScript for Beginners: Create 27 Projects from Scratch Course
Leave a Reply