dennis.heinrich/DurstRechner
1
0
Fork 0
mirror of https://github.com/cloudmaker97/DurstRechner.git synced 2025-12-05 23:48:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Grobes Design der Anwendung entwickelt

Browse source
This commit is contained in:
Dennis Heinrich 2025-04-05 00:55:00 +02:00
parent fe3f975eb2
commit cefdd8dc9e
5 changed files with 107 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.idea/DdevIntegration.xml Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="de.php_perfect.intellij.ddev.settings.DdevSettingsState">
<option name="ddevBinary" value="C:\Program Files\DDEV\ddev.exe" />
</component>
</project>

7
.idea/durst-rechner.iml
View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<module version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

102
index.html
View file

@ -1,86 +1,40 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#2196f3" />
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="theme-color" content="#2196f3"/>
<link rel="manifest" href="manifest.json">
<title>Produkt-Rechner</title>
<style>
body { font-family: sans-serif; margin: 2rem; }
.product { margin: 0.5rem 0; }
.product button { padding: 0.5rem 1rem; font-size: 1rem; }
#result { margin-top: 2rem; font-size: 1.5rem; }
.actions button { margin-right: 1rem; }
</style>
<link rel="stylesheet" href="stylesheet.css">
<title>Der Durstrechner</title>
</head>
<body>
<h1>Produkt-Rechner</h1>
<div id="products"></div>
<div id="result">Zwischensumme: €<span id="sum">0.00</span></div>
<div class="actions">
<button onclick="undo()">Rückgängig</button>
<button onclick="resetCalc()">Reset</button>
</div>
<header>
<h1><span class="emoji"></span> Der Durstrechner</h1>
<button>Einstellungen</button>
</header>
<div class="slot">
<aside class="calculator">
<div>
<script>
const defaultProducts = [
{ name: "Käse", value: 2.5 },
{ name: "Apfel", value: 1.0 },
{ name: "Milch", value: 1.8 }
];
</div>
</aside>
<main class="controls">
<div>
const savedProducts = JSON.parse(localStorage.getItem("products")) || defaultProducts;
const productContainer = document.getElementById("products");
const sumDisplay = document.getElementById("sum");
</div>
</main>
</div>
let history = [];
let total = 0;
function renderProducts() {
productContainer.innerHTML = "";
savedProducts.forEach((product, index) => {
const div = document.createElement("div");
div.className = "product";
div.innerHTML = `<button onclick="add(${product.value})">${product.name} (€${product.value.toFixed(2)})</button>`;
productContainer.appendChild(div);
});
}
function add(value) {
total += value;
history.push(value);
updateSum();
}
function undo() {
if (history.length > 0) {
total -= history.pop();
updateSum();
<script>
// Install the service worker for offline capabilities
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('service-worker.js')
.then(reg => console.log('Service Worker registered', reg))
.catch(err => console.error('SW registration failed', err));
});
}
}
function resetCalc() {
total = 0;
history = [];
updateSum();
}
function updateSum() {
sumDisplay.textContent = total.toFixed(2);
}
renderProducts();
</script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('service-worker.js')
.then(reg => console.log('Service Worker registered', reg))
.catch(err => console.error('SW registration failed', err));
});
}
</script>
</script>
</body>
</html>

1
service-worker.js
View file

@ -4,6 +4,7 @@ const FILES_TO_CACHE = [
'/index.html',
'/manifest.json',
'/service-worker.js',
'/stylesheet.css',
];
self.addEventListener('install', event => {

65
stylesheet.css Normal file
View file

@ -0,0 +1,65 @@
:root {
--header-background-color: #171717;
--header-text-color: white;
--header-button-background-color: #676767;
--header-button-color: #eaeaea;
--aside-background-color: #dfdfdf;
--aside-text-color: #000;
--box-padding: 1em;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
font-family: sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
background-color: var(--header-background-color);
color: var(--header-text-color);
padding: .5em;
}
header h1 {
margin: 0;
padding: 0;
transform: translateY(-.1em);
user-select: none;
font-size: 1.1em;
}
header button {
margin-left: auto;
background-color: var(--header-button-background-color);
color: var(--header-button-color);
}
header h1 > span.emoji {
padding-right: .4em;
}
header h1 > span.emoji:before {
content: "🍺";
}
.slot {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
aside.calculator {
display: flex;
flex: 1 0 0;
background-color: var(--aside-background-color);
height: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
main.controls {
display: flex;
flex: 4 0 0;
}
aside.calculator > div,
main.controls > div {
padding: var(--box-padding);
box-sizing: border-box;
}