An Interest In:
Web News this Week
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
Create a really nice Discord-like emoji switcher with these 3 simple steps
So, I use Discord every day. It is a nice piece of software that let's you connect and do more with people very.. no VEEEERY easily. So I'm talking to my friend and then I suddenly got the idea to create an emoji switcher like in Discord!
Step 1 Finding an emoji API
I started off by searching for an emoji API and by luck found this one.
So I made a key and started testing right away!
When I fetched data from it I got an array with lots and lots of emojis in them.
The object looked like this:
{ character: "" codePoint: "1F600" group: "smileys-emotion" slug: "grinning-face" subGroup: "face-smiling" unicodeName: "grinning face"}
Step 2 Creating a bolierplate HTML
So, this is really straightforward. You just create a basic HTML and hook it up with CSS and JS.
I went with these parameters:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Document</title> <link href="style.css" rel="stylesheet" type="text/css" /></head><body> <p class="picker"></p> <script src="script.js"></script> </body></html>
Step 3 Styling
I just added a hover effect on the .picker
defined some initial parameters for the body
tag and that's it! Easy!
body { margin: 0; padding: 0; overflow: hidden; align-items: center; justify-content: center; text-align: center;}.picker { font-size: 4rem; cursor: pointer; filter: grayscale(1); transition: all 250ms}.picker:hover { transform: scale(1.5); filter: grayscale(0);}
Step 3 The Logic
JavaScript will do all the logic in this project. Here's how it's done:
const accessKey = ""; // YOUR EMOJI-API ACCESS KEY GOES HEREconst picker = document.querySelector(".picker");async function getEmotes() { // Fetching the data from the api let req = await fetch(`https://emoji-api.com/emojis?access_key=${accessKey}`); // Getting the response let res = await req.json(); // Returning the response return res;}window.onload = async () => { // Fetching emotes with the function we defined earlier let emotes = await getEmotes() // Getting a random emote from the array let random = emotes[Math.round(2 * Math.random() * 10)] // Setting the text of the p tag to a random emoji picker.innerText = random.character; // Setting an event listener. When the mouse hovers we are basically doing the same thing but without fetching the data again picker.onmouseover = () => { let _random = emotes[Math.round(2 * Math.random() * 10)] picker.innerText = _random.character; }}
That's it! You have successfully built a Discord-like emoji switcher from scratch with vanilla JS, HTML and CSS! Great Job!
Original Link: https://dev.to/michaelgrigoryan25/create-a-really-nice-discord-like-emoji-switcher-with-these-3-simple-steps-426e
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To