Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 22, 2020 03:06 pm GMT

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"}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);}
Enter fullscreen mode Exit fullscreen mode

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;  }}
Enter fullscreen mode Exit fullscreen mode

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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To