How To Make Emoji Generator

0
Emoji Generator

Hey friends, Welcome to CodeWithNepal today in this blog you’ll learn how to make an emoji generator with javascript. If you want to make your own emoji generator, there are a few things you’ll need to do. First, you’ll need to find a good emoji creator. There are a few different ones out there, but we are going to make our own Emoji Maker from scratch. In the earlier blog, I shared OpenCV C++ Program for Face Detection which I recommend you to watch this tutorial.

About Emoji Generator

Emoji are a fun way to communicate with friends and family. But did you know that you can create your own emoji? That’s right, with an emoji generator you can create custom emojis that look exactly like you or anyone else you know.

With an emoji generator, you can create an avatar that looks just like you. You can choose from a wide range of facial features, hairstyles, and clothes to create your perfect emoji. Once you’re happy with your creation, you can then use it in any chat app, or even on social media.

Creating your own emoji is a great way to stand out from the crowd, and it’s also a lot of fun. So why not give it a try today?

So, if you want a short demonstration of emoji generator then visit codepen.io for brief instructions.

You may like this blog:

How to Emoji Generator with HTML CSS AND JS.

Step 1

Initially you need to create three files HTML (.html) CSS (.css) JS (.js) . After creating these files, just paste the following codes into your VS IDE code sample create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<main>
  <div class="text-container">
    <h1>Emoji Generator Codewithnepal</h1>
    <p>Click the buttons to generate random emoji's 😜</p>
  </div>
  <div id="primary-container">
    <div id="red-button" class="colour-box red"></div>
    <div id="yellow-button"class="colour-box yellow"></div>
    <div id="blue-button" class="colour-box blue"></div>
  </div>
  <div id="secondary-container">
    <div class="lg-colour-box secondary"></div>
  </div>

  
</main>

Step 2

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

@import url('https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap');

:root {
  --red: #e53935;
  --yellow: #fdd835;
  --blue: #2196f3;
  --orange: #fb8c00;
  --green: #8bc34a;
  --purple: #7e57c2;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Lexend Deca', sans-serif;
}

main {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.text-container {
  text-align: center;
  margin-bottom: 5rem;
}

#primary-container {
  display: flex;
}

.colour-box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  margin: 0.5rem;
  cursor: pointer;
  box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.3);
  transition: 0.2s;
}

.colour-box.red {
  background: var(--red);
  box-shadow: 0px 10px 0px 0px rgba(150, 6, 6);
}

.colour-box.yellow {
  background: var(--yellow);
  box-shadow: 0px 10px 0px 0px rgba(179, 133, 66);
}

.colour-box.blue {
  background: var(--blue);
  box-shadow: 0px 10px 0px 0px rgba(0, 69, 122);
}

.lg-colour-box {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  margin-top: 3rem;
  border: solid 5px #bdbdbd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  text-shadow: 0px 0px 10px #FFF;
}

.colour-box.active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
  transform: translate(0, 10px);
}

Step 3

Third, create a JavaScript file with the name script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with a .js extension. We’ll store random word details as an object in this file.

const primaryContainer = document.querySelector('#primary-container');
const colorBoxes = document.querySelectorAll('.colour-box');
const redButton = document.querySelector('#red-button');
const yellowButton = document.querySelector('#yellow-button');
const blueButton = document.querySelector('#blue-button');
const lgColourBox = document.querySelector('.lg-colour-box');

let redSelected = false;
let yellowSelected = false;
let blueSelected = false;

const whiteArray = ['👻', '👀', '☁️', '🍚', '🥚', '🥛', '🏐', '🗯'];
const redArray = ['❤️', '👹', '💋', '💃', '🍎', '🌶', '🚘', '🌹'];
const yellowArray = ['🌝', '🐥', '🍋', '🧀', '🚜', '💛', '📒', '👂'];
const blueArray = ['👕', '🦋', '🐬', '💦', '🚙', '💎', '💙', '❄️'];
const orangeArray = ['🎃', '🦁', '🦀', '🍊', '🏀', '📙', '🧡', '🥕'];
const purpleArray = ['😈', '👾', '☂️', '🍆', '🍇', '🔮', '💜', '🕺'];
const greenArray = ['🤢', '🐸', '🦖', '🍀', '🍏', '🎾', '💚', '🥒'];

function toggleButton(button, selected) {
  button.addEventListener('click', () => {
    if(!selected) {
      button.classList.add('active');
      selected = true;
    } else {
      button.classList.remove('active');
      selected = false;
    }
    primaryActiveColour(redButton, '#e53935', redArray);
    primaryActiveColour(yellowButton, '#fdd835', yellowArray)
    primaryActiveColour(blueButton, '#2196f3', blueArray);
    secondaryActiveColour(redButton, yellowButton, '#fb8c00', orangeArray);
    secondaryActiveColour(redButton, blueButton, '#7e57c2', purpleArray);
    secondaryActiveColour(blueButton, yellowButton, '#8bc34a', greenArray);
    if(redButton.classList.contains('active') 
       && yellowButton.classList.contains('active')
       && blueButton.classList.contains('active')) {
         lgColourBox.style.background = '#6d4c41';
         lgColourBox.textContent = '💩';
     }
    if(!redButton.classList.contains('active') 
       && !yellowButton.classList.contains('active')
       && !blueButton.classList.contains('active')) {
         lgColourBox.style.background = '#FFF';
         shuffle(whiteArray)
         lgColourBox.textContent = whiteArray[0];
     }
  });
}

function primaryActiveColour(button, colour, array) {
  if(button.classList.contains('active')) {
    lgColourBox.style.background = colour;
    shuffle(array);
    lgColourBox.textContent = array[0];
  }
}

function secondaryActiveColour(button1, button2, colour, array) {
  if(button1.classList.contains('active') && button2.classList.contains('active')) {
    lgColourBox.style.background = colour;
    shuffle(array);
    lgColourBox.textContent = array[0];
  }
}

function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

shuffle(whiteArray)
lgColourBox.textContent = whiteArray[0];

toggleButton(redButton, redSelected);
toggleButton(yellowButton, yellowSelected);
toggleButton(blueButton, blueSelected);

That’s all, now you’ve successfully built an emoji generator by HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please free to comment down I will provide the source code files.

LEAVE A REPLY

Please enter your comment!
Please enter your name here