ShravanMeena · octosapien · Oct 20, 2022 · Oct 20, 2022 · Oct 20, 2022
diff --git a/Dont_Laugh_Challenge_GAME/README.md b/Dont_Laugh_Challenge_GAME/README.md
@@ -0,0 +1,14 @@
+This is a simple yet fun DON'T LAUGH CHALLENGE GAME .
+The website basically displays shuffled jokes and tests if you can hold your laughter .
+
+The website comprises an "index.html" page which has been designed using a separately created "styles.css" page .
+It uses an "app.js'(JavaScript file) to enable the requisite functionalities .
+
+
+A bit about me ...
+I am Sahil .
+I love to code .
+Ergo,I am aspiring to be become proficient at the use of modern Web Technologies .
+
+:)
+
diff --git a/Dont_Laugh_Challenge_GAME/app.js b/Dont_Laugh_Challenge_GAME/app.js
@@ -0,0 +1,16 @@
+let jokes=[
+    " I was wondering why the frisbee kept getting bigger and bigger, but then it hit me.","When life gives you melons, you might be dyslexic.","Don’t you hate it when someone answers their own questions? I do." , "The problem with kleptomaniacs is that they always take things literally."," I used to think I was indecisive. But now I’m not so sure."," I failed math so many times at school, I can’t even count.","A termite walks into the bar and asks, ‘Is the bar tender here?’","wo fish are in a tank. One says, ‘How do you drive this thing?’"
+];
+
+  let jokeText=document.getElementById("joke");
+  let clicks=0;
+
+  function updateJoke(){
+
+    clicks=clicks+1;
+    clicks=clicks%8;
+    //the array just cycles to give new jokes
+    jokeText.textContent=jokes[clicks];
+
+  }
+
diff --git a/Dont_Laugh_Challenge_GAME/index.html b/Dont_Laugh_Challenge_GAME/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Don't Laugh Challenge</title>
+  </head>
+  <body>
+    <div class="container">
+      <h3>DON'T Laugh Challenge</h3>
+      <div id="joke" class="joke">I failed math so many times at school, I can’t even count.</div>
+      <div id="btn1"><button id="jokeBtn" class="btn" onclick="updateJoke()">Get Another Joke</button></div>
+    </div>
+     <div id="icon2">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20%" height="20%" fill="currentColor" class="bi bi-emoji-laughing" viewBox="0 0 16 16">
+        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+        <path d="M12.331 9.5a1 1 0 0 1 0 1A4.998 4.998 0 0 1 8 13a4.998 4.998 0 0 1-4.33-2.5A1 1 0 0 1 4.535 9h6.93a1 1 0 0 1 .866.5zM7 6.5c0 .828-.448 0-1 0s-1 .828-1 0S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 0-1 0s-1 .828-1 0S9.448 5 10 5s1 .672 1 1.5z"/>
+      </svg>
+     </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/Dont_Laugh_Challenge_GAME/styles.css b/Dont_Laugh_Challenge_GAME/styles.css
@@ -0,0 +1,65 @@
+body{
+    background-color:#749F82;
+
+}
+
+
+h3{
+    font-weight:1000;
+    padding:20px 0 20px;
+    border-radius:10px;
+    color:#CFFF8D;
+    background-color:#425F57;
+    font-family:sans-serif ;
+    display:flex;
+    flex-direction:row;
+    justify-content:center;
+
+
+
+}
+
+
+
+#joke{
+    font-style:italic;
+    padding:2% 4% 4% 2%;
+    font-family:sans-serif;
+    border-radius:10px;
+    background-color:#A8E890;
+    width:70%;
+    height: 50px;
+
+    margin:0 auto;
+
+    display:flex;
+    flex-direction:row;
+    justify-content:center;
+}
+
+#btn1{
+    margin:10px auto;
+    display:flex;
+    flex-direction:row;
+    justify-content:center;
+}
+
+#jokeBtn{
+    font-weight:bold;
+    color:#CFFF8D;
+    background-color:#425F57;
+    display:flex;
+    flex-direction:row;
+    justify-content:center;
+    border-radius:10px;
+    padding:1%
+
+}
+#icon2 {
+    margin-top:50px;
+
+    display:flex;
+    flex-direction:row;
+    justify-content:center;
+
+}