In this tutorial, we’ll create an interactive emoji customizer using HTML, CSS, and JavaScript. Users can change the emoji’s background color and facial features like eyes, eyebrows, and mouth by clicking on the provided buttons.
HTML Structure
Let’s start by defining the HTML structure. We have a container that houses the customization buttons and the emoji display.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Emoji Maker</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="custom-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 src="script.js"></script>
</body>
</html>Explanation:
<div class="container">: This is the main container that holds all the elements of our customizer.<div class="custom-container">: This container houses the customization buttons – Color, Eyes, Eyebrows, and Mouth.<div class="emoji-container">: This container holds the emoji display.<img src="eye-4.svg" class="eyes" />: This image tag displays the eyes of the emoji.<img src="eyebrow-3.svg" class="eyebrows" />: This image tag displays the eyebrows of the emoji.<img src="mouth-4.svg" class="mouth" />: This image tag displays the mouth of the emoji.
CSS Styling
Next, we’ll add some CSS to style our emoji customizer.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #1E1C27;
}
.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);
}
.custom-container {
height: 30%;
width: 100%;
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 1em;
}
.custom-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;
}Explanation:
*: Resets the default styling of all elements..container: Styles the main container that holds all elements..custom-container: Styles the container holding customization buttons..custom-container button: Styles the buttons for customization..emoji-container: Styles the container holding the emoji display..emoji: Styles the emoji display circle..eyes, .eyebrows, .mouth: Styles the facial features (eyes, eyebrows, mouth)..eyes, .eyebrows, .mouth: Positions the facial features inside the emoji circle.
JavaScript Logic
Finally, we’ll write the JavaScript code to make our customizer interactive.
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 colorButton = document.getElementById("color");
let eyeButton = document.getElementById("eyes");
let eyebrowsBtn = document.getElementById("eyebrows");
let mouthButton = document.getElementById("mouth");
let counter1 = 0, counter2 = 0, counter3 = 0, counter4 = 0;
let totalCounts = {
eyeCount: 5,
eyebrowsCount: 4,
mouthCount: 5,
};
colorButton.addEventListener("click", () => {
emoji.style.backgroundColor = colors[counter1];
counter1 = counter1 < colors.length - 1 ? counter1 + 1 : 0;
});
eyeButton.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;
});
mouthButton.addEventListener("click", () => {
mouth.setAttribute("src", `mouth-${counter4}.svg`);
counter4 = counter4 < totalCounts.mouthCount - 1 ? counter4 + 1 : 0;
});Explanation:
document.querySelector(".emoji"): Selects the emoji container.let colors = [...]: An array of colors for the emoji background.let eyes = document.querySelector(".eyes"): Selects the eyes of the emoji.let counter1 = 0, counter2 = 0, counter3 = 0, counter4 = 0: Counters to keep track of the current selection.let totalCounts = {...}: Object containing the total number of options for each feature.colorButton.addEventListener("click", () => {...}): Event listener to change the emoji background color.eyeButton.addEventListener("click", () => {...}): Event listener to change the eyes of the emoji.eyebrowsBtn.addEventListener("click", () => {...}): Event listener to change the eyebrows of the emoji.mouthButton.addEventListener("click", () => {...}): Event listener to change the mouth of the emoji.
That’s it! You’ve successfully created an interactive emoji customizer using HTML, CSS, and JavaScript. Feel free to modify and enhance this project further to suit your preferences or integrate additional features for a more engaging user experience!
Happy Coding!
