+
+ Merci ! Les informations nécessaires pour votre réservation nous + ont bien été transmises. +
+ +
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;
+ }
+}