Jokes site (#655)

New Project(have fetched an api for this project) ![image](https://github.com/user-attachments/assets/c2c11391-0ed4-4b39-8ef3-141de2d2e25f) *What Makes LaughLounge Special?* 1.Vibrant, Interactive Design From its animated background to the quirky icons, the website is built to keep you engaged. The layout is user-friendly, and every element is crafted to bring joy, from the cheerful design of buttons to the subtle animations in the background. 2.Random Joke Generator The heart of LaughLounge is its Random Joke Generator, a button that brings a new joke to life with every click. Whether you're into puns, one-liners, or witty humor, you’ll never know what hilarity awaits you next. 3.Custom Background Animation The site features an immersive and playful animated background, filled with bouncing emojis, colorful shapes, and surprise effects that complement the theme of laughter and fun. It’s more than a website—it’s a mood! 4.High-Quality Visuals With vibrant images and creative styling, LaughLounge isn’t just about the jokes; it’s about delivering them in a way that’s visually exciting. The homepage image alone sets the tone—a laughing emoji that captures the spirit of joy the site promises to bring. 5.Seamless Integration The website leverages a combination of JavaScript, CSS, and HTML to ensure a smooth, bug-free experience. Every button is intuitive, every animation fluid, and every joke delivered with a dash of creativity. 6.Room for Expansion LaughLounge has endless potential for future upgrades: user-submitted jokes, dark mode, themed jokes categories, a joke leaderboard, or even a joke-sharing feature to spread the laughter beyond the website.
dhairyagothi · Jan 25, 2025 · d108b4b · d108b4b
2 parents 6caf81d + 9eb81c7
commit d108b4b
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 0 deletions.
diff --git a/public/jokes_site/3-32410_clip-art-library-kids-free-for-download-laughing.png b/public/jokes_site/3-32410_clip-art-library-kids-free-for-download-laughing.png
diff --git a/public/jokes_site/index.html b/public/jokes_site/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="box">
+        <h1>LaughLounge</h1>
+    <div class="container" style="background-color: aliceblue;">
+        <h2>Kick back, relax, and let the laughs roll.</h2>
+        <img src="3-32410_clip-art-library-kids-free-for-download-laughing.png" title="Hahahaha" height="250px">
+        <br>
+        <br>
+        <!-- <p id="joke"></p> -->
+        <button class="btn" onclick="getjoke()">Get a Joke</button>
+    </div>
+    <div style="margin-bottom: 5px;"></div>
+    <div class="joke1">
+        <p id="joke"></p>
+    </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/public/jokes_site/script.js b/public/jokes_site/script.js
@@ -0,0 +1,12 @@
+function getjoke(){
+    fetch('https://official-joke-api.appspot.com/random_joke')
+    .then(response=>response.json())
+    .then(data=>{
+        console.log(`${data.setup}-${data.punchline}`);
+        document.getElementById('joke').innerHTML = `${data.setup}-${data.punchline}`;
+    })
+    .catch(error =>{
+        console.error('Error:', error);
+    });
+}
+
diff --git a/public/jokes_site/style.css b/public/jokes_site/style.css
@@ -0,0 +1,60 @@
+
+body{
+    text-align: center;
+
+    background: linear-gradient(90deg,#05c3fd,#ffff1c);
+    height: 100%;
+    width: 100%;
+}
+h1{
+    padding: 5px;
+}
+.container{
+    background-color: white;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 0 auto;
+    width: 40vh;
+    height: 60vh;
+    border-radius: 30px;
+    padding: 10px;
+
+}
+.container h2{
+    margin-top: 5px;
+}
+.joke1{
+    background-color: white;
+    border-radius: 30px;
+    width: 45vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 0 auto;
+    padding: 5px;
+    border: solid 2px black;
+}
+.btn{
+    padding: 4px;
+    border-radius:10px ;
+    background-color: black;
+    color: aliceblue;
+    font-weight: bold;
+}
+
+.box{
+    border-radius: 20px;
+    border: solid 2px black;
+    padding: 10px;
+    background-color: aliceblue;
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    margin: 20px auto;
+}