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();
 })();

07_js-debug/uebungen/u13_temp-converter/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -16,7 +16,7 @@
           <div class="row mb-3 align-items-center">
             <label for="celsius" class="col-md-3 col-form-label">Celsius:</label>
             <div class="col-sm-8">
-              <input type="text" id="celsius" name="celsius" class="form-control" required />
+              <input type="number" id="celsius" name="celsius" class="form-control" required />
             </div>
           </div>
         </div>