10 Small JavaScript Apps

Part 3 — Color Changer

Photo by Robert Katzki on Unsplash

In this post I will not focus on the HTML or CSS but rather just the JS. there are many ways to style and set this up but its the JS I want to focus in on today.

With that being said let’s take a look at our setup.

I’ve got some simple HTML…

and a lot of CSS that I won’t get into. I have given the button an ID so that we can access it with our JS and that pretty much all we need to care about for this.

There are two parts to this, a simple color changer which will cycle through just a few preset colors and then there is a hex color changer which will randomly select any possible color.

So, simple first, this is what we have…

and when we click we will get one of four colors set up in an array at the top of the js file.

ok so the first thing we want to do is grab the button and assign it to a variable…

const btn = document.getElementById("btn");

We also want the color description to show up where it says background color:

const color = document.querySelector(".color");

that is grabbing this from the HTML.

so now we can change what’s in the span too.

Now that we have the button we can add an event listener to it…

so when we click the button, our function will happen. Let’s write out our function then.

When we click we want to select one of the colors in our array of which there are 4 so from number 0–3 0 being the first color in the array.

so this first line we will come back to but the rest here you can see document.body etc will change our background to one of those colors and color.textContent will change the background color description.

Now the getRandomNumber function will handle the math so let’s look at that.

Math.random helps get a random number between 0–3 but the problem is it will pick 0.12346745 or 1.3245245 and that doesn’t help us pick from our array, we need a single number without a decimal so we add math.floor to the start to ensure that the random number always rounds down to the nearest, no matter what so now we are randomly choosing between 0,1,2 and 3 which will now change our background color upon clicking the button…

Completely random everytime, and that’s our simple color changer. now to get the Hex and completely random color selector we will need to write some very similar code with only a few changes.

I have another HTML page setup to handle this…

all pretty much the same only we will use the hex.js instead of app.js

and in our hex.js we have a new array at the top…

const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];

and we will grab our button and color again…

and we add our event listener the same too…

so looking at our hex array we can see we have numbers 0–9 and letters a-f hex colors usually look like this #f1f5f8. they all start with a hashtag and then followed by six letters and numbers. So we need a variable that will ensure we have the # first…

Now we need a loop that runs six times and gives us either a letter or a number each time.

for(let i = 0;i<6;i++)

so this says run the loop 6 times and increment by 1 each time.

so in our loop i will hard code a number just to show it working and we need to add in our color.TextContent and document.body etc in there too so we can see the change.

so when we click we will get # plus six 0’s which will change the background color to black.

Cool! Now we need to randomise this.

we will use our same function from before…

and change it to hex.length to access our hex array.

then invoke our function

so that when we click we get a random number every time.

Go ahead and play with it!!

And that’s it! the simple way is great for if you only want a few options of colors but the hex example could be useful if you need a color selector that can pick absolutely any color and may assist you in picking colors for a project. As always,

Thanks for reading!