Issue #815 done!

iamrahulmahato · Oct 9, 2024 · 6530131 · 6530131
1 parent 9595f7d
commit 6530131
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 5 deletions.
diff --git a/p1.png b/p1.png
diff --git a/projects/Wordle Game/index.html b/projects/Wordle Game/index.html
@@ -10,13 +10,67 @@
 </head>
 <body>
     <div class="container">
-        <h1>Wordle Game</h1>
+        <div class="top">
+            <div class="dropdown">
+                <button id="dropdownButton">?</button>
+                <div class="dropdown-content">
+                    <a>
+                        <ul class="list">
+                            <li>Each guess must be a valid five-letter word.</li>
+                            <li>The color of a tile will change to show you how close your guess was.</li>
+                            <li>If the tile turns green, the letter is in the word, and it is in the correct spot.</li>
+                            <li>If the tile turns yellow, the letter is in the word, but it is not in the correct spot.</li> 
+                            <li>If the tile turns red, the letter is not in the word.</li>
+                        </ul>
+                    </a>
+                </div>
+            </div>
+            <h1 class="name">Wordle Game</h1>
+        </div>
         <div id="board" class="board"></div>
         <input type="text" id="guessInput" maxlength="5" placeholder="Enter a 5-letter word" autofocus>
         <button id="submitGuess">Guess</button>
         <p id="message"></p>
         <button id="newGameButton" style="display: none;">New Game</button>
     </div>
+
+    <div class="keyboard">
+        <!-- First Row -->
+        <div class="row">
+          <button class="key">Q</button>
+          <button class="key">W</button>
+          <button class="key">E</button>
+          <button class="key">R</button>
+          <button class="key">T</button>
+          <button class="key">Y</button>
+          <button class="key">U</button>
+          <button class="key">I</button>
+          <button class="key">O</button>
+          <button class="key">P</button>
+        </div>
+        <!-- Second Row -->
+        <div class="row">
+          <button class="key">A</button>
+          <button class="key">S</button>
+          <button class="key">D</button>
+          <button class="key">F</button>
+          <button class="key">G</button>
+          <button class="key">H</button>
+          <button class="key">J</button>
+          <button class="key">K</button>
+          <button class="key">L</button>
+        </div>
+        <!-- Third Row -->
+        <div class="row">
+          <button class="key">Z</button>
+          <button class="key">X</button>
+          <button class="key">C</button>
+          <button class="key">V</button>
+          <button class="key">B</button>
+          <button class="key">N</button>
+          <button class="key">M</button>
+        </div>
+    </div>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/projects/Wordle Game/style.css b/projects/Wordle Game/style.css
@@ -13,6 +13,13 @@ body {
     height: 100vh;
 }
 
+.top{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
 .container {
     background-color: #ffffff; 
     padding: 20px;
@@ -24,8 +31,7 @@ body {
 }
 
 h1 {
-    font-size: 2rem;
-    margin-bottom: 20px;
+    font-size: 2rem; 
     color: #00796b; 
 }
 
@@ -79,7 +85,7 @@ input {
     width: 100%;
 }
 
-button {
+#submitGuess, #newGameButton, #dropdownButton {
     padding: 10px;
     font-size: 1rem;
     background-color: #00796b;
@@ -90,7 +96,7 @@ button {
     width: 100%;
 }
 
-button:hover {
+#submitGuess, #newGameButton, #dropdownButton:hover {
     background-color: #004d40; 
 }
 
@@ -119,3 +125,97 @@ button:hover {
         padding: 8px;
     }
 }
+
+
+/* General styling */
+body {
+    font-family: 'Arial', sans-serif; /* Change font style */
+}
+
+/* Style the dropdown button */
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+/* Button styling */
+.dropdown button {
+    background-color: #00796b; /* Green background */
+    color: white; /* White text */
+    padding: 10px 20px; /* Padding around the text */
+    font-size: 16px; /* Font size */
+    border: none; /* Remove border */
+    cursor: pointer; /* Pointer on hover */
+    outline: none; /* Remove the outline */
+    border-radius: 4px; /* Rounded corners */
+}
+
+/* Dropdown menu (hidden by default) */
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    border-radius: 10px;
+    padding: 10px;
+    min-width: 500px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    text-align: left;
+}
+
+/* Dropdown menu links */
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    font-size: 14px; /* Font size for the options */
+
+}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+    display: block;
+} 
+
+
+
+/*Keyboard*/
+/*body {
+    font-family: Arial, sans-serif;
+    background-color: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+  }*/
+
+  .keyboard {
+    display: inline-block;
+    padding: 10px;
+    background-color:#ffffff;
+    border-radius: 10px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+  }
+
+  .row {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10px;
+  }
+
+  .key {
+    background-color: #d6d6d6;
+    color: rgb(19, 19, 19);
+    border: none;
+    padding: 10px 15px;
+    margin: 4px;
+    border-radius: 5px;
+    font-size: 18px;
+    cursor: pointer;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+    transition: background-color 0.2s;
+  }
+
+