Skip to content

Issue 5 correct display errors #421

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
inesder wants to merge 28 commits into
base: master
Choose a base branch
from
Open

Issue 5 correct display errors #421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
09cc986
close modal by clicking on X, fixes #1
inesder Feb 13, 2024
b6ef014
fix file not found error
inesder Feb 13, 2024
86922a7
Merge pull request #1 from inesder/issue-1-close-modal
inesder Feb 15, 2024
67a186c
implement form input #2
inesder Feb 15, 2024
96d7b9a
Merge branch 'master' into implement-form-input-issue-2
inesder Feb 15, 2024
9690928
Merge pull request #2 from inesder/implement-form-input-issue-2
inesder Feb 15, 2024
86a3902
add letters only regex for firstname
inesder Feb 19, 2024
8c10365
Merge branch 'implement-form-input-issue-2' of https://github.com/ine…
inesder Feb 19, 2024
f798f24
add only letters regex to lastname
inesder Feb 19, 2024
376a59d
add comments
inesder Feb 19, 2024
f5055f5
add error message #3
inesder Feb 19, 2024
235f48f
Merge pull request #3 from inesder/implement-form-input-issue-2
inesder Feb 19, 2024
536d17e
Merge branch 'master' into add-validation-error-message-issue-3
inesder Feb 19, 2024
27f5813
Merge pull request #4 from inesder/add-validation-error-message-issue-3
inesder Feb 19, 2024
a247e69
add validation by field
inesder Feb 19, 2024
f0750a3
Merge branch 'add-validation-error-message-issue-3' of https://github…
inesder Feb 19, 2024
faea76f
Merge pull request #5 from inesder/add-validation-error-message-issue-3
inesder Feb 19, 2024
10088b7
add confirmation message for form
inesder Feb 20, 2024
9a9dfe1
Merge pull request #6 from inesder/add-confirmation-message-issue-4
inesder Feb 20, 2024
2931db8
fix align of error message
inesder Feb 20, 2024
b9bb902
Style adjustments for home page
inesder Feb 21, 2024
af56367
fix validation and syntax
inesder Feb 22, 2024
fceae18
Merge pull request #7 from inesder/master
inesder Feb 22, 2024
b571c31
fix reinitialisation of form after confirmation
inesder Feb 22, 2024
436c85e
optimisation of code
inesder Feb 22, 2024
9e79066
fix double button in modal
inesder Feb 22, 2024
6be57ea
add error message under the first checkbox
inesder Feb 22, 2024
0896343
responsive
inesder Feb 26, 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
314 changes: 114 additions & 200 deletions starterOnly/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
<!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
href="https://fonts.googleapis.com/css?family=DM+Sans"
rel="stylesheet"
/>
</head>
<body>
<div class="topnav" id="myTopnav">
<div class="header-logo">

<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 href="https://fonts.googleapis.com/css?family=DM+Sans" rel="stylesheet" />
</head>

<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>
Expand All @@ -27,194 +25,110 @@
<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>
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 !
</p>
<button class="btn-signup modal-btn">
je m'inscris
</button>
</div>
<div class="hero-img">
<img src="./bg_img.jpg" alt="img" />
</div>
</div>
<main>
<div class="hero-section">
<div class="hero-content">
<h1 class="hero-headline">
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 !
</p>
<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">
<form
name="reserve"
action="index.html"
method="get"
onsubmit="return validate();"
>
<div
class="formData">
<label>Prénom</label><br>
<input
class="text-control"
type="text"
id="first"
name="first"
minlength="2"
/><br>
</div>
<div
class="formData">
<label>Nom</label><br>
<input
class="text-control"
type="text"
id="last"
name="last"
/><br>
</div>
<div
class="formData">
<label>E-mail</label><br>
<input
class="text-control"
type="email"
id="email"
name="email"
/><br>
</div>
<div
class="formData">
<label>Date de naissance</label><br>
<input
class="text-control"
type="date"
id="birthdate"
name="birthdate"
/><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>
<p class="text-label">A quel tournoi souhaitez-vous participer cette année ?</p>
<div
class="formData">
<input
class="checkbox-input"
type="radio"
id="location1"
name="location"
value="New York"
/>
<label class="checkbox-label" for="location1">
<span class="checkbox-icon"></span>
New York</label
>
<input
class="checkbox-input"
type="radio"
id="location2"
name="location"
value="San Francisco"
/>
<label class="checkbox-label" for="location2">
<span class="checkbox-icon"></span>
San Francisco</label
>
<input
class="checkbox-input"
type="radio"
id="location3"
name="location"
value="Seattle"
/>
<label class="checkbox-label" for="location3">
<span class="checkbox-icon"></span>
Seattle</label
>
<input
class="checkbox-input"
type="radio"
id="location4"
name="location"
value="Chicago"
/>
<label class="checkbox-label" for="location4">
<span class="checkbox-icon"></span>
Chicago</label
>
<input
class="checkbox-input"
type="radio"
id="location5"
name="location"
value="Boston"
/>
<label class="checkbox-label" for="location5">
<span class="checkbox-icon"></span>
Boston</label
>
<input
class="checkbox-input"
type="radio"
id="location6"
name="location"
value="Portland"
/>
<label class="checkbox-label" for="location6">
<span class="checkbox-icon"></span>
Portland</label
>
</div>

<div
class="formData">
<input
class="checkbox-input"
type="checkbox"
id="checkbox1"
checked
/>
<label class="checkbox2-label" for="checkbox1" required>
<span class="checkbox-icon"></span>
J'ai lu et accepté les conditions d'utilisation.
</label>
<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.
</label>
<br>
</div>
<input
class="btn-submit"
type="submit"
class="button"
value="C'est parti"
/>
</form>
</div>
<div class="hero-img">
<img src="./bg_img.jpg" alt="img" />
</div>
<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">
<form name="reserve" action="index.html" method="get">
<div class="formData">
<label for="first">Prénom</label><br>
<input class="text-control" type="text" id="first" name="first" minlength="2" /><br>
</div>
<div class="formData">
<label for="last">Nom</label><br>
<input class="text-control" type="text" id="last" name="last" /><br>
</div>
<div class="formData">
<label for="email">E-mail</label><br>
<input class="text-control" type="email" id="email" name="email" /><br>
</div>
<div class="formData">
<label for="birthdate">Date de naissance</label><br>
<input class="text-control" type="date" id="birthdate" name="birthdate" /><br>
</div>
<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" id="formData-location">
<input class="checkbox-input" type="radio" id="location1" name="location" value="New York" />
<label class="checkbox-label" for="location1">
<span class="checkbox-icon"></span>
New York</label>
<input class="checkbox-input" type="radio" id="location2" name="location" value="San Francisco" />
<label class="checkbox-label" for="location2">
<span class="checkbox-icon"></span>
San Francisco</label>
<input class="checkbox-input" type="radio" id="location3" name="location" value="Seattle" />
<label class="checkbox-label" for="location3">
<span class="checkbox-icon"></span>
Seattle</label>
<input class="checkbox-input" type="radio" id="location4" name="location" value="Chicago" />
<label class="checkbox-label" for="location4">
<span class="checkbox-icon"></span>
Chicago</label>
<input class="checkbox-input" type="radio" id="location5" name="location" value="Boston" />
<label class="checkbox-label" for="location5">
<span class="checkbox-icon"></span>
Boston</label>
<input class="checkbox-input" type="radio" id="location6" name="location" value="Portland" />
<label class="checkbox-label" for="location6">
<span class="checkbox-icon"></span>
Portland</label>
</div>
<div class="formData">
<input class="checkbox-input" type="checkbox" id="checkbox1" checked />
<label class="checkbox2-label" for="checkbox1" required>
<span class="checkbox-icon"></span>
J'ai lu et accepté les conditions d'utilisation.
</label>
<br>
</div>
<div class="formData">
<input class="checkbox-input" type="checkbox" id="checkbox2" />
<label class="checkbox2-label" for="checkbox2">
<span class="checkbox-icon"></span>
Je souhaite être prévenu des prochains évènements.
</label>
<br>
</div>
<input class="btn-submit" type="submit" class="button" value="C'est parti" />
</form>
</div>
</div>
</main>
<footer>
<p class="copyrights">
Copyright 2014 - 2022, GameOn Inc.
</p>
</footer>
<script src="modal.js"></script>
</body>
</html>
</div>
</main>
<footer>
<p class="copyrights">
Copyright 2014 - 2022, GameOn Inc.
</p>
</footer>
<script src="modal.js"></script>
</body>

</html>
Loading