PR #16: Random-Emoji-Generator

iamwatchdogs · web-flow · commit 668b9dc9e375 · 2023-10-31T06:43:22.000+05:30
Added random emoji generator made using HTML, CSS and Javascript Merge pull request #16 from urjabahad/main
diff --git a/EmojiGenerator/README.md b/EmojiGenerator/README.md
@@ -0,0 +1,7 @@
+This random emoji generator is made using HTML, CSS and Javascript.
+CSS styling and JS is included in the index.html file itself.
+Working Demonstration:
+
+
+https://github.com/urjabahad/Javascript-Projects/assets/127567639/c109278a-cc5d-4102-b767-6f4736ea1d25
+
diff --git a/EmojiGenerator/index.html b/EmojiGenerator/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Emoji Generator</title>
+</head>
+<body>
+    <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        body{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            flex-direction: column;
+            background-color: darkseagreen;
+        }
+        #emoji{
+            font-size: 15rem;
+            transition-duration: 200ms;
+            filter: grayscale(1);
+            cursor: pointer;
+        }
+        #emoji:hover{
+            filter: grayscale(0);
+        }
+    </style>
+    <div id="emoji">😃</div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/EmojiGenerator/script.js b/EmojiGenerator/script.js
@@ -0,0 +1,9 @@
+const btn=document.querySelector("#emoji");
+const emojis = [
+  "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇", "🙂", "🙃", "😉", "😌", "😍",
+  "🥰", "😘", "😗", "😙", "😚", "😋", "😛", "😝", "😜", "🤪", "🤨", "🧐", "🤓", "😎",  "🤩",
+  "🥳", "😏", "😒", "😞", "😔", "😟", "😕", "🙁", "☹️", "😣", "😖", "😫", "😩"
+];
+btn.addEventListener("mouseover",()=>{
+    btn.innerHTML=emojis[Math.floor(Math.random()*emojis.length)];
+})
