Name: How To Make A Background Color Switcher Project Using JavaScript?
Rating: 2.2 (7303 reviews)
Author: olibhiaghosh

Introduction

For the last few months, I have been learning HTML, Tailwind CSS, and JavaScript.

So, I thought of building a project with these to improve my DOM manipulation concepts

In this article, I will be sharing how I made a Background Color Switcher Project

Let's dive into it !!

Prerequisites

The Tech Stack I used for building this project is :

HTML
Tailwind CSS
JavaScript (Specifically DOM Manipulation)

Project Overview

So, Let's see what is this project all about.

A Background Color Switcher

This project is a background color switcher in which there are multiple color options available (refer to the above image). Here if u click on any of the colors it will get applied to the background.

I did this using the basic concepts of DOM Manipulation in JavaScript.

Now let's start building the project together.

The project will be done in 3 steps :

Setting up HTML Structure
Styling it with Tailwind CSS
Adding functionalities using JavaScript

Now let's understand each of the steps in details.

Setting Up the HTML Structure

At first, we will be setting up the HTML Structure, and for that, we will be creating two <div>s, One containing the text "Select The Color You Want To Apply To The Background" and the other containing multiple color boxes.

In the second <div> we will create four other <div>s that are the color boxes with the respective color class as their ids.

Here's have a look at it

<body>
    <div>Select The Color You Want To Apply To The Background</div>
    <div> 
        <div></div> <!-- Extra div -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

You must be wondering why we have added the extra <div> under the second main <div> (check the above code)

We will be looking into this in the following sections.

So, that was all about creating the HTML structure.

Now let's add styles to this HTML Page using Tailwind CSS.

Styling with Tailwind CSS

Now we will add basic styling to our HTML Page

We will start with adding font style, font weight, and basic padding to the heading.

<div class="font-bold text-2xl text-center pt-20 pb-8 sm:pt-28 sm:text-3xl xl:text-4xl xl:pt-48">
Select The Color You Want To Apply To The Background</div>

Then we will add the required border, background color, width, and height to the color containers.

We will also add an id to all the color containers and in this example we have kept it the same as its color class

 <div class="flex flex-col space-y-5 justify-center items-center pb-10 md:flex-row md:space-x-8 xl:space-x-12">
        <div></div> <!-- Extra div -->
        <div class="border-black border-2 w-48 h-48 bg-red-600 button" id="bg-red-600"></div>
        <div class="border-black border-2 w-48 h-48 bg-blue-700 button" id="bg-blue-700"></div>
        <div class="border-black border-2 w-48 h-48 bg-yellow-500 button" id="bg-yellow-500"></div>
        <div class="border-black border-2 w-48 h-48 bg-white button" id="bg-white"></div>
    </div>

Now let's get into the use of the extra div (Check the above code)

We have used the extra div to align the color containers at the same level so that the space-y-5 or space-x-8 property works properly as this property is applied only in between the elements not at the starting.

Adding Functionality with JavaScript

We all know that functionality can be added to the project using a script tag (which contains the JS code) within the body tag.

Now let's add the required functionality step by step.

Firstly we will select the color containers using their class="button" and the body element on which the color is going to be added using query selectors.

 buttons = document.querySelectorAll(".button");
 body = document.querySelector("body");

We need to run a loop on the buttons thus fetching one color container at a time.

Now we will add an event listener on the selected color container that will specify its work upon clicking on it.

buttons.forEach(function(button){
        button.addEventListener("click" , function(e){
        //Code to be executed on clicking
        })

Now let's define the function(e) which contains the main code to be executed on clicking on the color container.

Inside the function, at first, we call a function named removebg

It will take the body element as the argument and will remove any existing bg-color class from the class list of the body element

We did it so that on clicking on a new color container new class can be added to the class list thus giving the body a new background color every time

We will be defining this removebg function further.

After calling the removebg function any existing bg-color class will get removed from the class list.

Then we will add the required color class (which is present in each element's id) in the body element's class list.

buttons.forEach(function(button){
        //console.log(button);
        button.addEventListener("click" , function(e){
            removebg(body); // remove bg color from target element
            body.classList.add(e.target.id);   //Add the required bg colour
        })

Now the last part that remains is to define the removebg function.

This function will accept the body element as a parameter which is stored in the variable sourceElement.

Next, we will define a variable sourceClasses that makes an array out of the classes present in the sourceElement.

After that, we will run a loop on the array sourceClasses selecting each class, checking whether the class name starts with "bg-" and if that matches then we will remove it.

 const removebg = (sourceElement) => {
       let sourceClasses = Array.from(sourceElement.classList);
       sourceClasses.forEach(function(className) {
            if (className.startsWith('bg-')) { // check if class has any background color class
                  body.classList.remove(className); // remove bg color from target element
            }
       });
}