Skip to content

Commit

Permalink
TODO : fermer la modale OpenClassrooms-Student-Center#1 - Done
Browse files Browse the repository at this point in the history
  • Loading branch information
@GregoireBa
GregoireBa committed Jan 10, 2024
1 parent 380d151 commit a25de1e
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 197 deletions.
309 changes: 112 additions & 197 deletions starterOnly/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +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>
Expand All @@ -27,194 +26,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="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"
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="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="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>
</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>
8 changes: 8 additions & 0 deletions starterOnly/modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ function editNav() {

// DOM Elements
const modalbg = document.querySelector(".bground");
const closmodalbg = document.querySelector(".close")
const modalBtn = document.querySelectorAll(".modal-btn");
const formData = document.querySelectorAll(".formData");

Expand All @@ -19,5 +20,12 @@ modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
function launchModal() {
modalbg.style.display = "block";
}
// Écoute du click sur la class .close
closmodalbg.addEventListener("click", closeModal);

// Je change mon display si j'ai cliqué sur la class .close
function closeModal() {
modalbg.style.display = "none";
}


0 comments on commit a25de1e

Please sign in to comment.