57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
'use strict';
|
|
|
|
(() => {
|
|
// ===== DOM =====
|
|
const DOM = {
|
|
temperatureForm: document.querySelector('#temperatureForm'),
|
|
celsiusInput: document.querySelector('#celsius'),
|
|
result: document.querySelector('#result'),
|
|
};
|
|
|
|
// ===== INIT =====
|
|
const init = () => {
|
|
DOM.temperatureForm.addEventListener('submit', handleFormSubmit);
|
|
};
|
|
|
|
// ===== EVENT HANDLERS =====
|
|
function handleFormSubmit(e) {
|
|
const celsius = DOM.celsiusInput.value;
|
|
|
|
if (!isNaN(celsius)) {
|
|
alert('Please enter a valid number');
|
|
return;
|
|
}
|
|
|
|
const fahrenheit = convertToFahrenheit(celsius);
|
|
|
|
displayResult(fahrenheit);
|
|
|
|
DOM.temperatureForm.reset();
|
|
}
|
|
|
|
// ===== FUNCTIONS =====
|
|
function convertToFahrenheit(celsius) {
|
|
if (typeof celsius === 'string') return 0;
|
|
|
|
return (celsius * 9) / 5 + 32;
|
|
}
|
|
|
|
function displayResult(result) {
|
|
DOM.result.textContent = result.toFixed(2);
|
|
}
|
|
|
|
// ===== CALL INIT =====
|
|
init();
|
|
})();
|
|
|
|
// Übung 13: Temperatur Konverter
|
|
// Das Folgende ist ein Temperaturumrechner. Der Benutzer kann die Celcius-Temperatur eingeben und sie dann in Fahrenheit umrechnen. Du kannst die folgenden Dateien kopieren und sie in deinen eigenen Projektordner mit der folgenden Struktur einfügen (Codebeispiel 68):
|
|
|
|
// temperature-converter/
|
|
// ├── index.html
|
|
// └── main.js
|
|
|
|
// Deine Aufgabe ist es, die Anwendung zu reparieren. Schauen wir uns ein Beispiel an, wie die Anwendung funktionieren sollte: Der Benutzer gibt 100 in das Eingabefeld ein und klickt dann auf "Convert to Fahrenheit". Das Ergebnis unten sollte "212.00 °F" anzeigen.
|
|
|
|
// Verwende die Anweisung console.log, um die Anwendung zu debuggen.
|