Skip to content

Mise en place du code javascript #437

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
Said2000-0ss wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Mise en place du code javascript #437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc5540f
Mise-en-place-de-la-liaison-entre-les-labels-et-les-for
Said2000-0ss Apr 5, 2024
71bbd60
finalisation
Said2000-0ss Apr 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
6 changes: 6 additions & 0 deletions desktop.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
[.ShellClassInfo]
IconResource=C:\WINDOWS\System32\SHELL32.dll,307
[ViewState]
Mode=
Vid=
FolderType=Generic
341 changes: 145 additions & 196 deletions starterOnly/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
<!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 rel="stylesheet" href="https://fonts.googleapis.com/css?family=DM+Sans">
<script src="modal.js" defer></script> <!--J'ai mis le script dans le head avec le mot clé defer-->
</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 +27,143 @@
<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>

<!-- J'ai effacé une balise div fermante-->
<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>
<!--<label class="said"></label>--><!--j'ai cree ce label pour mettre des elements dedans-->
</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><!--ceci represente la croix-->
<div class="modal-body">
<form name="reserve" action="index.html" method="get" >
<div class="formData">
<label for="first">Prénom</label><br><!--ajout de for="first"-->
<input class="text-control" type="text" id="first" name="first" minlength="2" placeholder="Veuillez saisir votre prénom" required><br>
</div>
<!-- creation d'une div divPrenom dans lequel on mettra le texte d'erreur -->
<div style="color:red; font-size: 80%;" id="divPrenom"></div>
<div class="formData">
<label for="last">Nom</label><br><!--ajout de for="last"-->
<input class="text-control" type="text" id="last" name="last" minlength="2" placeholder="Veuillez saisir votre nom"required><br>
</div>
<!-- creation d'une div divNom dans lequel on mettra le texte d'erreur -->
<div id="divNom" style="color:red; font-size: 80%;" ></div>
<div class="formData">
<label for="email">E-mail</label><br><!--ajout for="email"-->
<input class="text-control" type="email" id="email" name="email" placeholder="Veuillez saisir votre email" required><br>
</div>
<!-- creation d'une div divEmail dans lequel on mettra le texte d'erreur -->
<div style="color:red ; font-size: 80%;" id="divEmail"></div>
<div class="formData">
<label for="birthdate">Date de naissance</label><br><!--ajout de for="birthdate"-->
<input class="text-control" type="date" id="birthdate" name="birthdate" required><br>
</div>
<!-- creation d'une div divDateDenaissance dans lequel on mettra le texte d'erreur -->
<div id="divDateDenaissance"></div>
<div class="formData">
<label for="quantity">À combien de tournois GameOn avez-vous déjà participé ?</label><br><!--for="quantity"-->
<input type="number" class="text-control" id="quantity" name="quantity" min="0" max="99" placeholder="Veuillez saisir un chiffre" required>
</div>
<div id="divQuantite"></div>
<!-- creation d'une div divPrenom dans lequel on mettra le texte d'erreur -->
<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" required>
<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" checked>
<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 class="formData">
<input class="checkbox-input" type="checkbox" id="checkbox1" checked disabled >
<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 souhaite être prévenu des prochains évènements. <!--Modifications de la phrase-->
</label>
<br>
</div>
<input class="btn-submit" type="submit" class= "button" value="C'est parti" /><!--J'ai mis btn-submit et button dans class-->
</form>
</div>
</div>
</div>
<!-- ================================== MA FICHE INSCRIPTION REUSSIE ===================================================================== -->
<div class="bground1">
<div class="content"><div class="close1">
<span class="close"></span><!--ceci represente la croix--></div>
<div class="modal-body">
<!-- <br><br><br><br><br><br><br><br> -->
<div class="container">
<label style="align-items: center;">Merci pour votre inscription</label><br><!--ajout de for="first"-->
</div>


<!-- <br><br><br><br><br><br><br><br> -->
<!-- <input class="btn-submit" class="btnSaid" type="submit" class= "button" value="Fermer" /> J'ai mis btn-submit et button dans class-->
<!-- <input class="btnSaid" type="submit" class= "button" value="Fermer" />J'ai mis btn-submit et button dans class -->
<input class="btn-submit btnSaid button" type="submit" value="Fermer" />

</div>
</div>
</main>
<footer>
<p class="copyrights">
Copyright 2014 - 2022, GameOn Inc.
</p>
</footer>
<script src="modal.js"></script>
</body>
</html>
</div>
</main>
<footer>
<div class="resultat"></div><!--ici , s'affichera le resultat de mon inscription-->
<p class="copyrights">
Copyright 2014 - 2022, GameOn Inc.
</p>

</footer>

</body>

</html>
Loading