JavaScript Tutorial: Build a Custom Color Palette App [Part Two]

Now that our HTML and CSS are in place, the next step is to create the JavaScript file that will make the project work as it should. All what we have done so far is just to create the basic structure and styling of a web page, in order to change the color and display its values, we need JavaScript. Before we dive in, first let me discuss why this project works and the principles behind it.

Do you remember this line of code from the previous article?

<input type = “color” name = “” id = “select1”>

If you do great, if not you can go back to the previous article to check it out. The code above is what is used to create a color picker, but without the JavaScript code, all you can do with the color picker is just to select a color and nothing much happens. The page is not changed in any significant way you can see and this is okay because we will fix that soon.

To fix that, you need to know what DOM manipulation is. If you are new to JavaScript, chances are that you have heard about this and you are probably wondering what it all means. First of all, the DOM stands for Document Object Model. As a beginner reading this article, focus more on the words Document and Model. The Document is simply the HTML file we have created plus its styling, the Model is the structure of that file. Hence, DOM manipulation can simply be defined as the method of manipulating HTML pages with JavaScript!

So if we want to make the color of any element to change in our HTML file, we need to manipulate the DOM to cause that change, and we can only do this with JavaScript.

Another principle that makes this project work is what is called Event Listeners, I won’t stress you with complex definitions, from its name an Event Listener is a piece of code that listens for certain events on HTML elements and responds in a way the programmer has defined. In our case we use an event listener to check if the color picker’s value has changed, if it has changed, then we can write a code that gives the browser an instruction to do what we want. Because we are building a custom color palette, our code will change the color of a div and display its hexadecimal value, in order words, our code is manipulating the DOM.

So, to recap: • We need JavaScript to manipulate the DOM. • We use Event Listeners to check for events and manipulate the DOM based on such events.

Now lets start coding. First we create a new JavaScript file, I named mine palette.js, you can name yours whatever you want. Link the file in your HTML using the following code:

<script src= “palette.js”></script>

Make sure the above code is within the body tag and at the bottom. Then I start by selecting the HTML elements I want to manipulate. There are several ways to do this, but I will be using the:

document.getElementById()

method.

If you recall from the previous article, almost all the HTML elements have an Id e.g.:

<input type = “color” name = “” id = “select1”>

As you can see, this particular color picker has an Id of "select1" which differentiates it from the other color pickers in our HTML file, so to get this HTML element by its Id, we simply say:

document.getElementById(“select1”)

To get the first color box we simply say:

document.getElementById(“color1”)

and to get the text displayed in the first box, we say:

document.getElementById(“txt-1”)

To keep our code organized, it is advisable to store the elements we have gotten in variables, for example, the first color picker can be stored in a variable called firstColor like this:

let firstColor = document.getElementById(“select1”)

Overall, our first three lines of code should be something like this:

let firstColor = document.getElementById("select1")
let firstDivColor = document.getElementById("color1") 
let firstColorText = document.getElementById("txt-1")

Remember, we have four color pickers, four color boxes and each of them have text within them, so you have to follow this format four times, all you need to do is change the variable names and the Ids.

After doing this, it is time to add the Event Listeners. Can you guess which elements we are adding Event Listeners too? If you guessed the color pickers, then you are correct. We want to listen for a change event on the color pickers i.e. we want to monitor each time a user picks a new color. To do this we simply use the:

addEventListener()

method.

So, to add an event listener to the first color picker we say:

firstColor.addEventListener()

But that is not all, we also need to specify what event we are listening for, in our case we are listening for the change event, so our code becomes:

firstColor.addEventListener(“change”)

That is not all either! After specifying the event we are listening for, we also need to create a code block of what we want to happen after a change event has been detected and what better way to create code blocks than by declaring functions!

Our code then becomes:

firstColor.addEventListener(“change”, function(){})

From your knowledge of functions, you should know that within the curly brackets is where the body of the code should go.

Now that our event listener is in place, the first thing we want to happen after the user picks a new color is to change the color of the first box to the color the user picks. To do this we need to do two things:

• Change the default style color of the color box.
  • Set the default style color to the value of the color picker.

Remember, we have set the identity of the first color picker to be firstColor from the following code:

let firstColor = document.getElementById(“select1”)

Same way we set the identity of the first box to be firstDivColor, so to change the default color of firstDivColor, we use the following code:

firstDivColor.style.backgroundColor = // any color

Now to set the default color to what the user selected from the color picker, we say:

firstDivColor.style.backgroundColor = firstColor.value

firstColor is the identity of the first color picker, .value gets the value of whatever color is in the color picker. Now place the above code within the function of the event listener, and we have:

firstColor.addEventListener(“change”, function(){
     firstDivColor.style.backgroundColor = firstColor.value
})

The above code implies that anytime a user picks a new color, the first box’s color will be changed to the value the user selected from the first color picker.

Next, we want to show the user the value of the color they have selected, to do this we simply use the paragraph Id of the first color box and sets its value to the firstColor value like this:

firstColorText.textContent = firstColor.value

firstColorText is the identity of the paragraph we created in the first color box, .textContent as its name implies is used to set the text content of any HTML element. Equating it to the value of the firstColor will simply show the hexadecimal value of the color the user has selected.

Now place the code within the function of the event listener like this:

firstColor.addEventListener(“change”, function(){
     firstDivColor.style.backgroundColor = firstColor.value
     firstColorText.textContent = firstColor.value

})

This implies that anytime a user picks a new color, the color of the first color box will change as well as the hexadecimal code for that color.

Very Good!

Now repeat this code by adding event listeners to the other three color pickers following the above format e.g. the second event listener will be something like:

secondColor.addEventListener(“change”, function(){
     secondDivColor.style.backgroundColor = secondColor.value
     secondColorText.textContent = secondColor.value

})

After adding all four event listeners congratulations, we are almost done.

Remember, we created four copy buttons to copy the value of the color of each color box. What we want to happen is that anytime the user clicks any of the Copy buttons the corresponding color should be copied to the clipboard. To do this, we make use of event listeners once again but this time instead of the change event, we use the click event. Also we get the Id of each button and store it in a variable just like we did for the color pickers, therefore our code for the first button goes like this:

let buttonOne = document.getElementById(“btn-1”)

Then we add an event listener to buttonOne like this:

buttonOne.addEventListener(“click”, function(){

})

We want the button to copy the color displayed in the first color box which is also the same as:

firstColor.value

So we use:

navigator.clipboard.writeText(firstColor.value)

Place this code within the function of the button event listener and we have:

buttonOne.addEventListener(“click”, function(){
     navigator.clipboard.writeText(firstColor.value)

})

Finally, we want to alert the user that their color has been copied to the clipboard. So we use the alert()function like this:

alert(`Color: ${firstColor.value} has been copied to clipboard!`)

Place this code within the function of the button event listener and we have:

buttonOne.addEventListener(“click”, function(){
     navigator.clipboard.writeText(firstColor.value)
     alert(`Color: ${firstColor.value} has been copied to clipboard!`)

})

Use the same format for the remaining three buttons and you have a fully functioning color palette app.

You can use this app to generate color palettes and copy the generated color codes for use in your CSS or design work.

You can also add description text either in the form of headers or paragraphs to suit your taste.

Thanks for Reading!