Wir leben in einer spannenden Zeit, dank dem Internet haben wir innert Sekunden Zugriff auf das Wissen aus aller Welt. Früher war das nicht so, da musste ich Bücher lesen oder mich auf Reisende verlassen die mir Geschichte aus fernen Länder erzählt haben. Heute aber können wir innert Sekunden spannene Rezepte aus Amerika finden und dann beginnt das grosse Problem. Das amerikanische Imperium denkt es sei das einzige Land der Welt und hat darum viele Extrawürste eingeführt. Sie verwenden nicht nur kein Kilometer sondern auch beim Kochen verwenden sie kein Gramm sondern Cups als Masseinheit, auch die Temperatur ist nicht Celsius sondern Fahrenheit.
Ich kann diese Daten nicht im Kopf umrechnen – ich bin dazu zu blöd 🤣
Aus diesem Grund bauen wir heute so ein Umrechner mit dem man Cups in Gramm umrechnen kann, wie auch Fahrenheit in Celsius (und umgekehrt.
Also liebe Foodblogger oder andere Foodies – jetzt könnt ihr das auf eure Webseite einbauen und auch Rezepte aus den USA hier zeigen.
Video
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div id="converter">
<div class="gewicht">
<h2>Cups ↔ Gramm</h2>
<label for="ingredient">Zutat:</label>
<select id="ingredient" onchange="updateConversion()">
<option value="120">Mehl (1 Cup = 120g)</option>
<option value="200">Zucker (1 Cup = 200g)</option>
<option value="120">Puderzucker (1 Cup = 120g)</option>
<option value="190">Reis (1 Cup = 190g)</option>
<option value="240">Butter (1 Cup = 240g)</option>
<option value="249">Milch (1 Cup = 249)</option>
</select>
<label for="cups">Cups:</label>
<input type="number" id="cups" step="0.01" oninput="convertCupsToGrams()">
<label for="grams">Gramm:</label>
<input type="number" id="grams" step="1" oninput="convertGramsToCups()">
</div>
<div class="temperatur">
<h2>Fahrenheit ↔ Celsius</h2>
<label for="fahrenheit">Fahrenheit:</label>
<input type="number" id="fahrenheit" step="0.1" oninput="convertFahrenheitToCelsius()">
<label for="celsius">Celsius:</label>
<input type="number" id="celsius" step="0.1" oninput="convertCelsiusToFahrenheit()">
</div>
</div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | #converter-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#title-box {
margin-bottom: 20px;
text-align: center;
background-color: #000;
padding: 5px;
border-radius: 5px;
}
h1 {
color: #c8b6ff;
}
#converter {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.gewicht,
.temperatur {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
background-color: var(--box-bg);
border: 1px solid #000;
border-radius: 5px;
padding: 10px;
}
.gewicht label,
.gewicht input,
.temperatur label,
.temperatur input {
width: 100%;
}
input {
border: none;
height: 25px;
background-color: var(--box-bg);
border-bottom: #000 2px solid;
color: var(--schrift-farbe);
font-weight: bold;
font-size: 23px;
}
#ingredient {
background-color: var(--box-bg);
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
font-size: 16px;
color: #000;
cursor: pointer;
width: 100%;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
} |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | // Standardwert für die Umrechnung (Mehl = 120g)
let GRAMS_PER_CUP = 120;
// Funktion zum Aktualisieren der Umrechnung basierend auf der Dropdown-Auswahl
function updateConversion() {
const ingredientSelect = document.getElementById("ingredient");
GRAMS_PER_CUP = parseFloat(ingredientSelect.value);
convertCupsToGrams(); // Aktuelle Cups-Berechnung aktualisieren
}
// Cups in Gramm umrechnen
function convertCupsToGrams() {
const cups = parseFloat(document.getElementById("cups").value);
if (!isNaN(cups)) {
document.getElementById("grams").value = (cups * GRAMS_PER_CUP).toFixed(2);
}
}
// Gramm in Cups umrechnen
function convertGramsToCups() {
const grams = parseFloat(document.getElementById("grams").value);
if (!isNaN(grams)) {
document.getElementById("cups").value = (grams / GRAMS_PER_CUP).toFixed(2);
}
}
// Fahrenheit in Celsius umrechnen
function convertFahrenheitToCelsius() {
const fahrenheit = parseFloat(document.getElementById("fahrenheit").value);
if (!isNaN(fahrenheit)) {
document.getElementById("celsius").value = ((fahrenheit - 32) * 5 / 9).toFixed(2);
}
}
// Celsius in Fahrenheit umrechnen
function convertCelsiusToFahrenheit() {
const celsius = parseFloat(document.getElementById("celsius").value);
if (!isNaN(celsius)) {
document.getElementById("fahrenheit").value = ((celsius * 9 / 5) + 32).toFixed(2);
}
} |
Umrechner testen?
Ihr möchtet gerne den Umrechner testen, dann könnt ihr das hier unter dieser URL machen: https://www.ericmaechler.dev/umrechner-cups-zu-gramm-fahrenheit-zu-celsius/
0 Kommentare