This commit is contained in:
Philippe Torrel
@@ -28,6 +28,9 @@
|
||||
- [CSS Guide Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
||||
- [CSS Flexboxfroggy](https://flexboxfroggy.com/#de)
|
||||
- [CSS Gridgarden](https://cssgridgarden.com/#de)
|
||||
- [CSS3 color names](https://htmlcolorcodes.com/color-names/)
|
||||
- [CSS Gradient](https://cssgradient.io/)
|
||||
- [Animate.css](https://animate.style/)
|
||||
|
||||
## Software/ Tools
|
||||
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 15 17: Reichweite & Verbrauch</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<div class="alert alert-primary">
|
||||
<h1>Übung 15: Reichweite & Verbrauch</h1>
|
||||
<ol>
|
||||
<li>
|
||||
Schreiben Sie ein Programm zur Kraftstoffverbrauchsberechnung für Pkws. Der Benutzer soll die gefahrenen
|
||||
Kilometer (Strecke) und die verbrauchte Benzinmenge angeben. Das Programm ermittelt daraufhin den
|
||||
Kraftstoffverbrauch auf 100 km und gibt ihn aus.
|
||||
|
||||
<blockquote>
|
||||
<strong>Hinweis:</strong> Verwenden Sie folgende Formel:<br />
|
||||
<code>Verbrauch [l/100km] = Benzinmenge [l] / Strecke [km] × 100</code>
|
||||
</blockquote>
|
||||
</li>
|
||||
<li>
|
||||
Erweitern Sie das Programm derart, dass das Programm den Benutzer außerdem nach seiner Tankgröße fragt und
|
||||
ergänzend die maximale Reichweite in Kilometern berechnet.
|
||||
<blockquote>
|
||||
<strong>Hinweis:</strong> Verwenden Sie folgende Formel:<br />
|
||||
<code> Reichweite [km] = Tankgröße [l] × Strecke [km] / Benzinmenge [l] </code>
|
||||
</blockquote>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-primary">
|
||||
<h2>Übung 17: Reichweite & Verbrauch, Teil 2</h2>
|
||||
<p>Runde die Ausgaben von Übung 15 (Teil 1 der Übung) kaufmännisch (d. h. ab 0.5 aufrunden).</p>
|
||||
</div>
|
||||
|
||||
<form name="formula1" class="mb-3">
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label for="drivenKm" class="form-label">Gefahrene Strecke</label>
|
||||
<div class="input-group">
|
||||
<input type="number" min="0" name="drivenKm" id="drivenKm" class="form-control" />
|
||||
<span class="input-group-text">km</span>
|
||||
</div>
|
||||
<span class="form-text">Vorsicht, Ami-Falle!</span>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<label for="usedFuelAmount" class="form-label">Verbrauchte Benzinmenge</label>
|
||||
<div class="input-group">
|
||||
<input type="number" min="0" name="usedFuelAmount" id="usedFuelAmount" class="form-control" />
|
||||
<span class="input-group-text">Liter</span>
|
||||
</div>
|
||||
<span class="form-text">Keine Freedom-Unit!</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label for="fuelTankVolume" class="form-label">Größe Benzintank? </label>
|
||||
<div class="input-group">
|
||||
<input type="number" min="0" name="fuelTankVolume" id="fuelTankVolume" class="form-control" />
|
||||
<span class="input-group-text">Liter</span>
|
||||
</div>
|
||||
<span class="form-text">Keine Angst, wir machen keinen Schwanzvergleich!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mb-5 d-grid">
|
||||
<button type="submit" class="btn btn-lg btn-warning">Prove my manliness!</button>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-sm"
|
||||
disabled
|
||||
style="background-color: pink; border-color: pink; color: white">
|
||||
Aber ich bin eine Frau?
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-1">
|
||||
<small>Das ist ein Scherz und nicht ernst gemeint!</small>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="output-a alert alert-secondary"></div>
|
||||
<div class="output-b alert alert-secondary"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputAEl = document.querySelector('.output-a');
|
||||
const outputBEl = document.querySelector('.output-b');
|
||||
|
||||
const form = document.forms.formula1;
|
||||
|
||||
const numberFormatter = new Intl.NumberFormat('de-DE');
|
||||
const kmFormatter = new Intl.NumberFormat('de-DE', {
|
||||
style: 'unit',
|
||||
unit: 'kilometer',
|
||||
});
|
||||
// const litreFormatter = new Intl.NumberFormat('de-DE', {
|
||||
// style: 'unit',
|
||||
// unit: 'liter',
|
||||
// });
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
// e.preventDefault(); // Standardverhalten unterbinden
|
||||
|
||||
const drivenKm = form.drivenKm.value;
|
||||
const usedFuelAmount = form.usedFuelAmount.value;
|
||||
const fuelTankVolume = form.fuelTankVolume.value;
|
||||
|
||||
if (drivenKm === '' || usedFuelAmount === '' || fuelTankVolume === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
const fuelPer100Km = (usedFuelAmount / drivenKm) * 100;
|
||||
const maximumRange = (fuelTankVolume * drivenKm) / usedFuelAmount;
|
||||
|
||||
outputAEl.innerText = `Verbrauch: ${numberFormatter.format(fuelPer100Km)} l/km, max. Reichweite: ${kmFormatter.format(maximumRange)}`;
|
||||
outputBEl.innerText = `Verbrauch: ${numberFormatter.format(Math.round(fuelPer100Km))} l/km, max. Reichweite: ${kmFormatter.format(Math.round(maximumRange))}`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -6,6 +6,7 @@
|
||||
<title>Übung 15 17: Reichweite & Verbrauch</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
@@ -18,7 +19,8 @@
|
||||
Kraftstoffverbrauch auf 100 km und gibt ihn aus.
|
||||
|
||||
<blockquote>
|
||||
<strong>Hinweis:</strong> Verwenden Sie folgende Formel:<br />
|
||||
<strong>Hinweis:</strong> Verwenden Sie folgende Formel:
|
||||
|
||||
<code>Verbrauch [l/100km] = Benzinmenge [l] / Strecke [km] × 100</code>
|
||||
</blockquote>
|
||||
</li>
|
||||
@@ -26,7 +28,8 @@
|
||||
Erweitern Sie das Programm derart, dass das Programm den Benutzer außerdem nach seiner Tankgröße fragt und
|
||||
ergänzend die maximale Reichweite in Kilometern berechnet.
|
||||
<blockquote>
|
||||
<strong>Hinweis:</strong> Verwenden Sie folgende Formel:<br />
|
||||
<strong>Hinweis:</strong> Verwenden Sie folgende Formel:
|
||||
|
||||
<code> Reichweite [km] = Tankgröße [l] × Strecke [km] / Benzinmenge [l] </code>
|
||||
</blockquote>
|
||||
</li>
|
||||
@@ -45,6 +48,21 @@
|
||||
|
||||
const outputAEl = document.querySelector('.output-a');
|
||||
const outputBEl = document.querySelector('.output-b');
|
||||
|
||||
const distance = prompt('Geben Sie die gefahre Distanz in Kilometer ein');
|
||||
const gasolineAmount = prompt('Geben Sie die verbrauchte Benzinmenge in Litern ein');
|
||||
const tankCapacity = prompt('Geben Sie die Tankgröße in Litern ein');
|
||||
|
||||
// Verbrauch [l/100km] = Benzinmenge [l] / Strecke [km] × 100
|
||||
const consumption = (gasolineAmount / distance) * 100;
|
||||
// Reichweite [km] = Tankgröße [l] × Strecke [km] / Benzinmenge [l]
|
||||
const maximumRange = (tankCapacity * distance) / gasolineAmount;
|
||||
|
||||
console.log(consumption);
|
||||
console.log(maximumRange);
|
||||
|
||||
outputAEl.textContent = `Der Kraftstoffverbrauch auf 100 km: ${consumption.toFixed(1)}`;
|
||||
outputBEl.textContent = `Die maximale Reichweite in Kilometern: ${maximumRange.toFixed(1)}`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -22,6 +22,10 @@
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
const minutes = Math.floor(2000 / 60); // => 33 Minuten
|
||||
const seconds = 2000 % 60; // => 20 Restsekunden
|
||||
|
||||
outputEl.textContent = `${minutes}:${seconds} (mm:ss)`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lotto-number {
|
||||
.lotto-ball {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
@@ -49,7 +49,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="output alert alert-secondary my-3">
|
||||
<div class="lotto-ball"><span class="lotto-number">00</span></div>
|
||||
<div class="lotto-ball animate__animated animate__bounceIn"><span class="lotto-number">00</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -58,6 +58,12 @@
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
const lottoNumberEl = document.querySelector('.lotto-number');
|
||||
|
||||
const randomLottoNumber = Math.floor(Math.random() * 49) + 1;
|
||||
|
||||
console.log(randomLottoNumber);
|
||||
|
||||
lottoNumberEl.textContent = randomLottoNumber;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+4072
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Webseite mit HTML & CSS (SCSS)</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Webseite mit HTML & CSS (SCSS)</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user