JavaScript Color Change App

Hosted Project

Color Changing App

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

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
5. 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.

Need to see the video solution for this project?

Need to see the video solution for this project? Get Bluelime's JavaScript for Beginners: Create 27 Projects from Scratch Course Now!