add random emoji project

sahandghavidel · sahandghavidel · commit 6fa003ed6777 · 2022-10-27T15:00:55.000+08:00
diff --git a/projects/random-emoji/index.html b/projects/random-emoji/index.html
@@ -0,0 +1,18 @@
+<!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" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Random Emoji</title>
+  </head>
+  <body>
+    <h2>Random Emoji</h2>
+    <div class="section">
+      <button id="emoji-btn" class="emoji-btn">Click</button>
+      <p id="emoji-name" class="emoji-name">Emoji Name</p>
+    </div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/projects/random-emoji/index.js b/projects/random-emoji/index.js
@@ -0,0 +1,27 @@
+const btnEl = document.getElementById("emoji-btn");
+const emojiNameEl = document.getElementById("emoji-name");
+
+const emojis = [];
+
+const emojiAddFunction = async () => {
+  let response = await fetch(
+    "https://emoji-api.com/emojis?access_key=c026368c7be293ca27c373a38b0d4361494d257d"
+  );
+  data = await response.json();
+  console.log(data);
+
+  for (let i = 0; i < 1500; i++) {
+    emojis.push({
+      name: data[i].unicodeName,
+      character: data[i].character,
+    });
+  }
+};
+
+emojiAddFunction();
+
+btnEl.addEventListener("click", () => {
+  const randomNum = Math.floor(Math.random() * emojis.length);
+  btnEl.innerText = emojis[randomNum].character;
+  emojiNameEl.innerText = emojis[randomNum].name;
+});
diff --git a/projects/random-emoji/style.css b/projects/random-emoji/style.css
@@ -0,0 +1,51 @@
+
+body {
+  font-family:'Courier New', Courier, monospace;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: salmon;
+}
+
+h2 {
+  position: absolute;
+  top: 0;
+  padding-top: 140px;
+  color: white;
+  font-size: 2rem;
+  text-align: center;
+}
+
+.section{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+
+.emoji-btn {
+  border: none;
+  font-size: 5rem;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 10px;
+  filter: grayscale();
+  padding: 15px;
+  transition: filter 0.2s ease-in-out;
+  cursor: pointer;
+}
+
+.emoji-btn:hover {
+  filter: grayscale(0);
+
+}
+
+.emoji-name {
+font-weight: 600;
+  color: darkblue;
+
+}
+
