elias_bnr/can_sms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Elias Bennour
2023-11-11 19:57:35 +01:00
parent ca1343e223
commit 1bd463d7f3
13 changed files with 195 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
client/index.html Normal file
View File

@@ -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>

78
client/src/client.js Normal file
View File

@@ -0,0 +1,78 @@
// client.ts
document.addEventListener('DOMContentLoaded', function () {
// Event handler for Guess button
function guessNumber() {
const guessInput = document.getElementById('guessInput');
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}`, {
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');
const passwordValue = passwordInput.value;
// Hier sendest du die Anfrage an den Server
fetch('http://localhost:8080/cheat', {
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');
const maxInput = document.getElementById('maxInput');
const minValue = minInput.value;
const maxValue = maxInput.value;
// Hier sendest du die Anfrage an den Server
fetch('http://localhost:8080/reset', {
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) {
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);
});
//# sourceMappingURL=client.js.map

1
client/src/client.js.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"client.js","sourceRoot":"","sources":["client.ts"],"names":[],"mappings":"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"}

86
client/src/client.ts Normal file
View File

@@ -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);
});

9
client/style/styles.css Normal file
View File

@@ -0,0 +1,9 @@
#navbarcolor {
background: black;
}
#überschrift {
color: white;
text-align: left;
margin-left: 10px;
}