Skip to content

Commit

Permalink
Fixes OpenClassrooms-Student-Center#2: add form validation
Browse files Browse the repository at this point in the history
  • Loading branch information
@nrundstadler
nrundstadler committed Oct 3, 2024
1 parent 80ea7e8 commit 1c8f908
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 153 deletions.
189 changes: 49 additions & 140 deletions starterOnly/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,219 +1,128 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fr">
<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"
/>
<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>
<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" />
</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">
<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>
<form name="reserve" action="index.html" novalidate>
<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>Nom</label><br>
<input
class="text-control"
type="text"
id="last"
name="last"
/><br>
<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>E-mail</label><br>
<input
class="text-control"
type="email"
id="email"
name="email"
/><br>
<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>Date de naissance</label><br>
<input
class="text-control"
type="date"
id="birthdate"
name="birthdate"
/><br>
<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>À 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">
<input
class="checkbox-input"
type="radio"
id="location1"
name="location"
value="New York"
/>
<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"
/>
<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"
/>
<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"
/>
<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"
/>
<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"
/>
<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>
<div class="formData">
<input class="checkbox-input" type="checkbox" id="checkbox1" required />
<label class="checkbox2-label" for="checkbox1">
<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.
</label>
<br>
<br />
</div>
<input
class="btn-submit"
type="submit"
class="button"
value="C'est parti"
/>
<input class="btn-submit" type="submit" value="C'est parti" />
</form>
</div>
</div>
</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
25 changes: 13 additions & 12 deletions starterOnly/modal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 @@ -526,4 +528,3 @@ footer {
opacity: 1;
}
}

Loading

0 comments on commit 1c8f908

Please sign in to comment.