Merge pull request #1 from vamshivk/master

Change UI
vamshivk · Oct 26, 2023 · 3c459f3 · 3c459f3
2 parents 8d8469c + 32dd57e
commit 3c459f3
Show file tree

Hide file tree

Showing 12 changed files with 689 additions and 15 deletions.
diff --git a/Bats.mp4 b/Bats.mp4
diff --git a/Levels.html b/Levels.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hangman</title>
+</head>
+
+<body style="background-color: black">
+
+    <div class="video-container">
+        <video autoplay loop muted>
+            <source src="Bats.mp4" type="video/mp4">
+        </video>
+    </div>
+    <section>
+        <button id="btn1" class="btn1" value="easy">Beginner</button>
+        <button id="btn2" class="btn2" value="medium">Intermediate</button>
+        <button id="btn3" class="btn3" value="hard">Expert</button>
+
+
+        <div class="container">
+            <h1 id="main2" style="color: beige">HANGMAN</h1>
+        </div>
+        <img class="hat" src="images/hat.png" width="100" height="80" alt="Hat">
+        <img id="broom" src="images/witch.png" alt="Broom">
+
+
+    </section>
+    <script >
+        var easybtn = document.getElementById("btn1");
+        var mediumbtn = document.getElementById("btn2");
+        var Hardbtn = document.getElementById("btn3");
+
+        var difficulty="";
+        var url ="";
+        easybtn.addEventListener('click', function(event){
+
+
+            difficulty = event.target.value.toLowerCase(); 
+
+           // url = `https://opentdb.com/api.php?amount=10&category=18&difficulty=${difficulty}&type=multiple`
+            url = `main.html?difficulty=${difficulty}`;
+
+            window.location.href = url;
+
+        })
+
+        mediumbtn.addEventListener('click',function(event){
+            difficulty = event.target.value.toLowerCase(); 
+           // url = `https://opentdb.com/api.php?amount=10&category=18&difficulty=${difficulty}&type=multiple`
+           url = `main.html?difficulty=${difficulty}`;
+
+            window.location.href = url;
+
+        })
+        Hardbtn.addEventListener('click',function(evebt){
+            difficulty = event.target.value.toLowerCase(); 
+           // url = `https://opentdb.com/api.php?amount=10&category=18&difficulty=${difficulty}&type=multiple`
+           url = `main.html?difficulty=${difficulty}`;
+
+            window.location.href = url;
+        })
+
+        console.log(url);
+
+        </script>     
+</body>
diff --git a/images/hat.png b/images/hat.png
diff --git a/images/pumpkin.png b/images/pumpkin.png
diff --git a/images/spider.jpg b/images/spider.jpg
diff --git a/images/witch.png b/images/witch.png
diff --git a/images/witchhat.png b/images/witchhat.png
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Hangman</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body class="background-image" style="background-color: black ">
+    <section class="onescreen">
+        <video id="pumpkin-video" src="Bats.mp4" autoplay muted loop></video>
+        <h1 id="main1">
+            <span style="color:beige;">H</span>
+            <span style="color:beige;">A</span>
+            <span style="color:beige;">N</span>
+            <span style="color:beige;">G</span>
+            <span style="color:beige;">M</span>
+            <span style="color:beige;">A</span>
+            <span style="color:beige;">N</span>
+
+        </h1>
+    </section>
+    <header style="color: beige">Hangman</header>
+
+    <a href="Levels.html">
+    <button class="btn">Play Game</button>
+    </a>
+    <div class="pumpkin"></div>
+    <div class="pumpkin"></div>
+    <div class="pumpkin"></div>
+
+</body>
+</html>  
+
+
diff --git a/main.html b/main.html
@@ -1,14 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hangman Game</title>
-    <link rel="stylesheet" href="style.css"> 
-
+    <title>Hangman</title>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        body {
+            background-image: linear-gradient(rgba(233, 142, 13, 0.8), rgba(255,255,255,0.5)), url('images/spider.jpg');
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+        }
+    </style>
 </head>
+
 <body>
-    <h1>Hangman Game</h1>
+    <h1 class="heading">&#x1F383; Hangman &#x1F383;</h1>
+    <img id="broom1" src="images/witch.png" alt="Broom">
     <div class="game-modal">
         <div class="content">
             <img src="#" alt="gif">
@@ -23,14 +36,15 @@ <h4>Game Over!</h4>
             </div>
         </div>
         <div class="question-container">
-            <div class="questions">   
+            <div class="questions">
                 <p id="question-input"></p>
             </div>
             <div id="optionContainer" class="option-container">
             </div>
-        </div>    
+        </div>
     </div>
     <script src="script2.js"></script>
     <script src="script.js"></script>
 </body>
+
 </html>
diff --git a/pumpkin.mp4 b/pumpkin.mp4
diff --git a/script.js b/script.js
@@ -35,9 +35,6 @@ fetch(`https://opentdb.com/api.php?amount=10&category=18&difficulty=${diff}&type
         console.error('Error fetching data: ', error);
     })
 
-
-
-
 // Function to fetch a new question
 async function fetchQuestion(index) {
     const storedJsonData = localStorage.getItem('jsonData');
@@ -80,7 +77,6 @@ function resetoptions() {
 // Initialize the game by showing the first question
 showQuestion(currentIndex);
 
-
 function verifyOption(correctAnswer, e) {
     var selectedOption = e.target;
 
@@ -115,13 +111,8 @@ function verifyOption(correctAnswer, e) {
             showQuestion(currentIndex++);
         }, 3000)
     }
-
-
-
 }
 
-
-
 const gameOver = (isVictory) => {
     // After game complete.. showing modal with relevant details
     console.log(isVictory)