diff --git a/.timetracker b/.timetracker new file mode 100644 index 0000000..5c940a6 --- /dev/null +++ b/.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}]} \ No newline at end of file diff --git a/starterOnly/DM_Sans/DMSans-Bold.ttf b/DM_Sans/DMSans-Bold.ttf similarity index 100% rename from starterOnly/DM_Sans/DMSans-Bold.ttf rename to DM_Sans/DMSans-Bold.ttf diff --git a/starterOnly/DM_Sans/DMSans-BoldItalic.ttf b/DM_Sans/DMSans-BoldItalic.ttf similarity index 100% rename from starterOnly/DM_Sans/DMSans-BoldItalic.ttf rename to DM_Sans/DMSans-BoldItalic.ttf diff --git a/starterOnly/DM_Sans/DMSans-Italic.ttf b/DM_Sans/DMSans-Italic.ttf similarity index 100% rename from starterOnly/DM_Sans/DMSans-Italic.ttf rename to DM_Sans/DMSans-Italic.ttf diff --git a/starterOnly/DM_Sans/DMSans-Medium.ttf b/DM_Sans/DMSans-Medium.ttf similarity index 100% rename from starterOnly/DM_Sans/DMSans-Medium.ttf rename to DM_Sans/DMSans-Medium.ttf diff --git a/starterOnly/DM_Sans/DMSans-MediumItalic.ttf b/DM_Sans/DMSans-MediumItalic.ttf similarity index 100% rename from starterOnly/DM_Sans/DMSans-MediumItalic.ttf rename to DM_Sans/DMSans-MediumItalic.ttf diff --git a/starterOnly/DM_Sans/DMSans-Regular.ttf b/DM_Sans/DMSans-Regular.ttf similarity index 100% rename from starterOnly/DM_Sans/DMSans-Regular.ttf rename to DM_Sans/DMSans-Regular.ttf diff --git a/starterOnly/DM_Sans/OFL.txt b/DM_Sans/OFL.txt similarity index 100% rename from starterOnly/DM_Sans/OFL.txt rename to DM_Sans/OFL.txt diff --git a/starterOnly/Logo.png b/Logo.png similarity index 100% rename from starterOnly/Logo.png rename to Logo.png diff --git a/starterOnly/bg_img.jpg b/bg_img.jpg similarity index 100% rename from starterOnly/bg_img.jpg rename to bg_img.jpg diff --git a/starterOnly/index.html b/index.html similarity index 85% rename from starterOnly/index.html rename to index.html index 8096822..54fbae5 100644 --- a/starterOnly/index.html +++ b/index.html @@ -28,7 +28,7 @@ - +
@@ -58,9 +58,11 @@

@@ -71,6 +73,8 @@

id="first" name="first" minlength="2" + required + oninvalid="this.setCustomValidity('')" />

type="text" id="last" name="last" + minlength="2" + required + onblur="this.setCustomValidity('Please enter 2+ characters for name field.')" />
type="email" id="email" name="email" + required />
type="date" id="birthdate" name="birthdate" + value="" + required + oninvalid="this.setCustomValidity('You must enter your date of birth.')" />

- +
-

Which location?

+

Which location?

Portland
-
type="checkbox" id="checkbox1" checked + required + oninvalid="this.setCustomValidity('You must check to agree to terms and conditions.')" /> -
diff --git a/starterOnly/modal.css b/modal.css similarity index 97% rename from starterOnly/modal.css rename to modal.css index 38cdea6..a64c6b6 100644 --- a/starterOnly/modal.css +++ b/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 { diff --git a/modal.js b/modal.js new file mode 100644 index 0000000..70bc17d --- /dev/null +++ b/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++; \ No newline at end of file diff --git a/starterOnly/modal.js b/starterOnly/modal.js deleted file mode 100644 index 694a848..0000000 --- a/starterOnly/modal.js +++ /dev/null @@ -1,23 +0,0 @@ -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"); - -// launch modal event -modalBtn.forEach((btn) => btn.addEventListener("click", launchModal)); - -// launch modal form -function launchModal() { - modalbg.style.display = "block"; -} - -