Hello Future Coders, Welcome to my blog. Today in this article I am going to teach you how to create a random emoji generator using html, css and javascript. This is going to be a Beginner JavaScript Project.
This project us going to be very simple. When user clicks on the generate button, we will generate a random emoji which will be displayed in the browser window.
As you know that our blog teaches coding using both video tutorials as well as an step by step article. So, below I have provided both video tutorial as well as the step by step article. And you can also download the source code of this project by clicking on the download button at the end of this article.
Random Emoji Generator | JavaScript Project | Video Tutorial
How to Create a Random Emoji Generator | HTML, CSS, JavaScript Project | Step by Step Tutorial
Create three files: index.html, styes.css, script.js. Make sure you link them together inside your html using link and script tag.
Step 1: Setting up the HTML
For the html, First add the boiler plate of the html and now we will create a container div. Inside that we will have our title, and placeholder to display the emoji generated and a generate button which triggers a javascript function getRandomEmoji() that generates a random emoji.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>1 Random Emoji Generator</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<h2>Random Emoji Generator</h2>
<p id="emoji-container"></p>
<button onclick="getRandomEmoji()">Generate</button>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Styling with CSS
Now its time to style, Below I have provided the css code which i used to style. Feel free to change the styling to whatever you like.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: aliceblue;
padding: 5rem 0;
}
.container {
max-width: 900px;
margin: 0 auto;
background-color: #fff;
padding: 3rem;
border-radius: 0.5rem;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
text-align: center;
}
.container h2,
.container p,
.container button {
margin-bottom: 1rem;
}
.container p {
font-size: 10rem;
}
.container button {
font-size: 1rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background-color: #000;
color: #fff;
cursor: pointer;
}
Step 3: Creating the JavaScript Function
First we create an array of all the possible emojis. Now inside our getRandomEmoji() function, using Math object we will first create a random number which is between 0 and the length of the array. Then using that randomly generated number, we will use it as an array index to get that emoji which is present at that index. Thats it.
const emojis = ["😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "🙃", "😉", "😊", "😇", "🥰", "😍", "🤩", "😘", "😗", "😚", "😙", "😋", "😛", "😝", "😜", "🤪", "🤨", "🧐", "🤓", "😎", "🤩", "🥳", "😏", "😒", "😞", "😔", "😟", "😕", "🙁", "☹️", "😣", "😖", "😫", "😩", "🥺", "😢", "😭", "😤", "😠", "😡", "🤬", "🤯", "😳", "🥵", "🥶", "😱", "😨", "😰", "😥", "😓", "🤗", "🤔", "🤭", "🤫", "🤥", "😶", "😐", "😑", "😬", "🙄", "😯", "😦", "😧", "😮", "😲", "😴", "🤤", "😪", "😵", "🤐", "🥴", "🤢", "🤮", "🤕", "🥳", "😷", "🤒", "🤕", "🤑", "🤠", "😈", "👿", "👹", "👺", "💀", "👻", "👽", "🤖", "💩", "😺", "😸", "😹", "😻", "😼", "😽", "🙀", "😿", "😾"]
function getRandomEmoji() {
let emoji = emojis[Math.floor(Math.random() * emojis.length)]
document.getElementById("emoji-container").textContent = emoji
}
getRandomEmoji()
So, Congratulations on completing this project. Feel free to watch the video tutorial to understand it better. Thank You, and will see you in the next project.
