Moved css to own file, changed parameters to look like labels. Costumized output text.
All checks were successful
Release / publish (push) Successful in 57s

This commit is contained in:
Gian Breitenstein 2024-09-26 21:47:02 +02:00
parent 966a0bbf4a
commit 2f7d1a03cb
3 changed files with 45 additions and 31 deletions

View File

@ -1,27 +1,37 @@
const LOOSE_MESSAGE = "im sorry, but you lost"
const WIN_MESSAGE = "congrats, you win"
async function calcChanche() { async function calcChanche() {
const name = document.getElementById("name").value const name = document.getElementById("name").value
const chance = document.getElementById("Chance").value const chance = document.getElementById("Chance").value
const mult = document.getElementById("Multiplicator").value const mult = document.getElementById("Multiplicator").value
const url = "/random?chance="+chance+"&multiplicator="+mult+"&name="+name; const url = "/random?chance=" + chance + "&multiplicator=" + mult + "&name=" + name;
try { try {
const response = await fetch(url);
const content = await response.text()
document.getElementById("won").innerText=content const response = await fetch(url);
getWinners() const content = await response.text()
console.log(content);
if (content == "true") {
document.getElementById("won").innerText = WIN_MESSAGE
}
else {
document.getElementById("won").innerText = LOOSE_MESSAGE
}
getWinners()
} catch (error) { } catch (error) {
console.error(error.message); console.error(error.message);
} }
} }
async function getWinners() { async function getWinners() {
const url = "/winners" const url = "/winners"
try { try {
const response = await fetch(url); const response = await fetch(url);
const content = await response.text() const content = await response.text()
document.getElementById("winners").innerText=content document.getElementById("winners").innerText = content
} catch (error) { } catch (error) {
console.error(error.message); console.error(error.message);
} }
} }

View File

@ -6,29 +6,12 @@
<script type = "text/javascript" src="app.js"></script> <script type = "text/javascript" src="app.js"></script>
</head> </head>
<style> <link rel="stylesheet" href="style.css">
body {
background-color: rgba(131, 143, 197, 0.986);
}
.labelcontainer {
display: flex;
}
label {
display: block;
color: rgb(28, 17, 85);
min-width: 20rem;
font-size: 1.5rem;
}
input {
width: 10rem;
}
</style>
<body> <body>
<h1>Das ist die webseite von Gian</h1> <h1>Pokemon catcher</h1>
<p>This is a paragraph.</p>
<p id="won"></p>
<div class="labelcontainer"> <div class="labelcontainer">
<label>Chance</label> <label>Chance</label>
<input type="number" id="Chance" name="Chance" min="10"> <input type="number" id="Chance" name="Chance" min="10">
@ -46,7 +29,9 @@
<div> <div>
<input type="button" onclick="calcChanche()" value="Generate"> <input type="button" onclick="calcChanche()" value="Generate">
</div> </div>
<p id="won"></p>
<div> <div>
<label>winners</label>
<p id="winners"></p> <p id="winners"></p>
</div> </div>

19
static/style.css Normal file
View File

@ -0,0 +1,19 @@
body {
background-color: rgba(131, 143, 197, 0.986);
}
.labelcontainer {
display: flex;
}
label {
display: block;
color: rgb(28, 17, 85);
min-width: 20rem;
font-size: 1.5rem;
}
input {
width: 10rem;
}
p {
color: rgb(28, 17, 85);
font-size: 1.5rem;
}