
Hosted Project
GitHub Source Files
https://github.com/JS-Beginners/color-changing-app
Project Objective
The objective for this JavaScript color change app project is to change the color of the canvas when the user clicks on a button.
JavaScript Used
- eventListener
- Array
- Math.random
My Personalize Summary
I feel like I've done about a hundred of these color change app variations by now.
I completed this change background color project, this hex color changing background project, and this background color switcher project.
But, no matter how many I've done, I still found myself debugging this project.
I took the easy route to code this up.
I made a hard coded array with 7 colors and made a random number generator that generated the index for the array.
However, after a few minutes of staring and wondering why my code wasn't working, I opened up the debugger to find out that I was generating floating point numbers.
I forgot to parse my integer from the randomly generated number.
New Things Learned or Refreshed
Nothing new in this project.
I coded it pretty fast.
And I even coded the CSS by myself, using the new flex-box feature.
Time to Code
This project took me about 30 minutes to complete on my own, including the CSS and HTML files.
Your Turn!
What To Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
app.js
file. - 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 Color Changing App in action.
Leave a Reply