Hello everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create the ‘Color The Parrot’ Javascript Project. To build this app we need HTML, CSS and Javascript.
This is a beginner-friendly javascript project. If you are looking for more complex projects, you should check out this playlist here. This playlist from my youtube channel consists of about 95+ javascript projects. The projects included in this project are suitable for javascript beginners as well as javascript experts.
Let us take a look at how this project works. In this project, we provide the user with a CSS-created parrot art and a bunch of buttons. With the help of these buttons, the user can change the colour of the corresponding part of the parrot.
Video Tutorial:
If you are interested in learning by watching a video tutorial, rather than reading this blog post you can check out the video down below from my youtube channel. Also, subscribe to my youtube channel where I regularly post new and exciting tutorials.
Project Folder Structure:
Before we start coding let us create the project folder structure. We make a project folder called – “Color the parrot”. Within this folder, we have three files. The first file is index.html which is the HTML document. Next, we have the style.css file which is the stylesheet. Finally, we create script.js which is the script file.
HTML:
We begin with the HTML code. With HTML we create elements needed to create the structure and layout of our project. Now first copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color The Parrot</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="body-clr parrot">
<div class="tail-wing tail1"></div>
<div class="tail-wing tail2"></div>
<div class="body-clr wing">
<div class="wing-color1"></div>
<div class="wing-color2">
<div class="wing-color2-inner"></div>
</div>
</div>
<div class="eye-patch">
<div class="eye"></div>
</div>
<div class="beak-upper">
<div class="beak-lower"></div>
</div>
<div class="feather"></div>
<div class="leg"></div>
<div class="branch"></div>
</div>
</div>
<div class="controls">
<button id="body-btn">Body</button>
<button id="main-wing-btn">Wing</button>
<button id="sub-wing-btn">Wing Highlight</button>
<button id="upper-beak-btn">Upper Beak</button>
<button id="lower-beak-btn">Lower Beak</button>
<button id="claw-btn">Claw</button>
<button id="tail-wing-btn">Tail Wing</button>
<button id="head-wing-btn">Head Wing</button>
<button id="eye-patch-btn">Eye Patch</button>
<button id="eye-btn">Eye</button>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style this app using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #ffb64c;
}
.container {
width: 95vw;
font-size: 16px;
max-width: 53em;
background-color: #ffffff;
padding: 1.8em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: grid;
grid-template-columns: 1fr 2fr;
border-radius: 0.9em;
}
.wrapper {
min-height: 18.75em;
min-width: 18.75em;
z-index: 1;
position: relative;
border-radius: 0.9em 0.9em 0 0;
}
.controls {
padding: 1.8em 0.6em 0 0.6em;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 1.2em;
align-items: center;
border-left: 2px dashed #000000;
}
.controls button {
font-size: 1em;
height: 3em;
border-radius: 1.5em;
border: none;
background-color: #ffb64c;
font-family: "Poppins", sans-serif;
}
.parrot {
background-color: #f03800;
height: 9.3em;
width: 5em;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: -3.75em;
bottom: 0;
border-radius: 2.8em 0.9em;
}
.tail1 {
position: absolute;
height: 3.75em;
width: 1.75em;
background-color: #cd0000;
border-radius: 0 0 1.25em 0.3em;
bottom: -2.8em;
z-index: -1;
}
.tail2 {
position: absolute;
height: 3.75em;
width: 1.75em;
background-color: #cd0000;
border-radius: 0 0 3em 0;
bottom: -1.8em;
left: 1.5em;
z-index: -1;
}
.wing {
background-color: #f03800;
height: 6.8em;
width: 3.75em;
border-radius: 3.1em 0.6em;
position: absolute;
left: -0.9em;
top: 3.1em;
overflow: hidden;
z-index: 1;
}
.wing-color1 {
position: absolute;
content: "";
background-color: #0095ff;
height: 60%;
width: 100%;
bottom: 0;
}
.wing-color2 {
height: 0;
width: 0;
border-top: 1.87em solid #ffb64c;
border-left: 1.87em solid transparent;
border-right: 1.87em solid transparent;
position: absolute;
top: 2.7em;
margin: auto;
left: 0;
right: 0;
}
.wing-color2-inner {
position: absolute;
border-top: 1.56em solid #f03800;
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
right: -1.5em;
bottom: 1.2em;
}
.eye-patch {
height: 3.75em;
width: 70%;
background-color: #deecf1;
border-radius: 3.1em 1.25em 1.25em 3.1em;
position: absolute;
right: -1px;
top: 0;
z-index: 2;
}
.eye {
position: absolute;
height: 0.9em;
width: 0.9em;
background-color: #714c2f;
border-radius: 50%;
margin: auto;
left: 0;
right: 0;
bottom: 1.56em;
}
.beak-upper {
position: absolute;
height: 3.75em;
width: 3.75em;
background-color: #ffb64c;
z-index: -1;
right: -3em;
border-radius: 0 3.4em 0.3em 0;
}
.beak-lower {
position: absolute;
background-color: #ff9100;
height: 1.56em;
width: 1.56em;
left: 0.7em;
bottom: -1.56em;
border-radius: 0 0 1.56em 0;
}
.feather {
background-color: #cd0000;
height: 3.1em;
width: 6.25em;
border-radius: 0.6em 0 0 6.25em;
position: absolute;
z-index: -1;
left: -1.87em;
}
.leg {
background-color: #ff9100;
height: 2.1em;
width: 4.37em;
border-radius: 0 4.37em 0.6em 0.6em;
position: absolute;
z-index: -2;
bottom: 0;
left: 1.2em;
}
.branch {
background-color: #ffb64c;
height: 0.5em;
width: 13.12em;
position: absolute;
right: -3.4em;
bottom: -0.5em;
border-radius: 0.5em;
}
@media screen and (max-width: 750px) {
.container {
grid-template-columns: 1fr;
}
.controls {
border: none;
border-top: 2px dashed #000000;
}
.controls button {
font-size: 0.9em;
height: 3em;
}
}
Javascript:
Finally, we add functionality to this project using Javascript. Now copy the code below and paste it into your script file.
let bodyBtn = document.getElementById("body-btn");
let mainWingBtn = document.getElementById("main-wing-btn");
let subWingBtn = document.getElementById("sub-wing-btn");
let upperBeakBtn = document.getElementById("upper-beak-btn");
let lowerBeakBtn = document.getElementById("lower-beak-btn");
let clawBtn = document.getElementById("claw-btn");
let tailWingBtn = document.getElementById("tail-wing-btn");
let headWingBtn = document.getElementById("head-wing-btn");
let eyePatchBtn = document.getElementById("eye-patch-btn");
let eyeBtn = document.getElementById("eye-btn");
let colors = [
"#cd0000",
"#f03800",
"#ffb64c",
"#ff9100",
"#0095ff",
"#1fbf66",
"#ff4380",
"#deecf1",
"#714c2f",
"#7fe881",
"#f7006a",
];
let counter1 = 0;
let counter2 = 0;
let counter3 = 0;
let counter4 = 0;
let counter5 = 0;
let counter6 = 0;
let counter7 = 0;
let counter8 = 0;
let counter9 = 0;
let counter10 = 0;
function setCounterValue(counter) {
return counter < colors.length - 1 ? counter + 1 : 0;
}
bodyBtn.addEventListener("click", () => {
document.querySelectorAll(".body-clr").forEach((item) => {
item.style.backgroundColor = colors[counter1];
});
document.querySelector(".wing-color2-inner").style.borderTopColor =
colors[counter1];
counter1 = setCounterValue(counter1);
});
mainWingBtn.addEventListener("click", () => {
document.querySelector(".wing-color1").style.backgroundColor =
colors[counter2];
counter2 = setCounterValue(counter2);
});
subWingBtn.addEventListener("click", () => {
document.querySelector(".wing-color2").style.borderTopColor =
colors[counter3];
counter3 = setCounterValue(counter3);
});
upperBeakBtn.addEventListener("click", () => {
document.querySelector(".beak-upper").style.backgroundColor =
colors[counter4];
counter4 = setCounterValue(counter4);
});
lowerBeakBtn.addEventListener("click", () => {
document.querySelector(".beak-lower").style.backgroundColor =
colors[counter5];
counter5 = setCounterValue(counter5);
});
clawBtn.addEventListener("click", () => {
document.querySelector(".leg").style.backgroundColor = colors[counter6];
counter6 = setCounterValue(counter6);
});
tailWingBtn.addEventListener("click", () => {
document
.querySelectorAll(".tail-wing")
.forEach((item) => (item.style.backgroundColor = colors[counter7]));
counter7 = setCounterValue(counter7);
});
headWingBtn.addEventListener("click", () => {
document.querySelector(".feather").style.backgroundColor = colors[counter8];
counter8 = setCounterValue(counter8);
});
eyePatchBtn.addEventListener("click", () => {
document.querySelector(".eye-patch").style.backgroundColor = colors[counter9];
counter9 = setCounterValue(counter9);
});
eyeBtn.addEventListener("click", () => {
document.querySelector(".eye").style.backgroundColor = colors[counter10];
counter10 = setCounterValue(counter10);
});
That’s it for this tutorial. If you face any issues while creating this code, you can download the source code by clicking on the download button below.
Also, If you have any queries, suggestions, or feedback, comment below.
Happy Coding.
