added js functionality

spacetaxi.js

@@ -1,18 +1,30 @@
 document.addEventListener('DOMContentLoaded', init);
 
+// Trackt die Planete, wenn 1 = ausgewählt, 0 = nicht ausgewählt (von links nach rechts)
 list_id = [0, 0, 0, 0, 0];
 
 function init() {
+
+    // Erstelle zu Beginn ein Sternenfeld mit entsprechenden Z-Index im Background
     create_star_field(100);
+
+    // Bei der Auswahl von Raumschiffen, ändert sich der Score
     document.querySelectorAll('input[name="spaceship"]').forEach(radio => {
         radio.addEventListener('change', update_score);
     });
-    //myForm.password.addEventListener('change', check_password);
+
-    //myForm.spaceship.addEventListener('change', update_score);
+    // Form Listener
+    form = document.querySelector("form")
+    form.username.addEventListener('change', check_username);
+    form.password.addEventListener('change', check_password);
+    form.addEventListener('submit', check_after_submitting)
+
+    // Event Listener für alle Planeten
     document.querySelectorAll('svg').forEach(function (svg) { svg.addEventListener('click', printClicked) });
     
 }
 
+// Methode die n-Mal die Funktion, um ein Stern erstellen, aufruft
 function create_star_field(n)
 {
     for (let i = 0; i < n; i++)
@@ -21,20 +33,26 @@ function create_star_field(n)
     }
 }
 
+// Methode um einen Stern zu erstellen
 function create_star()
 {
 
+    // Krieg eine zufällige Position, die im Fenster definiert ist
     const x = Math.floor(Math.random() * window.innerWidth);
     const y = Math.floor(Math.random() * window.innerHeight);
 
+    // Eigentliches Stern Element als Partikel (siehe auch CSS)
     const star = document.createElement('particle');
 
+    // Füge diesen Stern in den Body ein
     document.body.appendChild(star);
 
+    // Mache den Stern sichtbar, in der hintersten Ebene
     star.style.position = 'absolute';
     star.style.opacity = '1';
     star.style.zIndex = '-1';
 
+    // Definiere die Sterngröße, die zwischen 0
     const size = Math.round(Math.random() * 5);
 
     star.style.height = `${size}px`;
@@ -47,11 +65,51 @@ function create_star()
 }
 
 function check_password(e) {
-    return
+    // To-Do?
 }
 
 function check_username(e) {
-    return
+    // To-Do?
+}
+
+function check_after_submitting(e)
+{
+    form = e.target;
+
+    
+    username = form.username.value;
+    password = form.password.value;
+    planeten_score = document.getElementById("planete").value;
+
+    // Username ob vorhanden prüfen
+    if (username.length < 1)
+    {
+        alert("Username eintragen!");
+        e.preventDefault();
+    }
+    
+    // Passwort ob vorhanden prüfen
+    else if (password.length < 1)
+    {
+        alert("Passwort eintragen!");
+        e.preventDefault();
+    }
+
+    // Ob Rakete ausgewählt worden ist
+    else if (form.spaceship.value == "")
+    {
+        alert("Wähle eine Rakete aus!");
+        e.preventDefault();
+    }
+
+    // Ob mind. ein Planet ausgewählt worden ist
+    else if (planeten_score == 0)
+    {
+        alert("Wähle mindestens einen Planeten aus!");
+        e.preventDefault();
+    }
+    // e.preventDefault();
+
 }
 
 function printClicked(e) {