Hey, developers welcome to Day 48 of our 90Days 90Projects challenge. And in Day 48 we are going to create a Random Emoji Generator using JavaScript.
So to run this code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
HTML Code
<!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> Random Emoji Generator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h2>Random Emoji Generator</h2>
<span id="emoji-container"></span><br>
<button id="btn" class="btn">Generate</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(231, 140, 243);
}
.container {
max-width: 80%;
margin: 0 auto;
background-color: #fff;
padding: 3rem 5rem;
border-radius: 0.5rem;
text-align: center;
box-shadow: 0px 7px 29px 0px rgba(79, 58, 77, 0.5);
}
.container h2,
.container span,
.container .btn {
margin-bottom: 1rem;
font-family: sans-serif;
}
.container span {
text-align: center;
font-size: 150px;
}
.btn {
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
margin-top: 2rem;
padding: 9px 16px;
border-radius: 10px;
transition: all 0.2s;
background-color: #e65b00;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 5px 3px 12px #9170aa;
}
JavaScript
const emoji = ["😮", "😲", "😴", "🤤", "😪", "😵", "🤐", "🥴", "🤢", "🤮", "🤕", "🥳", "😷", "🤒", "🤕", "🤑", "🤠", "😈", "👿", "👹", "👺", "😿", "😾", "😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "💀", "👻", "👽", "🤖", "💩", "😺", "😸", "😹", "😻", "😼", "🤭", "🤫", "🤥", "😶", "😐", "😑", "😬", "🙄", "😯", "😦", "😧"]
const generateBtn = document.getElementById('btn');
document.getElementById("emoji-container").textContent = emoji[0];
generateBtn.addEventListener('click', function () {
let output = emoji[Math.floor(Math.random() * emoji.length)];
document.getElementById("emoji-container").textContent = output;
})
