Random Emoji Generator using JavaScript

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

responsive accordion using javascript, javascript accordion, html accordion using javascript, accordion javascript

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;
})

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad