Du kannst nicht mehr als 25 Themen auswählen
Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
58 Zeilen
2.3 KiB
HTML
58 Zeilen
2.3 KiB
HTML
vor 3 Jahren
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Income client</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<p>Please share your income for comparison!!</p>
|
||
|
|
<table id="all-incomes"><tr><td>Placeholder</td></tr></table>
|
||
|
|
Average: <input id="avg" readonly>
|
||
|
|
<br><br><br>
|
||
|
|
<div>
|
||
|
|
Description: <input id="description" value=""><br>
|
||
|
|
Amount: <input id="amount" value=""><br>
|
||
|
|
<button onclick="add_income()">Add Income</button>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
function all_incomes() {
|
||
|
|
const xhttp = new XMLHttpRequest();
|
||
|
|
document.getElementById("all-incomes").innerHTML = "<tr><th>Description</th><th>Amount</th></tr>";
|
||
|
|
xhttp.onload = function() {
|
||
|
|
for (let job of JSON.parse(this.responseText)) {
|
||
|
|
if (job === null) {
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
document.getElementById("all-incomes").innerHTML += `<tr><td>${job["description"]}</td><td>${job["amount"]}</td></tr>`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
xhttp.open("GET", "/incomes", true);
|
||
|
|
xhttp.send();
|
||
|
|
const xhttp2 = new XMLHttpRequest();
|
||
|
|
xhttp2.onload = function() {
|
||
|
|
document.getElementById("avg").value = this.responseText;
|
||
|
|
}
|
||
|
|
xhttp2.open("GET", "/incomes/average", true);
|
||
|
|
xhttp2.send();
|
||
|
|
}
|
||
|
|
|
||
|
|
function add_income() {
|
||
|
|
const xhttp3 = new XMLHttpRequest();
|
||
|
|
xhttp3.onload = function() {
|
||
|
|
all_incomes();
|
||
|
|
document.getElementById("description").value = "";
|
||
|
|
document.getElementById("amount").value = "";
|
||
|
|
}
|
||
|
|
xhttp3.open("POST", "/income", true);
|
||
|
|
let job = {
|
||
|
|
description: `${document.getElementById("description").value}`,
|
||
|
|
amount: `${document.getElementById("amount").value}`
|
||
|
|
}
|
||
|
|
xhttp3.setRequestHeader("x-api-key", "secretp4ssw0rd");
|
||
|
|
xhttp3.setRequestHeader("Content-type", "application/json");
|
||
|
|
xhttp3.send(JSON.stringify(job));
|
||
|
|
}
|
||
|
|
|
||
|
|
all_incomes();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|