From 93bb451e88db09ae23bafbb24bbb3263c3b3b9cc Mon Sep 17 00:00:00 2001 From: Christophe Date: Thu, 8 Apr 2021 15:52:32 +0200 Subject: [PATCH] Fixed Issue 2, 3, 4 #2 #3 #4 --- starterOnly/index.html | 50 +++++++++++++++++++---------- starterOnly/modal.css | 61 ++++++++++++++++++++++++++++-------- starterOnly/modal.js | 71 ++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 151 insertions(+), 31 deletions(-) diff --git a/starterOnly/index.html b/starterOnly/index.html index 1371cb13b5..d4c691f0d8 100644 --- a/starterOnly/index.html +++ b/starterOnly/index.html @@ -1,5 +1,5 @@ - + Reservation @@ -41,26 +41,35 @@

Vous aimez jouer ? Notre prochain évènement gaming est ouvert aux réservations... Places limitées !

- +
img
- +
+
+

+ Merci ! Les informations nécessaires pour votre réservation nous + ont bien été transmises. +

+ +
-
+
/>
-
+

-
+
/>
-
+
/>
-
@@ -112,9 +122,10 @@

name="quantity" min="0" max="99" + required />

-

Quelles villes ?

+

Quelle ville ?

Portland +
@@ -189,24 +201,30 @@

class="checkbox-input" type="checkbox" id="checkbox1" + name="checkbox1" checked /> -

diff --git a/starterOnly/modal.css b/starterOnly/modal.css index 38cdea6251..bf7f92a7d6 100644 --- a/starterOnly/modal.css +++ b/starterOnly/modal.css @@ -14,7 +14,7 @@ body { margin: 0; display: flex; flex-direction: column; - background-image: url("background.png"); + /*background-image: url("background.png");*/ font-family: var(--font-default); font-size: 18px; max-width: 1300px; @@ -35,10 +35,10 @@ img { margin: 3.5%; } .header-logo { - float: left; + float: left; } .main-navbar { - float: right; + float: right; } .topnav a { float: left; @@ -69,7 +69,9 @@ img { } @media screen and (max-width: 768px) { - .topnav a {display: none;} + .topnav a { + display: none; + } .topnav a.icon { float: right; display: block; @@ -77,7 +79,9 @@ img { } @media screen and (max-width: 768px) { - .topnav.responsive {position: relative;} + .topnav.responsive { + position: relative; + } .topnav.responsive .icon { position: absolute; right: 0; @@ -90,16 +94,16 @@ img { } } - - - @media screen and (max-width: 540px) { - .topnav a {display: none;} +@media screen and (max-width: 540px) { + .topnav a { + display: none; + } .topnav a.icon { float: right; display: block; margin-top: -15px; } -} +} main { font-size: 130%; @@ -111,8 +115,6 @@ main { margin: 1px 20px 15px; border-radius: 2rem; text-align: justify; - - } .modal-btn { @@ -200,6 +202,7 @@ input { border: 0.8px solid #ccc; outline: none; } + .text-control { margin: 0; padding: 8px; @@ -232,6 +235,27 @@ input[data-error]::after { font-size: 0.4em; color: red; } */ + +#confirmation { + display: none; + flex-flow: wrap; + align-items: center; + padding: 20%; + height: 96vh; +} + +/* Error Message */ +.error { + font-size: 16px; + color: #f00; + text-align: center; +} +.border-error { + border: 2px solid red; + border-radius: 0.2em; + padding-right: 5px; +} + .checkbox-label, .checkbox2-label { position: relative; @@ -333,6 +357,18 @@ input[data-error]::after { cursor: pointer; border: 0; } +.btn-close { + display: none; + background: #fe142f; + margin: 0 auto; + border-radius: 7px; + font-size: 1rem; + padding: 12px 82px; + color: #fff; + cursor: pointer; + border: 0; + align-self: flex-end; +} /* custom select styles */ .custom-select { position: relative; @@ -526,4 +562,3 @@ footer { opacity: 1; } } - diff --git a/starterOnly/modal.js b/starterOnly/modal.js index 8474b794a5..2f09b2e604 100644 --- a/starterOnly/modal.js +++ b/starterOnly/modal.js @@ -9,16 +9,21 @@ function editNav() { // DOM Elements const modalbg = document.querySelector(".bground"); +const modalBody = document.querySelector(".modal-body"); const modalBtn = document.querySelectorAll(".modal-btn"); const modalCloseBtn = document.querySelectorAll(".close"); -const formData = document.querySelectorAll(".formData"); +const dataSendCloseBtn = document.querySelector(".btn-close"); +//const formData = document.querySelectorAll(".formData"); const copyright = document.querySelector(".copyrights"); +const form = document.getElementById("form"); +const formTransmitted = document.getElementById("confirmation"); +const locationInputData = document.getElementsByName("location"); // launch modal event modalBtn.forEach((btn) => btn.addEventListener("click", launchModal)); // close modal event modalCloseBtn.forEach((e) => e.addEventListener("click", closeModal)); - +dataSendCloseBtn.addEventListener("click", closeModal); // launch modal form function launchModal() { modalbg.style.display = "block"; @@ -31,3 +36,65 @@ function closeModal() { //insert copyright with automatically good actual year const year = new Date().getFullYear(); copyright.textContent = "Copyright 2014 - " + year + ", GameOn Inc."; + +//checking inputs +function checkInputs() { + const formData = new FormData(form); + const entries = formData.entries(); + const data = Object.fromEntries(entries); + console.log(data); + + //DOM element for error message + const radioError = document.querySelector(".radio-error"); + const checkboxError = document.querySelector(".checkbox-error"); + + //select parent element to radio input + const parentRadioElt = document.getElementById("location1").parentElement; + + //select parent element to checkbox input + const parentCheckboxElt = document.getElementById("checkbox1").parentElement; + + if (!data.location) { + parentRadioElt.classList.add("border-error"); + //error message + radioError.innerHTML = "Merci de bien vouloir sélectionner une ville !"; + } + if (data.location) { + if (parentRadioElt.classList.contains("border-error")) { + //remove radiobox class + parentRadioElt.classList.remove("border-error"); + //remove error message + radioError.innerHTML = ""; + } + } + if (!data.checkbox1) { + parentCheckboxElt.classList.add("border-error"); + //error message + checkboxError.innerHTML = "Merci d'accepter les conditions d'utilisation !"; + } + if (data.checkbox1) { + if (parentCheckboxElt.classList.contains("border-error")) { + //remove radiobox class + parentCheckboxElt.classList.remove("border-error"); + //remove error message + checkboxError.innerHTML = ""; + } + } + + if (data.hasOwnProperty("location") && data.hasOwnProperty("checkbox1")) { + return JSON.stringify(data); + } +} + +function validate(e) { + e.preventDefault(); + checkInputs(); + if (checkInputs()) { + modalBody.style.display = "none"; + dataSendCloseBtn.style.display = "block"; + formTransmitted.style.display = "flex"; + return true; + } else { + return false; + } +}