From f4b514fc0ca4b0735844b95d061680252b5a975e Mon Sep 17 00:00:00 2001
From: BB <bazsi5fel2@gmail.com>
Date: Thu, 13 Apr 2023 12:18:48 +0200
Subject: [PATCH] =?UTF-8?q?K=C3=A9sz=20vagyok?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html |  6 +++---
 main.js    | 47 ++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 2a86400..5bb8aac 100644
--- a/index.html
+++ b/index.html
@@ -195,12 +195,12 @@
             <h2 class="text-center py-3">Átlagsebesség számítás</h2>
             <div class="row mx-0">
                 <div id="circuitimage" class=".d-none .d-md-block col-md-5">
-                    <!-- Pálya képét ide kell beilleszteni-->
+                    <img id="circuitimage-img">
                 </div>
                 <form class="col-md-5 offset-md-1">
                     <div class="form-group">
                         <label for="circuit">Pálya</label>
-                        <select class="form-control" id="circuit" onchange="">
+                        <select class="form-control" id="circuit" onchange="calculate()">
                             <option value=""></option>
                             <option value="HUN">Hungaroring</option>
                             <option value="MON">Monaco</option>
@@ -210,7 +210,7 @@
                     </div>
                     <div class="form-group">
                         <label for="laptime">1 kör ideje (másodpercben)</label>
-                        <input type="number" class="form-control" id="laptime" placeholder="pl.: 105.954" oninput="">
+                        <input type="number" class="form-control" id="laptime" placeholder="pl.: 105.954" oninput="calculate()">
                     </div>
 
                     <div class="form-group">
diff --git a/main.js b/main.js
index 7fac09f..95ce3a0 100644
--- a/main.js
+++ b/main.js
@@ -1,17 +1,50 @@
 $(document).ready(function () {
   $('.navbar-nav li').click(function (x) {
-    $('.navbar-nav li').removeClass('active');
-    $(event.target).parent().addClass('active');
-  });
-});
+    $('.navbar-nav li').removeClass('active')
+    $(event.target).parent().addClass('active')
+  })
+})
+
+const circuits = {
+  'HUN': {
+    img: 'hungaroring.jpg',
+    l: 4.381,
+  },
+  'MON': {
+    img: 'monaco.jpg',
+    l: 3.337,
+  },
+  'BEL': {
+    img: 'spa.jpg',
+    l: 7.004,
+  },
+  'ITA': {
+    img: 'monza.jpg',
+    l: 5.793,
+  },
+}
 
 function showCircuit() {
-    //A listából kiválasztott kép megjelenítése az id="circuitimage" div-ben
+  /** @type {HTMLImageElement} */
+  const img = document.getElementById('circuitimage-img')
+  /** @type {HTMLSelectElement} */
+  const circuit = document.getElementById('circuit')
+  img.src = './img/' + circuits[circuit.value].img
 }
 
 //---------------------------------------------------------
 
 function calculate() {
-  showCircuit();
-  //Ha van kiválasztott pálya és beírt köridő, akkor a pályának megfelelő átlagsebesség kiszámítása és megjelenítése az id="averagespeed" input mezőben
+  showCircuit()
+  /** @type {HTMLSelectElement} */
+  const circuit = document.getElementById('circuit')
+  /** @type {HTMLInputElement} */
+  const laptime = document.getElementById('laptime')
+  /** @type {HTMLInputElement} */
+  const output = document.getElementById('averagespeed')
+  /** @type {number} */
+  if (!circuit.value || !laptime.value) { return }
+  const l = circuits[circuit.value].l
+  const t = laptime.valueAsNumber
+  output.value = Math.round(l / (t / 3600)) + ' km/h'
 }