Color switcher
In this tutorial, we'll dive into creating a fun and interactive color switcher project using the power of HTML, CSS, and JavaScript DOM.
Here i am going to expain each and everything step by step how made it. So you can follow along if you are beginner and if you want make your first project.
HTML code
<body>
<div class = "canvas">
<h1>Color scheme switcher</h1>
<span class = "button" id="grey"></span>
<span class = "button" id="white"></span>
<span class = "button" id="blue"></span>
<span class = "button" id="yellow"></span>
<span class = "button" id="red"></span>
<span class = "button" id="pink"></span>
<h3>
Try clicking on one of the colors above
<span>To change the background color of this page!</span>
</h3>
You can see above i wrote an HTML code that defines some span elements with class "button" and all these elements wrapped inside a div element in body section and div also contain a class name "canvas".
CSS code
*{
margin: 20px;
}
html{
margin:0px;
}
span{
display:block;
}
.canvas{
margin: 100px auto 100px;
width: 80%;
text-align: center;
}
.button{
height: 100px;
width: 100px;
border: solid black 2px;
display:inline-block;
border-radius: 7px;
box-shadow: -8px -4px 5px -6px rgba(46,40,46,0.59);
}
#grey{
background: grey;
}
#white{
background: white;
}
#blue{
background: blue;
}
#yellow{
background: yellow
}
#red{
background: red;
}
#pink{
background: pink
}
You can see above i designed some styles of HTML element such as height and width, Background, Button height and width.
You can choose your own height and width according to your preference and give the element color by your choice as well. I defined the color that i liked myself.
Javascript code
const buttons = document.querySelectorAll('.button')
const body = document.querySelector("body")
buttons.forEach(function(button){
button.addEventListener('click' ,function(e){
console.log(e)
console.log(e.target)
if(e.target.id === 'grey'){
body.style.backgroundColor = e.target.id;
const h1 = document.querySelector('h1');
const h2 = document.querySelector('h3');
h1.style.color = "white"
h2.style.color = "white"
}
if(e.target.id === 'white'){
body.style.backgroundColor = e.target.id;
const h1 = document.querySelector('h1');
const h2 = document.querySelector('h3');
h1.style.color = "red"
h2.style.color = "red"
}
if(e.target.id === 'blue'){
body.style.backgroundColor = e.target.id;
const h1 = document.querySelector('h1');
const h2 = document.querySelector('h3');
h1.style.color = "white"
h2.style.color = "white"
}
if(e.target.id === 'yellow'){
body.style.backgroundColor = e.target.id;
const h1 = document.querySelector('h1');
const h2 = document.querySelector('h3');
h1.style.color = "blue"
h2.style.color = "blue"
}
if(e.target.id === 'red'){
body.style.backgroundColor = e.target.id;
const h1 = document.querySelector('h1');
const h2 = document.querySelector('h3');
h1.style.color = "white"
h2.style.color = "white"
}
if(e.target.id === 'pink'){
body.style.backgroundColor = e.target.id;
const h1 = document.querySelector('h1');
const h2 = document.querySelector('h3');
h1.style.color = "black"
h2.style.color = "black"
}
})
})
Below i explained things step by step what's going on here.
Step: 1. Here i selected HTML class "button" using javascript DOM (Document Object Model) by querySelectorALL. and I also selected the body element by querySelector.
I wrapped up all things inside a function using forEach loop by selecting HTML buttons and just passed "button" as a parameter.
Then i use a "click" addEventListenener to perform the button when user click on it.
Inside the same function i defined a another function and passed 'e' as paramenter and then i used if loop to perform action proper way, Additionally you can choose a for loop or switch if you want.
Then i used e which are the parameter and target
if(e.target.id === 'grey').to verify the equality of 'color' as same as the id.Target ?🤔 - Target is a property of Javascript event object that refers to the element that triggers event.
Other things which i did you can see i selected the 'h1' and 'h3' element of HTML to change the color of text while performing different action same time to maintain the proper visibility of page text.
As you noticed, I applied same thing for each element to perform the action of each click for different buttons.
Tip: Mainly we don't focus on layout design or UI UX here so our primary goal to make our project proper working with backend. You want more then you should design how you like.
Here you can see live demo: Colorswitcher
Thank you so much for reading my article. If you have any queries? feel free to contact me.