2026-08-18 14:27:34 +02:00
parent c7d26e1cd9
commit c6d9611e81
35 changed files with 1852 additions and 130 deletions
--- a/06_js-debug/uebungen/u13_temp-converter/assets/js/main.js
+++ b/06_js-debug/uebungen/u13_temp-converter/assets/js/main.js
@@ -0,0 +1,17 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const DOM = {};
+
+  // === INIT =============
+  const init = () => {};
+
+  // === EVENTHANDLER =====
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+
+  init();
+})();
--- a/06_js-debug/uebungen/u13_temp-converter/assets/js/preset.js
+++ b/06_js-debug/uebungen/u13_temp-converter/assets/js/preset.js
@@ -0,0 +1,45 @@
+'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();
+})();
--- a/06_js-debug/uebungen/u13_temp-converter/index.html
+++ b/06_js-debug/uebungen/u13_temp-converter/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Temperature Converter</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <div class="container py-5">
+      <h1>Temperature Converter</h1>
+
+      <form id="temperatureForm" class="mt-4">
+        <div class="col col-12 col-sm-10 col-lg-6">
+          <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 />
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-4 w-100">
+          <button type="submit" id="convertBtn" class="btn btn-primary">Convert to Fahrenheit</button>
+        </div>
+      </form>
+
+      <div class="alert alert-light mt-4"><strong>Result</strong>: <span id="result"></span> °F</div>
+    </div>
+  </body>
+</html>