Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ellefsen - Oppgave 1</title>
    <link rel="stylesheet" href="css/960.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/text.css">
    <link rel="stylesheet" href="css/egenstandard.css">
    <link rel="stylesheet" href="css/egen1.css">

    <script src="script/jquery-3.1.1.min.js"></script>
    <script>
    function register(){
      //lagrer brukerens input i variabler
      var brukernavn = document.forms["formreg"]["username"].value;
      var passord = document.forms["formreg"]["password"].value;
      var passordconf = document.forms["formreg"]["password2"].value;

      //lagrer datoen i en variabel
      var date = document.forms["formreg"]["fdate"].value;
      /*Når jeg henter dato fra kalenderen, så vises den som år-dag-måned
      For å unngå å få med bindestrek, så velger jeg hvilke siffre som lagres i variabler*/
      //henter den første, andre, tredje og fjerde siffer av datoen.
      //Da lagres året som brukeren inputter
      var dateyear = date[0] + date[1] + date[2] + date[3];
      //Henter den femte og sjette siffer for å lagre måned
      var datemaaned = date[5] + date[6];
      //Henter den åttende og niende for å lagre dag
      var datedag = date[8] + date[9];
      //Henter dato fra PCen
      var dateObj = new Date();
      //lagrer dag datoen i en variabel
      var day = dateObj.getUTCDate()
      //lagrer måned i en variabel
      var month = dateObj.getUTCMonth() + 1;
      //lagrer året i en variebel
      var year = dateObj.getUTCFullYear();
      //Boolsk variabel som skal være "true" når man er over 18 og "false" når man ikke er det
      var gammelnok;
      //Sjekker om dagens dato minus fødsels dato er mindre enn 18
      if(year - dateyear < 18){
        alert("Du er ikke gammel nok for å se dette innholdet")
        //setter gammelnok til false, siden brukeren er under 18
        gammelnok = false;
      }

      /* Til min kunnskap, så har ikke javascript en alder sjekk utifra sammenligninger av dato
        Det er lett å sjekke om brukeren er eldre eller yngre enn 18 år, men hvis
        brukeren er født året man fyller 18, så må jeg sjekke om brukeren har fyllt år enda.*/

      /*Her blir det mer komplisert. Jeg sjekker hvis brukeren er født i året man fyller 18
      , og hvis man er det, så sjekker jeg om brukeren er født etter dagens måned.
      Hvis brukeren er født i året h*n fyller 18 og vi er i samme måned, så sjekker jeg
      om dagen brukeren har bursdag ikke har kommet enda. */
      //Ekstra kommentar: Jeg bruker parantes innenfor if testen for å skille de forskjellige hendelsene.
      if((year - dateyear == 18 && datemaaned > month) || (year - dateyear == 18 && datemaaned == month && day < datedag)){
        /*Denne koden utløses når brukeren er født året man fyller 18, men ikke er fylt
        enda siden vi ikke har nådd måneden eller måneden + dagen brukeren har bursdag */
        alert("Du er ikke gammel nok for å se dette innholdet")
        gammelnok = false;
      }
      // Hvis brukeren har bursdag året h*n fyller 18 og vi er i samme måned som
      // brukeren fyller 18 og at vi har gått forbi dagen, så forteller vi at brukeren er gammel nok (Fyllt 18)
      ////Hvis brukeren har bursdag samme år, men måneden har vært
      if((year - dateyear == 18 && datemaaned == month && datedag <= day) || (year - dateyear == 18 && datemaaned < month)){
        gammelnok = true;
      }

      /*Kommentert ut kode. Jeg har plassert den koden i if-testen over for å gjøre koden mindre.
      if(year - dateyear == 18 && datemaaned < month){
        gammelnok = true;
      }*/
      //Her er det lettere. Hvis brukeren er over 18, så er brukeren gammel nok
      if(year - dateyear > 18){
        gammelnok = true;
      }
      //Sjekker om passordet input 2 ikke er det samme som passord boks 1
      if(passord !== passordconf){
        //Denne koden utløses når passordet ikke matcher
        alert("Passordene matcher ikke")
      }
      //Denne sjekker om brukernavn ikke er fyllt inn
      if(brukernavn.length <= 0){
        alert("Vennligst fyll inn brukernavn")
      }
      //Denne sjekker om passordet er en lengde på 5 eller større
      if(passord.length < 5){
        alert("Passord må ha minst 5 siffer")
      }
      /* Hvis brukeren er gammel nok, passordet matcher, brukernavnet er fyllt inn
      og lengden på passordet er lengre enn 5, så er brukeren registrert */
      if(gammelnok === true && passord == passordconf && brukernavn.length > 0 && passord.length >= 5){
        alert("Du er nå registrert. Velkommen " + brukernavn)
      }
    }
    //Bruker jQuery. Det er et bibliotek plugin til javascript
    //Denne funksjonen sender inn formen når man trykker på enter
    //(I jQuery, så er $-tegnet en forkortelse av jQuery. Så linjen under sier egentlig jQuery('input').keypress... )
    $('.input').keypress(function (e) {   //Når en knapp trykkes på når man er i input feltet, starter funksjonen med knappen som parameter.
      if (e.which == 13) {                //Hvis knappen er "Enter" (13 er tallet for Enter knappen).
      $('form#regForm').submit();         //Formen med id "regForm" sendes inn.
      return false;                       // Dette er det samme som preventDefault, men støttes i alle nettlesere.
    }                                     // return false; stopper Enter-knappen fra å gjøre det den pleier å gjøre. Nå sender den bare inn formen.
    });

    </script>


  </head>
  <body>

    <div class="container_12">
      <header class="grid_12">
        <h1>Registrerings Side - Oppgave 1-3</h1>
      </header>

      <main class="grid_8 prefix_2 suffix_2" id="registrering">
        <form id="regForm" name="formreg" onSubmit="return register()" method="post">
          Brukernavn: <br>
          <input type="text" name="username"><br>
          Passord: <br>
          <input type="password" name="password"><br>
          Skriv passord igjen: <br>
          <input type="password" name="password2"><br>
          Alder: (DD/MM/YY) <br>

          <input type="date" id="DateInputFelt" name="fdate" min="1920-01-01" max="2007-01-01" value="1990-01-01"><br>
          <input type="submit" name="submit" id="knapp">
        </form>
      </main>
    </div>
  </body>
</html>