Video Tutorial:
If you are interested to learn by watching a video tutorial instead of reading this blog post, you can check out the video down below. Also, subscribe to my YouTube channel where I post new tips tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called emoji maker. Inside this folder, we have three files. These files are index.html,style.css and script.js.
HTML:
We begin with the HTML code. 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>Emoji Maker</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="buttons-container">
<button id="color">Color</button>
<button id="eyes">Eyes</button>
<button id="eyebrows">Eyebrows</button>
<button id="mouth">Mouth</button>
</div>
<div class="emoji-container">
<div class="emoji">
<img src="eye-4.svg" class="eyes" />
<img src="eyebrow-3.svg" class="eyebrows" />
<img src="mouth-4.svg" class="mouth" />
</div>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style this app and position the elements using CSS. For this copy, the code provided to you below and paste it into your style sheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f4c531;
}
.container {
background-color: #ffffff;
height: 31.25em;
width: 25em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
border-radius: 0.8em;
box-shadow: 0 1.87em 4em rgba(86, 68, 9, 0.3);
}
.buttons-container {
height: 30%;
width: 100%;
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 1em;
}
.buttons-container button {
font-size: 0.9em;
gap: 0.5em;
padding: 0.8em 1em;
border-radius: 2em;
border: none;
background-color: #f4c531;
font-family: "Poppins", sans-serif;
cursor: pointer;
}
.emoji-container {
height: 70%;
width: 100%;
position: absolute;
top: 30%;
}
.emoji {
height: 14.37em;
width: 14.37em;
background-color: #ffd21f;
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.eyes,
.eyebrows,
.mouth {
position: absolute;
transform: translateX(-50%);
left: 50%;
}
.eyes {
top: 5em;
}
.eyebrows {
top: 3.12em;
}
.mouth {
top: 7.5em;
}
Javascript:
Finally, we add functionality and logic to this app using JavaScript. Once again copy the code below and paste it into your script file.
//Initial References
let emoji = document.querySelector(".emoji");
let colors = ["#4bff81", "#4bb4ff", "#ff702e", "#b88cff", "#ffd21f"];
let eyes = document.querySelector(".eyes");
let eyebrows = document.querySelector(".eyebrows");
let mouth = document.querySelector(".mouth");
let colorBtn = document.getElementById("color");
let eyesBtn = document.getElementById("eyes");
let eyebrowsBtn = document.getElementById("eyebrows");
let mouthBtn = document.getElementById("mouth");
//Setting up counters
let counter1 = 0;
let counter2 = 0;
let counter3 = 0;
let counter4 = 0;
//Setting up total counts for different images
let totalCounts = {
eyeCount: 5,
eyebrowsCount: 4,
mouthCount: 5,
};
//Adding event listener to each button
colorBtn.addEventListener("click", () => {
emoji.style.backgroundColor = colors[counter1];
counter1 = counter1 < colors.length - 1 ? counter1 + 1 : 0;
console.log(counter1);
});
eyesBtn.addEventListener("click", () => {
eyes.setAttribute("src", `eye-${counter2}.svg`);
counter2 = counter2 < totalCounts.eyeCount - 1 ? counter2 + 1 : 0;
});
eyebrowsBtn.addEventListener("click", () => {
eyebrows.setAttribute("src", `eyebrow-${counter3}.svg`);
counter3 = counter3 < totalCounts.eyebrowsCount - 1 ? counter3 + 1 : 0;
});
mouthBtn.addEventListener("click", () => {
mouth.setAttribute("src", `mouth-${counter4}.svg`);
counter4 = counter4 < totalCounts.mouthCount - 1 ? counter4 + 1 : 0;
});
That’s it for this tutorial. If you face any difficulties while creating this project, you can download the source code by clicking on the download code button below. Also, if you have any queries suggestions or feedback comment below.
Happy Coding!
