thinkswell · PBJI · Oct 9, 2023 · Oct 8, 2023
diff --git a/NumberGuessingGame/0kt1/README.md b/NumberGuessingGame/0kt1/README.md
@@ -0,0 +1,21 @@
+# Number Guessing Game
+
+Welcome to the Number Guessing Game project! This simple web-based game allows players to guess a number between 1 and 100 and receive feedback on their guesses. It features an attractive user interface and is built using HTML, CSS, and JavaScript with the help of Bootstrap for styling.
+
+## Screenshots
+
+![Screenshot 1](images/screenshot1.png)
+![Screenshot 2](images/screenshot2.png)
+![Screenshot 3](images/screenshot3.png)
+![Screenshot 4](images/screenshot4.png)
+
+## Features
+
+- **Number Input:** Players can enter their guesses using a number input field.
+
+- **Feedback:** The game provides feedback on each guess, letting players know if their guess was too high, too low, or correct.
+
+- **Attempts Card:** A card displays the number of guesses made and the guessed numbers to help players keep track of their attempts.
+
+
+
diff --git a/NumberGuessingGame/0kt1/images/Screenshot1.png b/NumberGuessingGame/0kt1/images/Screenshot1.png
diff --git a/NumberGuessingGame/0kt1/images/Screenshot2.png b/NumberGuessingGame/0kt1/images/Screenshot2.png
diff --git a/NumberGuessingGame/0kt1/images/Screenshot3.png b/NumberGuessingGame/0kt1/images/Screenshot3.png
diff --git a/NumberGuessingGame/0kt1/images/Screenshot4.png b/NumberGuessingGame/0kt1/images/Screenshot4.png
diff --git a/NumberGuessingGame/0kt1/images/image1.png b/NumberGuessingGame/0kt1/images/image1.png
diff --git a/NumberGuessingGame/0kt1/index.html b/NumberGuessingGame/0kt1/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Number Guessing Game</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="style.css"> 
+    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
+</head>
+<body>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-md-12 text-center">
+                <h1 class="mt-5">Number Guessing Game (1-100)</h1>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12 text-center">
+                <div class="container-bg mx-auto my-5">
+                    <p class="lead">Guess a number between 1 and 100:</p>
+                    <div class="form-group">
+                        <input type="number" id="guessInput" class="form-control" min="1" max="20">
+                    </div>
+                    <button id="submitGuess" class="btn btn-primary">Submit Guess</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="feedback-container">
+        <p id="feedback"></p>
+        <p id="hint"></p>
+    </div>
+    <div class="top-left">
+        <p class="mt-4">Attempts: <span id="guessCount">0</span></p>
+        <p>Guessed Numbers: <span id="guessedNumbers"></span></p>
+    </div>
+
+    <div class="image-container">
+        <img src="images/image1.png" alt="Image Description">
+    </div>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/NumberGuessingGame/0kt1/script.js b/NumberGuessingGame/0kt1/script.js
@@ -0,0 +1,42 @@
+$(document).ready(function () {
+
+    let guessCount = 0;
+    const guessedNumbers = [];
+
+
+    function updateGuessDisplay() {
+        $('#guessCount').text(guessCount);
+        $('#guessedNumbers').text(guessedNumbers.join(', '));
+    }
+
+
+    $('#submitGuess').click(function () {
+
+        const guess = parseInt($('#guessInput').val());
+
+        if (guess === randomNumber) {
+            $('#feedback').text('Congratulations! You guessed the correct number.');
+            $('#feedback').addClass('green-feedback'); 
+            $('#guessInput').prop('disabled', true); 
+            $('#submitGuess').prop('disabled', true); 
+        } else if (guess < randomNumber) {
+            document.getElementById("feedback").innerHTML = "Too low. Try again.";
+            document.getElementById("feedback").style.color = "red";
+        } else {
+            document.getElementById("feedback").innerHTML = "Too high. Try again.";
+            document.getElementById("feedback").style.color = "red";
+        }
+
+        guessedNumbers.push(guess);
+
+        guessCount++;
+        updateGuessDisplay();
+
+
+    });
+
+
+    const randomNumber = Math.floor(Math.random() * 100) + 1;
+
+
+});
diff --git a/NumberGuessingGame/0kt1/style.css b/NumberGuessingGame/0kt1/style.css
@@ -0,0 +1,104 @@
+body {
+    background-color: #000000;
+    font-family: Arial, sans-serif;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center; 
+    height: 100vh;
+    margin: 0;
+}
+
+h1 {
+    color: #f2e3e3;
+    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
+}
+
+
+.h1-padding {
+    padding: 20px; 
+}
+
+#feedback {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 
+}
+
+p{
+
+    color: #f2e3e3;
+    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
+
+}
+
+#feedback {
+    font-weight: bold;
+}
+
+button{
+    background-color: white;
+    color: #000;
+}
+
+.container-bg {
+    background-color: #09211d;
+    background-image: linear-gradient(to top left, rgb(0, 0, 0), rgb(30, 41, 163));
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    max-width: 400px; 
+    width: 100%; 
+}
+
+
+body, h1, h2, h3, h4, h5, h6 {
+    font-family: 'Poppins', sans-serif;
+}
+
+
+.top-left {
+    position: absolute;
+    top: 10px;
+    left: 10px; 
+    background-color: rgb(0, 247, 255);
+    background-image: linear-gradient(to top left, rgb(12, 75, 220), rgb(0, 215, 239)); 
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+
+}
+
+.top-left p {
+    color: #eee8e8; 
+    font-weight: 500;
+}
+
+
+.green-feedback {
+    color: green !important;
+}
+
+
+.feedback-container {
+    margin-bottom: 90px;
+    position: absolute;
+    bottom: 10px; 
+    left: 50%; 
+    transform: translateX(-50%); 
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 25px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
+}
+
+
+.image-container {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+
+}
+
+.image-container img {
+    width: 150px; 
+    height: auto; 
+}