Generate Random Emoji

Hi , welcome to new JavaScript practice project "Random Emoji" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file:

index.html

<!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</title> <link rel="stylesheet" href="style.css"> </head> <body> <h2 class="container"> </h2> <div class="section"> <button class="btn" id="btn">Click here</button> <p class="emoji-name" id="emoji-name">Emoji Name</p> </div> <script src="index.js"></script> </body> </html>

style.css:

body{ padding: 0; margin: 0; background: rgb(192, 113, 244); display: flex; flex-direction: column; justify-content: center; height: 100vh; align-items: center; font-family: cursive; } h2{ font-size: 2rem; color: aliceblue; } .section{ text-align: center; } .btn{ font-size: 4rem; border: none; background: rgb(255,255,255,.2); border-radius: 10px; padding: 15px; filter: grayscale(); transition: filter .2s ease-in-out; cursor: pointer; font-family: cursive; } .btn:hover{ filter: grayscale(0); } .emoji-name{ font-weight: 600; color: rgb(124, 16, 136); }

index.js:

const btnEl = document.getElementById("btn"); const emojiNameEl = document.getElementById("emoji-name"); const emoji = []; async function getEmoji() { let response = await fetch( "https://emoji-api.com/emojis?access_key=773b58f681fb786fafdb8392e8b8a75ddc177fd1" ); data = await response.json(); for (let i = 0; i < 1500; i++) { emoji.push({ emojiName: data[i].character, emojiCode: data[i].unicodeName, }); } } getEmoji(); btnEl.addEventListener("click", () => { const randomNum = Math.floor(Math.random() * emoji.length); btnEl.innerText = emoji[randomNum].emojiName; emojiNameEl.innerText = emoji[randomNum].emojiCode; }); const container = document.querySelector(".container"); let characterIndex = 0; const text = "Generate random emoji"; // logic to update text using updateText() function updateText(); function updateText() { characterIndex++; const animatedText = text.slice(0, characterIndex); container.innerHTML = `<h1>${animatedText}</h1>`; if (characterIndex === text.length) { characterIndex = 0; } setTimeout(updateText, 400); }

Here is the explaination:

Fetching Emojis:

It defines an empty array emoji to store the fetched emojis.
The getEmoji() function is an asynchronous function that fetches emojis using the Emoji API.
It makes a GET request to the specified API endpoint and retrieves the response data.
The response data is an array of emoji objects.
The function loops through the data and extracts the emoji's name and Unicode code, then adds them to the emoji array.
Generating and Displaying Random Emoji:

It selects the HTML elements with IDs btn and emoji-name.
It adds an event listener to the button with the btn ID, which triggers a function when the button is clicked.
When the button is clicked, a random number is generated within the range of the emoji array's length.
The button's inner text is updated with the selected emoji's name, and the emoji-name element's inner text is updated with the selected emoji's Unicode code.
Additionally, there is another part of the code that displays animated text saying "Generate random emoji" in the container element. The updateText() function increments the characterIndex and extracts a substring of the text based on the characterIndex value. The container's HTML is then updated with the animated text. The function is called recursively using setTimeout() to create the animation effect.

FINAL WORDS:
Thank you Don't forget to leave your feedback in the comment section. Follow front.end24 on instagram for more project ideas