edit

2023-11-11 20:02:27 +01:00
parent ca1343e223
commit 2e87a3fb0d
5 changed files with 14 additions and 16 deletions
--- a/client/index.html
+++ b/client/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Zahlen raten</title>
+    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
+    <link rel="stylesheet" href="style/styles.css">
+    <script src="src/client.js"></script>
+</head>
+<body>
+<nav>
+    <div id="navbarcolor">
+        <h5 id="überschrift">Zahlen raten</h5>
+    </div>
+</nav>
+
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-md-12 mb-3">
+            <div class="input-group">
+                <input type="text" id="guessInput" class="form-control" placeholder="Guess a number" aria-label="Input 1" aria-describedby="button-addon1">
+                <button class="btn btn-outline-secondary" type="button" id="button-addon1">Guess</button>
+            </div>
+        </div>
+
+        <div class="col-md-12 mb-3">
+            <div class="input-group">
+                <input type="password" id="passwordInput" class="form-control" placeholder="Password" aria-label="Input 2" aria-describedby="button-addon2">
+                <button class="btn btn-outline-secondary" type="button" id="button-addon2">Cheat</button>
+            </div>
+        </div>
+
+        <div class="col-md-6 mb-3">
+            <div class="input-group">
+                <input type="text" id="minInput" class="form-control" placeholder="Minimum Value" aria-label="Input 3" aria-describedby="button-addon3">
+            </div>
+        </div>
+
+        <div class="col-md-6 mb-3">
+            <div class="input-group">
+                <input type="text" id="maxInput" class="form-control" placeholder="Maximum Value" aria-label="Input 4" aria-describedby="button-addon4">
+                <button class="btn btn-outline-secondary" type="button" id="button-addon4">Reset</button>
+            </div>
+        </div>
+
+        <div class="col-md-12 mb-3">
+            <div id="result" class="alert alert-info" role="alert">
+                Serverantwort wird hier angezeigt.
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+</html>
--- a/client/src/client.ts
+++ b/client/src/client.ts
@@ -0,0 +1,86 @@
+// client.ts
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Event handler for Guess button
+    function guessNumber() {
+        const guessInput = document.getElementById('guessInput') as HTMLInputElement;
+        const guessValue = guessInput.value;
+
+        if (guessValue === '') {
+            displayResult('Please enter a valid number!');
+            return;
+        }
+
+        // Hier sendest du die Anfrage an den Server
+        fetch(`http://localhost:8080/guess/${guessValue}`, {  // Beachte die richtige Serveradresse
+            method: 'GET'
+        })
+            .then(response => response.json())
+            .then(data => {
+                console.log(data)
+                displayResult(data.answer);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+    }
+
+    // Event handler for Cheat button
+    function cheat() {
+        const passwordInput = document.getElementById('passwordInput') as HTMLInputElement;
+        const passwordValue = passwordInput.value;
+
+        // Hier sendest du die Anfrage an den Server
+        fetch('http://localhost:8080/cheat', {  // Beachte die richtige Serveradresse
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ password: passwordValue }),
+        })
+            .then(response => response.json())
+            .then(data => {
+                // Hier wird die Antwort des Servers in einem sichtbaren Bereich angezeigt
+                displayResult(data.message);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+    }
+
+    // Event handler for Reset button
+    function resetValues() {
+        const minInput = document.getElementById('minInput') as HTMLInputElement;
+        const maxInput = document.getElementById('maxInput') as HTMLInputElement;
+        const minValue = minInput.value;
+        const maxValue = maxInput.value;
+
+        // Hier sendest du die Anfrage an den Server
+        fetch('http://localhost:8080/reset', {  // Beachte die richtige Serveradresse
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ min: minValue, max: maxValue }),
+        })
+            .then(response => response.json())
+            .then(data => {
+                // Hier wird die Antwort des Servers in einem sichtbaren Bereich angezeigt
+                displayResult(data.message);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+    }
+
+    // Funktion zur Anzeige der Serverantwort
+    function displayResult(message: string) {
+        const resultElement = document.getElementById('result');
+        resultElement.innerText = message;
+    }
+
+    // Attach click event handlers to buttons
+    document.getElementById('button-addon1').addEventListener('click', guessNumber);
+    document.getElementById('button-addon2').addEventListener('click', cheat);
+    document.getElementById('button-addon4').addEventListener('click', resetValues);
+});
--- a/client/style/styles.css
+++ b/client/style/styles.css
@@ -0,0 +1,9 @@
+#navbarcolor {
+    background: black;
+}
+
+#überschrift {
+    color: white;
+    text-align: left;
+    margin-left: 10px;
+}