mirror of
https://github.com/cloudmaker97/DurstRechner.git
synced 2025-12-06 07:58:39 +00:00
Grobes Design der Anwendung entwickelt
This commit is contained in:
parent
fe3f975eb2
commit
cefdd8dc9e
5 changed files with 107 additions and 74 deletions
6
.idea/DdevIntegration.xml
Normal file
6
.idea/DdevIntegration.xml
Normal 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>
|
||||||
|
|
@ -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>
|
||||||
82
index.html
82
index.html
|
|
@ -5,75 +5,29 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<meta name="theme-color" content="#2196f3"/>
|
<meta name="theme-color" content="#2196f3"/>
|
||||||
<link rel="manifest" href="manifest.json">
|
<link rel="manifest" href="manifest.json">
|
||||||
<title>Produkt-Rechner</title>
|
<link rel="stylesheet" href="stylesheet.css">
|
||||||
<style>
|
<title>Der Durstrechner</title>
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Produkt-Rechner</h1>
|
<header>
|
||||||
<div id="products"></div>
|
<h1><span class="emoji"></span> Der Durstrechner</h1>
|
||||||
<div id="result">Zwischensumme: €<span id="sum">0.00</span></div>
|
<button>Einstellungen</button>
|
||||||
<div class="actions">
|
</header>
|
||||||
<button onclick="undo()">Rückgängig</button>
|
<div class="slot">
|
||||||
<button onclick="resetCalc()">Reset</button>
|
<aside class="calculator">
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<main class="controls">
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const defaultProducts = [
|
// Install the service worker for offline capabilities
|
||||||
{ name: "Käse", value: 2.5 },
|
|
||||||
{ name: "Apfel", value: 1.0 },
|
|
||||||
{ name: "Milch", value: 1.8 }
|
|
||||||
];
|
|
||||||
|
|
||||||
const savedProducts = JSON.parse(localStorage.getItem("products")) || defaultProducts;
|
|
||||||
const productContainer = document.getElementById("products");
|
|
||||||
const sumDisplay = document.getElementById("sum");
|
|
||||||
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetCalc() {
|
|
||||||
total = 0;
|
|
||||||
history = [];
|
|
||||||
updateSum();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateSum() {
|
|
||||||
sumDisplay.textContent = total.toFixed(2);
|
|
||||||
}
|
|
||||||
|
|
||||||
renderProducts();
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
if ('serviceWorker' in navigator) {
|
if ('serviceWorker' in navigator) {
|
||||||
window.addEventListener('load', () => {
|
window.addEventListener('load', () => {
|
||||||
navigator.serviceWorker.register('service-worker.js')
|
navigator.serviceWorker.register('service-worker.js')
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ const FILES_TO_CACHE = [
|
||||||
'/index.html',
|
'/index.html',
|
||||||
'/manifest.json',
|
'/manifest.json',
|
||||||
'/service-worker.js',
|
'/service-worker.js',
|
||||||
|
'/stylesheet.css',
|
||||||
];
|
];
|
||||||
|
|
||||||
self.addEventListener('install', event => {
|
self.addEventListener('install', event => {
|
||||||
|
|
|
||||||
65
stylesheet.css
Normal file
65
stylesheet.css
Normal 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;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue