Skip to content

Commit 8b415c5

Browse files
sedomusedomu
committed
Implémenter entrées du formulaire #2 - partial
part 1, correcting errors done (w3c compliant + no message in the console - gecko, chromium, webkit)
1 parent 2d2d49c commit 8b415c5

File tree

6 files changed

+73
-43
lines changed

6 files changed

+73
-43
lines changed

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22

33
OpenClassrooms - dév JS react - projet 4 - gameon
44

5+
## Version en ligne
6+
Branche `Master` publiée sur [GitHub Pages](https://sedomu.github.io/GameOn-website-FR/)
7+
58
## Projet GameOn
69
1. Forkez ce repo ;
710
2. Il est conseillé d'utiliser VisualStudio Code et vous pouvez utiliser Docker, mais ce n'est pas obligatoire ;

‎starterOnly/devOverlayCss.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* only for development purposes - no to be deployed */
2+
3+
.bground{
4+
display: block;
5+
}

‎starterOnly/favicon.ico

8.32 KB
Binary file not shown.

‎starterOnly/index.html

+43-41
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,36 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
4+
<meta charset="utf-8" >
55
<title>Reservation</title>
6-
<meta name="viewport" content="width=device-width,initial-scale=1" />
7-
<link rel="stylesheet" href="modal.css" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1" >
7+
<link rel="stylesheet" href="modal.css" >
8+
<!-- DEVELOPER OVERLAY CSS - TO BE DELETED -->
9+
<link rel="stylesheet" href="devOverlayCss.css" >
810
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
911
<link
1012
href="https://fonts.googleapis.com/css?family=DM+Sans"
1113
rel="stylesheet"
12-
/>
14+
>
15+
<link rel="icon" href="./favicon.ico">
1316
</head>
1417
<body>
1518
<div class="topnav" id="myTopnav">
1619
<div class="header-logo">
17-
<img alt="logo" src="Logo.png" width="auto" height="auto" />
18-
</div>
19-
<div class="main-navbar">
20-
21-
<a href="#" class="active"><span>Accueil</span></a>
22-
<a href="#"><span>Détails de l'évènement</span></a>
23-
<a href="#"><span>À propos</span></a>
24-
<a href="#"><span>Contact</span></a>
25-
<a href="#"><span>Évènements passés</span></a>
26-
<a href="javascript:void(0);" class="icon" onclick="editNav()">
27-
<i class="fa fa-bars"></i>
28-
</a>
29-
</div>
20+
<img alt="logo" src="Logo.png">
21+
</div>
22+
<div class="main-navbar">
23+
<a href="#" class="active"><span>Accueil</span></a>
24+
<a href="#"><span>Détails de l'évènement</span></a>
25+
<a href="#"><span>À propos</span></a>
26+
<a href="#"><span>Contact</span></a>
27+
<a href="#"><span>Évènements passés</span></a>
28+
<a href="javascript:void(0);" class="icon" onclick="editNav()">
29+
<svg class="burger-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
30+
</a>
31+
</div>
3032
</div>
31-
</div>
33+
3234
<main>
3335
<div class="hero-section">
3436
<div class="hero-content">
@@ -45,7 +47,7 @@ <h1 class="hero-headline">
4547
</button>
4648
</div>
4749
<div class="hero-img">
48-
<img src="./bg_img.jpg" alt="img" />
50+
<img src="./bg_img.jpg" alt="img" >
4951
</div>
5052
<button class="btn-signup modal-btn">
5153
je m'inscris
@@ -64,48 +66,48 @@ <h1 class="hero-headline">
6466
>
6567
<div
6668
class="formData">
67-
<label>Prénom</label><br>
69+
<label for="first">Prénom</label><br>
6870
<input
6971
class="text-control"
7072
type="text"
7173
id="first"
7274
name="first"
7375
minlength="2"
74-
/><br>
76+
><br>
7577
</div>
7678
<div
7779
class="formData">
78-
<label>Nom</label><br>
80+
<label for="last">Nom</label><br>
7981
<input
8082
class="text-control"
8183
type="text"
8284
id="last"
8385
name="last"
84-
/><br>
86+
><br>
8587
</div>
8688
<div
8789
class="formData">
88-
<label>E-mail</label><br>
90+
<label for="email">E-mail</label><br>
8991
<input
9092
class="text-control"
9193
type="email"
9294
id="email"
9395
name="email"
94-
/><br>
96+
><br>
9597
</div>
9698
<div
9799
class="formData">
98-
<label>Date de naissance</label><br>
100+
<label for="birthdate">Date de naissance</label><br>
99101
<input
100102
class="text-control"
101103
type="date"
102104
id="birthdate"
103105
name="birthdate"
104-
/><br>
106+
><br>
105107
</div>
106108
<div
107109
class="formData">
108-
<label>À combien de tournois GameOn avez-vous déjà participé ?</label><br>
110+
<label for="quantity">À combien de tournois GameOn avez-vous déjà participé ?</label><br>
109111
<input type="number" class="text-control" id="quantity" name="quantity" min="0" max="99">
110112
</div>
111113
<p class="text-label">A quel tournoi souhaitez-vous participer cette année ?</p>
@@ -117,7 +119,7 @@ <h1 class="hero-headline">
117119
id="location1"
118120
name="location"
119121
value="New York"
120-
/>
122+
>
121123
<label class="checkbox-label" for="location1">
122124
<span class="checkbox-icon"></span>
123125
New York</label
@@ -128,7 +130,7 @@ <h1 class="hero-headline">
128130
id="location2"
129131
name="location"
130132
value="San Francisco"
131-
/>
133+
>
132134
<label class="checkbox-label" for="location2">
133135
<span class="checkbox-icon"></span>
134136
San Francisco</label
@@ -139,7 +141,7 @@ <h1 class="hero-headline">
139141
id="location3"
140142
name="location"
141143
value="Seattle"
142-
/>
144+
>
143145
<label class="checkbox-label" for="location3">
144146
<span class="checkbox-icon"></span>
145147
Seattle</label
@@ -150,7 +152,7 @@ <h1 class="hero-headline">
150152
id="location4"
151153
name="location"
152154
value="Chicago"
153-
/>
155+
>
154156
<label class="checkbox-label" for="location4">
155157
<span class="checkbox-icon"></span>
156158
Chicago</label
@@ -161,7 +163,7 @@ <h1 class="hero-headline">
161163
id="location5"
162164
name="location"
163165
value="Boston"
164-
/>
166+
>
165167
<label class="checkbox-label" for="location5">
166168
<span class="checkbox-icon"></span>
167169
Boston</label
@@ -172,7 +174,7 @@ <h1 class="hero-headline">
172174
id="location6"
173175
name="location"
174176
value="Portland"
175-
/>
177+
>
176178
<label class="checkbox-label" for="location6">
177179
<span class="checkbox-icon"></span>
178180
Portland</label
@@ -186,25 +188,25 @@ <h1 class="hero-headline">
186188
type="checkbox"
187189
id="checkbox1"
188190
checked
189-
/>
190-
<label class="checkbox2-label" for="checkbox1" required>
191+
required
192+
>
193+
<label class="checkbox2-label" for="checkbox1">
191194
<span class="checkbox-icon"></span>
192195
J'ai lu et accepté les conditions d'utilisation.
193196
</label>
194197
<br>
195-
<input class="checkbox-input" type="checkbox" id="checkbox2" />
198+
<input class="checkbox-input" type="checkbox" id="checkbox2" >
196199
<label class="checkbox2-label" for="checkbox2">
197200
<span class="checkbox-icon"></span>
198-
Je Je souhaite être prévenu des prochains évènements.
201+
Je souhaite être prévenu des prochains évènements.
199202
</label>
200203
<br>
201204
</div>
202205
<input
203-
class="btn-submit"
206+
class="btn-submit button"
204207
type="submit"
205-
class="button"
206208
value="C'est parti"
207-
/>
209+
>
208210
</form>
209211
</div>
210212
</div>

‎starterOnly/modal.css

+21-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ body {
1414
margin: 0;
1515
display: flex;
1616
flex-direction: column;
17-
background-image: url("background.png");
1817
font-family: var(--font-default);
1918
font-size: 18px;
2019
max-width: 1300px;
@@ -99,7 +98,27 @@ img {
9998
display: block;
10099
margin-top: -15px;
101100
}
102-
}
101+
}
102+
103+
/* Integrating font-awesome asset instead of relying on CDN */
104+
/* Avoid loading entire library just for 1 occurence + avoiding console errors on unused glyphs */
105+
a.icon {
106+
display: flex;
107+
justify-content: center;
108+
align-items: center;
109+
width: 45px;
110+
height: 45px;
111+
}
112+
113+
.topnav.responsive .burger-menu,
114+
a.icon:hover > .burger-menu {
115+
fill: #ffffff;
116+
}
117+
118+
.burger-menu {
119+
height: 20px;
120+
fill: #ff0000;
121+
}
103122

104123
main {
105124
font-size: 130%;

‎test.svg

+1
Loading

0 commit comments

Comments
 (0)