Kész vagyok

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">

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'
 }