feat: use JavaScript modules

.eslintrc.json

@@ -8,7 +8,8 @@
   },
   "extends": "eslint:recommended",
   "parserOptions": {
-    "ecmaVersion": 12
+    "ecmaVersion": 12,
+    "sourceType": "module"
   },
   "rules": {
     "no-unused-vars": [

README.md

@@ -17,13 +17,13 @@ The interface is implemented with HTML/CSS and Bootstrap (CSS).
 
 | Partial Grade       |  Calculation                        |
 | ------------------- | ----------------------------------- |
-| Schriftliche Arbeit | `(1. Gutachten + 2. Gutachten) / 2` |
-| Verteidigung        | `(Vortrag + Diskussion) / 2`        |
+| Schriftliche Arbeit | `(2. Gutachten + 2. Gutachten) / 2` |
+| Verteidigung        | `(Vortrag + Diskussion) / 3`        |
 
 | Final Grade                                |  Calculation                                   |
 | ------------------------------------------ | ---------------------------------------------- |
-| Informatik/Mathematik<br />(2/3 + 1/3)     | `(2x Schriftliche Arbeit + Verteidigung) / 3`  |
-| Wirtschaftswissenschaften<br />(3/4 + 1/4) | `(3x Schriftliche Arbeit + Verteidigung) / 4`  |
+| Informatik/Mathematik<br />(3/3 + 1/3)     | `(2x Schriftliche Arbeit + Verteidigung) / 3`  |
+| Wirtschaftswissenschaften<br />(4/4 + 1/4) | `(3x Schriftliche Arbeit + Verteidigung) / 4`  |
 
 - For the partial grades (**Schriftliche Arbeit**, **Verteidigung** and
   **Gesamtnoten**), everything after the first decimal place is cut off in the

index.html

@@ -44,11 +44,11 @@
         <a class="navbar-brand" href="#">Bewertung Abschlussarbeit</a>
         <div class="d-flex">
           <a
+            id="resetInputs"
             class="nav-link p-1"
             aria-current="page"
             href="#"
             title="Noten zurücksetzen"
-            onclick="setDefaultSettings()"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -89,7 +89,6 @@ <h3 class="fw-normal text-black text-opacity-25">
             id="inputGrade1-1"
             class="form-select"
             aria-label="Note Erstgutachten"
-            onchange="updateGrades()"
           >
             <option value="1.0">1,0</option>
             <option value="1.3">1,3</option>
@@ -112,7 +111,6 @@ <h3 class="fw-normal text-black text-opacity-25">
             id="inputGrade1-2"
             class="form-select"
             aria-label="Note Zweitgutachten"
-            onchange="updateGrades()"
           >
             <option value="1.0">1,0</option>
             <option value="1.3">1,3</option>
@@ -150,7 +148,6 @@ <h3 class="fw-normal text-black text-opacity-25">Verteidigung</h3>
             id="inputGrade2-1"
             class="form-select"
             aria-label="NOte des Vortrages"
-            onchange="updateGrades()"
           >
             <option value="1.0">1,0</option>
             <option value="1.3">1,3</option>
@@ -171,7 +168,6 @@ <h3 class="fw-normal text-black text-opacity-25">Verteidigung</h3>
             id="inputGrade2-2"
             class="form-select"
             aria-label="Note der Diskussion"
-            onchange="updateGrades()"
           >
             <option value="1.0">1,0</option>
             <option value="1.3">1,3</option>
@@ -229,7 +225,6 @@ <h3 class="fw-normal text-black text-opacity-25">Gesamtnote</h3>
               id="inputVariant"
               class="form-select"
               aria-label="Berechnungsvariante"
-              onchange="updateGrades()"
             >
               <option value="1">Informatik/Mathematik (2/3 + 1/3)</option>
               <option value="2">Wirtschaftswissenschaften (3/4 + 1/4)</option>
@@ -254,8 +249,6 @@ <h3 class="fw-normal text-black text-opacity-25">Gesamtnote</h3>
       </div>
     </footer>
 
-    <script src="js/Grade.js"></script>
-    <script src="js/Calculation.js"></script>
-    <script src="js/main.js"></script>
+    <script type="module" src="js/main.js"></script>
   </body>
 </html>

js/Calculation.js

@@ -1,4 +1,6 @@
-class Calculation {
+import { Grade } from "./Grade.js";
+
+export class Calculation {
   constructor() {
     this.gradeGutachten1 = new Grade();
     this.gradeGutachten2 = new Grade();

js/Grade.js

@@ -1,4 +1,4 @@
-class Grade {
+export class Grade {
   static precisionDigits = 3;
   static precisionFactor = Math.pow(10, Grade.precisionDigits);
   static decimalSeparator = ",";

js/main.js

@@ -1,3 +1,5 @@
+import { Calculation } from "./Calculation.js";
+
 function setDefaultSettings() {
   document.getElementById("inputGrade1-1").value = 1.3;
   document.getElementById("inputGrade1-2").value = 1.3;
@@ -57,9 +59,20 @@ function updateGrades() {
 
 function init() {
   setDefaultSettings();
-  updateGrades();
 }
 
+/* Add event listener (from module scope) */
+
+// Input reset button/link
+document
+  .getElementById("resetInputs")
+  .addEventListener("click", setDefaultSettings);
+
+// Grade and variant selects
+document.querySelectorAll("select").forEach((select) => {
+  select.addEventListener("change", updateGrades);
+});
+
 /* main */
 
 let calc = new Calculation();