All features implemented

.timetracker

@@ -0,0 +1 @@
+{"total":11971,"sessions":[{"begin":"2021-07-15T14:28:39+02:00","end":"2021-07-15T14:30:49+02:00","duration":130},{"begin":"2021-07-15T14:32:34+02:00","end":"2021-07-15T14:34:35+02:00","duration":121},{"begin":"2021-07-15T14:35:37+02:00","end":"2021-07-15T14:39:43+02:00","duration":246},{"begin":"2021-07-15T14:50:14+02:00","end":"2021-07-15T14:57:46+02:00","duration":451},{"begin":"2021-07-15T14:57:55+02:00","end":"2021-07-15T15:08:40+02:00","duration":644},{"begin":"2021-07-15T15:12:22+02:00","end":"2021-07-15T15:31:10+02:00","duration":1127},{"begin":"2021-07-15T15:31:30+02:00","end":"2021-07-15T15:40:28+02:00","duration":537},{"begin":"2021-07-15T15:40:55+02:00","end":"2021-07-15T15:42:56+02:00","duration":121},{"begin":"2021-07-15T15:43:20+02:00","end":"2021-07-15T15:46:44+02:00","duration":204},{"begin":"2021-07-15T15:47:00+02:00","end":"2021-07-15T16:06:05+02:00","duration":1144},{"begin":"2021-07-15T16:12:35+02:00","end":"2021-07-15T16:14:38+02:00","duration":123},{"begin":"2021-07-15T16:14:52+02:00","end":"2021-07-15T16:17:48+02:00","duration":176},{"begin":"2021-07-15T16:18:35+02:00","end":"2021-07-15T16:23:29+02:00","duration":293},{"begin":"2021-07-15T16:23:34+02:00","end":"2021-07-15T16:27:16+02:00","duration":222},{"begin":"2021-07-15T16:28:08+02:00","end":"2021-07-15T16:32:53+02:00","duration":285},{"begin":"2021-07-15T16:35:28+02:00","end":"2021-07-15T16:37:29+02:00","duration":121},{"begin":"2021-07-15T16:37:34+02:00","end":"2021-07-15T16:42:00+02:00","duration":266},{"begin":"2021-07-15T16:42:32+02:00","end":"2021-07-15T16:46:28+02:00","duration":236},{"begin":"2021-07-15T16:47:02+02:00","end":"2021-07-15T16:49:29+02:00","duration":147},{"begin":"2021-07-15T16:49:56+02:00","end":"2021-07-15T16:57:23+02:00","duration":446},{"begin":"2021-07-15T16:59:59+02:00","end":"2021-07-15T17:07:34+02:00","duration":454},{"begin":"2021-07-15T17:17:25+02:00","end":"2021-07-15T17:20:23+02:00","duration":177},{"begin":"2021-07-15T17:20:30+02:00","end":"2021-07-15T17:29:07+02:00","duration":517},{"begin":"2021-07-15T17:30:21+02:00","end":"2021-07-15T17:47:57+02:00","duration":1055},{"begin":"2021-07-15T17:51:50+02:00","end":"2021-07-15T17:54:28+02:00","duration":158},{"begin":"2021-07-15T17:59:57+02:00","end":"2021-07-15T18:01:58+02:00","duration":121},{"begin":"2021-07-15T18:23:57+02:00","end":"2021-07-15T18:38:41+02:00","duration":883},{"begin":"2021-07-15T18:39:24+02:00","end":"2021-07-15T18:43:30+02:00","duration":246},{"begin":"2021-07-15T18:48:14+02:00","end":"2021-07-15T18:53:35+02:00","duration":321},{"begin":"2021-07-15T18:56:36+02:00","end":"2021-07-15T19:02:54+02:00","duration":377},{"begin":"2021-07-15T19:03:26+02:00","end":"2021-07-15T19:11:48+02:00","duration":501},{"begin":"2021-07-15T19:12:46+02:00","end":"2021-07-15T19:14:48+02:00","duration":121}]}

starterOnly/index.html → index.html

@@ -28,7 +28,7 @@
       </a>
     </div>
     </div>
-  </div>
+
     <main>
       <div class="hero-section">
         <div class="hero-content">
@@ -58,9 +58,11 @@ <h1 class="hero-headline">
           <div class="modal-body">
             <form
               name="reserve"
+              id="reserveForm"
               action="index.html"
               method="get"
-              onsubmit="return validate();"
+              onsubmit="return moveAhead();"
+
             >
               <div
                 class="formData">
@@ -71,6 +73,8 @@ <h1 class="hero-headline">
                   id="first"
                   name="first"
                   minlength="2"
+                  required
+                  oninvalid="this.setCustomValidity('')"
                 /><br>
               </div>
               <div
@@ -81,6 +85,9 @@ <h1 class="hero-headline">
                   type="text"
                   id="last"
                   name="last"
+                  minlength="2"
+                  required
+                  onblur="this.setCustomValidity('Please enter 2+ characters for name field.')"
                 /><br>
               </div>
               <div
@@ -91,6 +98,7 @@ <h1 class="hero-headline">
                   type="email"
                   id="email"
                   name="email"
+                  required
                 /><br>
               </div>
               <div
@@ -101,14 +109,17 @@ <h1 class="hero-headline">
                   type="date"
                   id="birthdate"
                   name="birthdate"
+                  value=""
+                  required
+                  oninvalid="this.setCustomValidity('You must enter your date of birth.')"
                 /><br>
               </div>
               <div
                 class="formData">
                 <label>How many tournaments have you attended? </label><br>
-                <input type="number" class="text-control" id="quantity" name="quantity" min="0" max="99">
+                <input type="text" class="text-control" id="quantity" name="quantity"  value="0">
               </div>
-              <p class="text-label">Which location?</p>
+              <p class="text-label" id="locationQuestion">Which location?</p>
               <div
                 class="formData">
                 <input
@@ -178,16 +189,17 @@ <h1 class="hero-headline">
                   Portland</label
                 >
               </div>
-
               <div
                 class="formData">
                 <input
                   class="checkbox-input"
                   type="checkbox"
                   id="checkbox1"
                   checked
+                  required
+                  oninvalid="this.setCustomValidity('You must check to agree to terms and conditions.')"
                 />
-                <label class="checkbox2-label" for="checkbox1" required>
+                <label class="checkbox2-label" for="checkbox1">
                   <span class="checkbox-icon"></span>
                   I have read and I agree to GameOn's terms and conditions.
                 </label>
@@ -200,9 +212,9 @@ <h1 class="hero-headline">
                 <br>
               </div>
               <input
-                class="btn-submit"
+                class="btn-submit button"
                 type="submit"
-                class="button"
+                id="submit"
                 value="Go"
               />
             </form>

starterOnly/modal.css → modal.css

@@ -17,7 +17,7 @@ body {
   background-image: url("background.png");
   font-family: var(--font-default);
   font-size: 18px;
-  max-width: 1300px;
+  max-width: 2200px;
   margin: 0 auto;
 }
 
@@ -420,7 +420,8 @@ input[data-error]::after {
   color: #fff;
   position: relative;
   text-align: left;
-  min-width: 424px;
+  min-width: 375px;
+  max-width: 100%;
 }
 .hero-content::after {
   content: "";
@@ -439,9 +440,10 @@ input[data-error]::after {
   font-size: 6rem;
   font-weight: normal;
   white-space: nowrap;
+  max-width: 100%;
 }
 .hero-text {
-  width: 146%;
+  width: 100%;
   font-weight: normal;
   margin-top: 57px;
   padding: 0;
@@ -482,11 +484,16 @@ footer {
   .hero-section {
     display: block;
     box-shadow: unset;
+    max-width: 100%;
+  }
+  .hero-body{
+    height: 100vh;
   }
   .hero-content {
     background: #fff;
     color: #000;
     padding: 20px;
+    max-width: 100%;
   }
   .hero-content::after {
     content: unset;
@@ -495,11 +502,13 @@ footer {
     display: none;
   }
   .hero-headline {
-    font-size: 4.5rem;
+    font-size: 3.3rem;
     white-space: normal;
+    width: 80vw;
+    overflow: initial;
   }
   .hero-text {
-    width: unset;
+    width: 80vw;
     font-size: 1.5rem;
   }
   .hero-img img {

modal.js

@@ -0,0 +1,229 @@
+function editNav() {
+  var x = document.getElementById("myTopnav");
+  if (x.className === "topnav") {
+    x.className += " responsive";
+  } else {
+    x.className = "topnav";
+  }
+}
+
+// DOM Elements
+const modalbg = document.querySelector(".bground");
+const modalBtn = document.querySelectorAll(".modal-btn");
+const formData = document.querySelectorAll(".formData");
+const closeBtn = document.querySelector('.close');
+const modalBody = document.querySelector('modal-body');
+
+const first = document.querySelector("#first");
+const last = document.querySelector("#last");
+const email = document.querySelector("#email");
+const birthdate = document.querySelector("#birthdate");
+const quantity = document.querySelector("#quantity");
+const locations = document.getElementsByName("location");
+const submit = document.querySelector("#submit");
+const checkbox1 = document.querySelector('#checkbox1');
+const formElements = document.getElementsByClassName('formData');
+const form = document.getElementById('reserveForm');
+
+var roundsThrough = 1;
+var errorCounter = 0;
+var registered = false;
+var secondPageRendered = false;
+console.log(form);
+console.log('Starting round: ' + roundsThrough)
+console.log('Resetting form');
+form.reset();
+
+// launch modal event
+modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
+
+
+// launch modal form
+function launchModal() {
+  modalbg.style.display = "block";
+}
+
+closeBtn.addEventListener('click', () => {
+  closeModal();
+});
+
+// close modal form
+function closeModal() {
+  modalbg.style.display = "none";
+}
+
+//Input Validation and Error Messages
+
+//Prevent Default
+
+document.addEventListener(
+  "invalid",
+  (function () {
+    return function (e) {
+      //prevent the browser from showing default error bubble / hint
+      e.preventDefault();
+    };
+  })(),
+  true
+);
+
+
+//Functions to display and remove custom error messages below the input field
+
+function errorMessage(msg, field) {
+  //check if there is already a error message
+  if (field.parentNode.querySelector("p")) {
+  }
+  //otherwise add one
+  else {
+    let redMessage = document.createElement("p");
+    redMessage.textContent = msg;
+    redMessage.style.color = "red";
+    redMessage.style.fontSize = "1rem";
+    redMessage.style.padding = "0.2rem";
+    redMessage.classList.add("error-message");
+    field.parentNode.appendChild(redMessage);
+    field.style.borderColor = "red";
+    errorCounter++;
+  }
+}
+
+function removeErrorMessage(field) {
+  //check if there is an error message and in case remove it
+  if (field.parentNode.querySelector("p")) {
+    let toRemove = field.parentNode.querySelector("p");
+    field.parentNode.removeChild(toRemove);
+    field.style.borderColor = "#ccc";
+    console.log("Error Message removed in field: " + field.name);
+    errorCounter--;
+  }
+}
+
+//First and Last Name validation
+
+submit.addEventListener("click", () => {
+  if (first.value.length < 2) {
+    errorMessage("Please enter 2+ characters for name field.", first);
+  } else {
+    removeErrorMessage(first);
+  }
+});
+
+submit.addEventListener("click", () => {
+  if (last.value.length < 2) {
+    errorMessage("Please enter 2+ characters for name field.", last);
+  } else {
+    removeErrorMessage(last);
+  }
+});
+
+//Email Validation
+
+submit.addEventListener("click", () => {
+  if (email.validity.typeMismatch || email.validity.valueMissing) {
+    errorMessage("Please enter a valid email address", email);
+  } else {
+    removeErrorMessage(email);
+  }
+});
+
+//Birthday Validation
+
+submit.addEventListener("click", () => {
+  if (birthdate.validity.valueMissing) {
+    errorMessage("You must enter your date of birth.", birthdate);
+  } else {
+    removeErrorMessage(birthdate);
+  }
+});
+
+//Tournament Quantity Validation
+
+submit.addEventListener("click", () => {
+  if (isNaN(quantity.value) || quantity.value < 0) {
+    errorMessage("Please enter a number or leave this field empty", quantity);
+  } else {
+    removeErrorMessage(quantity);
+  }
+});
+
+//Radiobutton Validation --> Create Collection, check for selected Button
+
+submit.addEventListener("click", () => {
+  let currentLocation;
+  for (i = 0; i < locations.length; i++) {
+    if (locations[i].checked) {
+      currentLocation = locations[i].value;
+    }
+  }
+  if (typeof currentLocation == 'undefined') {
+    errorMessage("You must choose one option.", locations[0]);
+  } else {
+    removeErrorMessage(locations[0]);
+    console.log('Location successfully chosen: ' + currentLocation);
+  }
+});
+
+//Terms and Conditions Checkbox Validation
+
+submit.addEventListener("click", () => {
+  if (checkbox1.checked == false) {
+    errorMessage("You must check to agree to terms and conditions.", checkbox1);
+  } else {
+    removeErrorMessage(checkbox1);
+  }
+});
+
+submit.addEventListener('click', () => {
+  console.log('just outside $registered branch now')
+
+  if(registered){
+    console.log('inside $registered branch now')
+    secondPageRendered = true;
+    closeModal();
+    console.log('EXITING FORM')
+  }
+});
+
+//After successful validation 
+
+submit.addEventListener('click', () => {
+  if(errorCounter == 0){
+    console.log('No errors, form filled out correctly');
+
+
+    for(i=0; i < formElements.length; i++){
+      formElements[i].style.display = 'none';
+      console.log('running through hide loop');
+    }
+    document.querySelector('#locationQuestion').textContent = 'Thank you for submitting your registration details!';
+    document.querySelector('#locationQuestion').style.padding = 'auto';
+    document.querySelector('#locationQuestion').style.paddingBottom = '6rem';
+    document.querySelector('#locationQuestion').style.paddingTop = '6rem';
+    document.querySelector('#locationQuestion').style.fontSize = '3rem';
+    document.querySelector('#locationQuestion').style.textAllign = "center";
+    submit.value = 'Close';
+
+    registered = true;
+
+
+  }
+  else{
+    console.log('Error count is: ' + errorCounter );
+  }
+})
+
+
+
+
+
+function moveAhead(){
+  if(secondPageRendered){
+
+    console.log('move ahead function triggered')
+    return true;
+  }
+}
+
+console.log('Rounds through the whole code' + roundsThrough);
+roundsThrough++;