HomeJavascriptEmoji Maker | Javascript

Emoji Maker | Javascript

Hey everyone. Welcome to today’s tutorial. Interest tutorial we will learn how to create an emoji maker app. To build this app, we need HTML, CSS and JavaScript. This is an intermediate-level JavaScript project.
 
If you’re looking for more such projects to practice your JavaScript skills, you can check out this playlist here. This playlist contains more than 100 tutorials that will help you learn JavaScript. The difficulty level of this project varies from easy to quite complex. Hence this playlist is suitable for all kinds of JavaScript learners.
 
Now let us take a look at the project. The app comes with emojis and four buttons. With the help of these four buttons, we can customise the eyes, eyebrows, mouth, and colour of the emoji.
 
The images used in this project are provided along with the source code at the end of this post.

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!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

three × five =

Most Popular