Skip to content

Issue #4: Add Confirmation Message on Successful Form Submission #417

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
maxdnc wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Issue #4: Add Confirmation Message on Successful Form Submission #417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
3aebc10
✨ Add ModalManager class and Add close() method
maxdnc Feb 18, 2024
d16cb86
🐛 Update form labels in index.html
maxdnc Feb 18, 2024
34e17da
🐛 Fix HTML formatting and add id name to the form
maxdnc Feb 18, 2024
d2734c6
Add form validation to modal.js
maxdnc Feb 18, 2024
0c6a6ae
Refactor field value assignment in FormValidator class
maxdnc Feb 18, 2024
ec8db52
Add console.log to check form validity
maxdnc Feb 18, 2024
7393f90
✨ Add displayError and hideError methods to FormValidator class
maxdnc Feb 18, 2024
8a12e6b
✨ Add error messages for form validation
maxdnc Feb 18, 2024
a7f97c3
✨ Add valid message and close button to modal in index.html
maxdnc Feb 18, 2024
d3e51d1
✨ Add style for valid message in modal.css
maxdnc Feb 18, 2024
e873108
✨ Add displayValidMessage and hideValidMessage methods to FormValidat…
maxdnc Feb 18, 2024
f82d39b
✨ Add resetForm method to FormValidator class
maxdnc Feb 18, 2024
8856b89
✨ Add open button functionality to ModalManager class
maxdnc Feb 18, 2024
34fbc5d
♻️ Refactor close() method and reset form in ModalManager class
maxdnc Feb 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 63 additions & 58 deletions starterOnly/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Reservation</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="modal.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=DM+Sans"
rel="stylesheet"
Expand All @@ -14,103 +17,108 @@
<body>
<div class="topnav" id="myTopnav">
<div class="header-logo">
<img alt="logo" src="Logo.png" width="auto" height="auto" />
</div>
<div class="main-navbar">

<a href="#" class="active"><span>Accueil</span></a>
<a href="#"><span>Détails de l'évènement</span></a>
<a href="#"><span>À propos</span></a>
<a href="#"><span>Contact</span></a>
<a href="#"><span>Évènements passés</span></a>
<a href="javascript:void(0);" class="icon" onclick="editNav()">
<i class="fa fa-bars"></i>
</a>
</div>
<img alt="logo" src="Logo.png" width="auto" height="auto" />
</div>
<div class="main-navbar">
<a href="#" class="active"><span>Accueil</span></a>
<a href="#"><span>Détails de l'évènement</span></a>
<a href="#"><span>À propos</span></a>
<a href="#"><span>Contact</span></a>
<a href="#"><span>Évènements passés</span></a>
<a href="javascript:void(0);" class="icon" onclick="editNav()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
</div>

<main>
<div class="hero-section">
<div class="hero-content">
<h1 class="hero-headline">
Marathon national<br>
Marathon national<br />
de jeux vidéos
</h1>
<p class="hero-text">
Vous aimez jouer ? Notre prochain évènement gaming est ouvert
aux réservations... Places limitées !
Vous aimez jouer ? Notre prochain évènement gaming est ouvert aux
réservations... Places limitées !
</p>
<button class="btn-signup modal-btn">
je m'inscris
</button>
<button class="btn-signup modal-btn">je m'inscris</button>
</div>
<div class="hero-img">
<img src="./bg_img.jpg" alt="img" />
</div>
<button class="btn-signup modal-btn">
je m'inscris
</button>
<button class="btn-signup modal-btn">je m'inscris</button>
</div>

<div class="bground">
<div class="content">
<span class="close"></span>
<div class="modal-body">
<div class="container-validMessage">
<p id="text-validMessage">Merci pour votre inscription</p>
<button id="valid-btn-close" class="btn-submit">Fermer</button>
</div>
<form
name="reserve"
action="index.html"
method="get"
onsubmit="return validate();"
method="POST"
id="reserveForm"
>
<div
class="formData">
<label>Prénom</label><br>
<div class="formData">
<label for="first">Prénom</label><br />
<input
class="text-control"
type="text"
id="first"
name="first"
minlength="2"
/><br>
/><br />
</div>
<div
class="formData">
<label>Nom</label><br>
<div class="formData">
<label for="last">Nom</label><br />
<input
class="text-control"
type="text"
id="last"
name="last"
/><br>
/><br />
</div>
<div
class="formData">
<label>E-mail</label><br>
<div class="formData">
<label for="email">E-mail</label><br />
<input
class="text-control"
type="email"
id="email"
name="email"
/><br>
/><br />
</div>
<div
class="formData">
<label>Date de naissance</label><br>
<div class="formData">
<label for="birthdate">Date de naissance</label><br />
<input
class="text-control"
type="date"
id="birthdate"
name="birthdate"
/><br>
/><br />
</div>
<div
class="formData">
<label>À combien de tournois GameOn avez-vous déjà participé ?</label><br>
<input type="number" class="text-control" id="quantity" name="quantity" min="0" max="99">
<div class="formData">
<label for="quantity"
>À combien de tournois GameOn avez-vous déjà participé
?</label
><br />
<input
type="number"
class="text-control"
id="quantity"
name="quantity"
min="0"
max="99"
/>
</div>
<p class="text-label">A quel tournoi souhaitez-vous participer cette année ?</p>
<div
class="formData">
<p class="text-label">
A quel tournoi souhaitez-vous participer cette année ?
</p>
<div class="formData">
<input
class="checkbox-input"
type="radio"
Expand Down Expand Up @@ -179,8 +187,7 @@ <h1 class="hero-headline">
>
</div>

<div
class="formData">
<div class="formData">
<input
class="checkbox-input"
type="checkbox"
Expand All @@ -191,13 +198,13 @@ <h1 class="hero-headline">
<span class="checkbox-icon"></span>
J'ai lu et accepté les conditions d'utilisation.
</label>
<br>
<br />
<input class="checkbox-input" type="checkbox" id="checkbox2" />
<label class="checkbox2-label" for="checkbox2">
<span class="checkbox-icon"></span>
Je Je souhaite être prévenu des prochains évènements.
Je souhaite être prévenu des prochains évènements.
</label>
<br>
<br />
</div>
<input
class="btn-submit"
Expand All @@ -211,9 +218,7 @@ <h1 class="hero-headline">
</div>
</main>
<footer>
<p class="copyrights">
Copyright 2014 - 2022, GameOn Inc.
</p>
<p class="copyrights">Copyright 2014 - 2022, GameOn Inc.</p>
</footer>
<script src="modal.js"></script>
</body>
Expand Down
79 changes: 59 additions & 20 deletions starterOnly/modal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
:root {
--font-default: "DM Sans", Arial, Helvetica, sans-serif;
--font-default: 'DM Sans', Arial, Helvetica, sans-serif;
--font-slab: var(--font-default);
--modal-duration: 0.8s;
}
Expand All @@ -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;
Expand All @@ -35,10 +35,10 @@ img {
margin: 3.5%;
}
.header-logo {
float: left;
float: left;
}
.main-navbar {
float: right;
float: right;
}
.topnav a {
float: left;
Expand Down Expand Up @@ -69,15 +69,19 @@ img {
}

@media screen and (max-width: 768px) {
.topnav a {display: none;}
.topnav a {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
Expand All @@ -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%;
Expand All @@ -111,8 +115,6 @@ main {
margin: 1px 20px 15px;
border-radius: 2rem;
text-align: justify;


}

.modal-btn {
Expand Down Expand Up @@ -183,6 +185,44 @@ main {
padding-top: 10px;
}

/* Valid message */

.container-validMessage {
height: 650px;
display: none;
}

#text-validMessage {
display: none;
position: absolute;
font-size: 2.25rem;
color: white;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
line-height: 1.8;
}

#valid-btn-close {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
background: #fe142f;
display: none;
margin: 0 auto;
border-radius: 7px;
font-size: 1rem;
padding: 12px 82px;
color: #fff;
cursor: pointer;
border: 0;
}

/* Modal Content */

.modal-body {
padding: 15px 8%;
margin: 15px auto;
Expand Down Expand Up @@ -220,10 +260,10 @@ input {
opacity: 0;
transition: 0.3s;
}
.formData[data-error-visible="true"]::after {
.formData[data-error-visible='true']::after {
opacity: 1;
}
.formData[data-error-visible="true"] .text-control {
.formData[data-error-visible='true'] .text-control {
border: 2px solid #e54858;
}
/*
Expand Down Expand Up @@ -255,7 +295,7 @@ input[data-error]::after {
}
.checkbox-label .checkbox-icon::after,
.checkbox2-label .checkbox-icon::after {
content: "";
content: '';
width: 13px;
height: 13px;
background-color: #279e7a;
Expand Down Expand Up @@ -310,7 +350,7 @@ input[data-error]::after {
.close:after {
position: absolute;
left: 15px;
content: " ";
content: ' ';
height: 33px;
width: 3px;
background-color: #fff;
Expand Down Expand Up @@ -351,7 +391,7 @@ input[data-error]::after {
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
content: '';
top: 10px;
right: 13px;
width: 11px;
Expand Down Expand Up @@ -423,7 +463,7 @@ input[data-error]::after {
min-width: 424px;
}
.hero-content::after {
content: "";
content: '';
width: 100%;
height: 100%;
background: #232323;
Expand Down Expand Up @@ -526,4 +566,3 @@ footer {
opacity: 1;
}
}

Loading