Random Emojis

HuXn-WebDev · HuXn-WebDev · commit 675883cdbda5 · 2022-06-27T14:18:41.000-07:00
diff --git a/21. Random Emojies/app.js b/21. Random Emojies/app.js
@@ -0,0 +1,41 @@
+const btn = document.querySelector("#emoji");
+const emojis = [
+  "😆",
+  "😅",
+  "🤣",
+  "😂",
+  "😀",
+  "🤑",
+  "🤨",
+  "🙂",
+  "😊",
+  "😗",
+  "😛",
+  "😏",
+  "🤥",
+  "😴",
+  "🥺",
+  "😧",
+  "😇",
+  "😳",
+  "🙃",
+  "🥴",
+  "🧐",
+  "🤨",
+  "😒",
+  "🤔",
+  "🤭",
+  "🥰",
+  "🤐",
+  "👀",
+  "🤔",
+  "🤪",
+  "🥲",
+  "😃",
+  "😁",
+  "😬",
+];
+
+btn.addEventListener("mouseover", () => {
+  btn.innerHTML = emojis[Math.floor(Math.random() * emojis.length)];
+});
diff --git a/21. Random Emojies/index.html b/21. Random Emojies/index.html
@@ -0,0 +1,14 @@
+<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 Emojies</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div id="emoji">🤣</div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/21. Random Emojies/style.css b/21. Random Emojies/style.css
@@ -0,0 +1,21 @@
+body {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #ccc;
+}
+
+#emoji {
+  font-size: 10rem;
+  filter: grayscale(1);
+  transition-property: transfrom, filter;
+  transition-duration: 200ms;
+  cursor: pointer;
+}
+
+#emoji:hover {
+  transform: scale(1.3);
+  filter: grayscale(0);
+}
