Hersenknetter

<!DOCTYPE html>
<html>

<head>
    <title>Wachtwoord maken</title>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="https://mistynotes.files.wordpress.com/2017/03/notes.png" type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/css?family=Libre Baskerville' rel='stylesheet'>
</head>

<style>
    body {
      font-family: 'Playfair Display, Georgia, serif;' font-size: 22px;
      background-color: #fffdc2;
      background-image:
        linear-gradient(
          to right,
          #fdfcfb,
          #e2d1c3
        );

    }
    div, h1 {margin-left: 180px; margin-top:40px}
    p{  font-family: "Libre Baskerville", Baskerville, "Book Antiqua", Georgia, Times, serif;' font-size: 12px;
    }
    hr { border: 0; height: 12px;
   box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
 }
</Style>

<body>
    <hr onClick="flip('sleutelmaken')">
    <div id="sleutelmaken" style="display:none">
        <h2>Sleutel maken</h2>
        <p>Als je een wachtwoord wil maken, heb je een sleutel nodig. Die hoef je maar één keer te maken. Maak een zin of een aantal woorden, waarin (bijna) alle letters van het alfabet voorkomen. Hier is een hulpje daarvoor. </p>
        <input type="text" size="80" name="sleutel" id="sleutel" value="" />
        <p><button onclick="checkAbc()">Check!</button></p>
        <p id="abc">abcdefghijcklmnopqrstuvwxyz</p>
    </div>
    <h1>Wachtwoord maken</h1>
    <hr onClick="flip('geheim')">
    <div>


        <p>Domein:</p>
        <input type="text" size="80" name="domein" id="domein" value="domeinzonderwwwofcom" />
        <span id='geheim'  style="display:none; width:400px">
          <p><lu><li>Bij het veld domein vul je de naam van de website in waarvoor je het wachtwoord wil maken.</li>
          <li>Vul dan in het volgende veld de vaste zin in die je voor je wachtwoorden gebruikt en waarin alle letters van het alfabet staan.</li>
          <li>En geef bij "prefix" ook nog drie karakters in om te voldoen aan de regel die sommige websites eisen: hoofdletters, getallen en vreemde tekens. Bijvoorbeeld K8*.</li></lu>
          Hiermee wordt jouw wachtwoord gemaakt als je op de knop drukt.
          </p>
        <p>Jouw zin of woorden:</p>
        <input type="text" size="80" name="zin" id="zin" value="schermleraar, onderklasse, werktuig, poffertje, vazal." />

        <p>Prefix:</p>
        <input type="text" size="80" name="prefix" id="prefix" value="" />
    </span>
        <p>
            <button onclick="makePass()">Wachtwoord!</button>

        </p>
    </div>
        <div id="print"></div>

    <script>
        function checkAbc() {
          var lcSleutel = document.getElementById("sleutel").value;
          var lcAbcChecked = "abcdefghijklmnopqrstuvwxyz";
          lcAbcChecked = lcAbcChecked.replace(new RegExp("["+lcSleutel+"]", "g"), "");
          document.getElementById("abc").innerHTML = lcAbcChecked
          return true;
          }

        function flip(acWat) {
            var x = document.getElementById(acWat);
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

        function print(acTekst, acAppend) {
          if (acAppend === undefined) {
            acAppend = 'J';
          }
          if (acAppend == 'J' || acAppend == 'j') {
            document.getElementById("print").innerHTML += "</br>" + acTekst;
          } else {
            document.getElementById("print").innerHTML = acTekst;
          }
          return true;
        }

        function makePass() {
          var lcDomein = document.getElementById("domein").value;
          //print('Domein: '+lcDomein)

          var lcZin = document.getElementById("zin").value;
          //geen spatie
          lcZin = lcZin.replace(/ /g,"");
          //print('Zin   : '+lcZin);

          var lcPrefix = document.getElementById("prefix").value;
          //print('Prefix : '+lcPrefix);

          var lcPassword = '';
          var lcLetter = '';
          var lnPlaats = 0;

          var d = new Date;
          //print(d.toLocaleString());


          for (var i = 0; i < lcDomein.length; i++) {
            lcLetter = lcDomein.charAt(i);
            //haal positie van de letter uit de zin
            lnPlaats = lcZin.indexOf(lcLetter)
            // en neem de volgende letter uit de zin
            lcPassword = lcPassword + lcZin.charAt(lnPlaats + 1);

          }
          //var d = new Date;
          //print(d.toLocaleString());
          print(lcPrefix + lcPassword, 'N');
          return true;
        }
    </script>

</body>

</html>