07_js-debug/uebungen/u13_temp-converter/assets/js/main.js

@@ -1,17 +1,45 @@
 'use strict';
 
 (() => {
-  // === DOM & VARS =======
-  const DOM = {};
+  // ===== DOM =====
+  const DOM = {
+    temperatureForm: document.querySelector('#temperatureForm'),
+    celsiusInput: document.querySelector('#celsius'),
+    result: document.querySelector('#result'),
+  };
 
-  // === INIT =============
-  const init = () => {};
+  // ===== INIT =====
+  const init = () => {
+    DOM.temperatureForm.addEventListener('submit', handleFormSubmit);
+  };
 
-  // === EVENTHANDLER =====
+  // ===== EVENT HANDLERS =====
+  function handleFormSubmit(e) {
+    e.preventDefault();
+    const celsius = Number(DOM.celsiusInput.value);
 
-  // === XHR/FETCH ========
+    if (isNaN(celsius)) {
+      alert('Please enter a valid number');
+      return;
+    }
+    const fahrenheit = convertToFahrenheit(celsius);
 
-  // === FUNCTIONS ========
+    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();
 })();