Deine Aufgabe: Programmiere einen Passwortschutz

Code skill

Nutze deine neuen JavaScript-Kenntnisse und entwickle eine Webseite, die den Benutzer bittet, ein Passwort einzugeben. Diese Webseite schützt die Webseite über den Mönchsdiamanten, die du in der ersten Mission erstellt hast. Dein JavaScript-Programm sollte folgende Dinge enthalten:

  • Eine Funktion
  • Variablen
  • Eine if-else-Anweisung
  • Einen Alert
  • Ein Textfeld zur Eingabe
  • Einen Hyperlink
Wenn du nicht weiterkommst, kannst du diesen Quellcode kopieren. Ändere das Design und das Passwort. So wird die Webseite dein eigenes Werk. Speichere die Datei unter dem Namen password.html in deinem Ordner Coding.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>OnclickPasswort</title>
    <style>
     body {
       background-color: lightblue;
       padding: 30px;
     }
     </style>
     <script>
         function checkPasswort() {
            var passwort = document.getElementById("passwortFeld");
            var passwortText = passwort.value;
            if(passwortText == "Ernesto300") {
              return true;
            }
            else {
                  alert("Zugriff verweigert! Passwort falsch!");
                  return false;
            }
           }
      </script>
</head>
<body>
   <p style="font-size: 30pt;"> MÖNCHSDIAMANT GEFUNDEN</p>
   <p>Bitte gib das Passwort für diese Seite ein.</p>
   <p>Passwort:<input id="passwortFeld" type="password"/></p>
   <a href="monkdiamonddiscovery.html" onclick="return checkPasswort();">
     Klicke für Passworteingabe und Aufruf der Website
   </a>
</body>
</html>