Random Emoji Generator using HTML, CSS and JavaScript

How to Create a Random Emoji Generator using HTML, CSS and JavaScript

Hello ZainCoder Hub Programmers, 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.

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.

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.

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.

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.

 

 

 

 

See the Pen Untitled by kinza dogar (@kinza-dogar) on CodePen.