OpenClassrooms-Student-Center · getsu7 · Mar 29, 2024 · Mar 29, 2024 · Mar 29, 2024 · Apr 9, 2024
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.idea
+node_modules
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+build/*
+node_modules/*
+.sass-cache
+assets
+package-lock.json
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+    "tabWidth": 2,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "printWidth": 120,
+    "htmlWhitespaceSensitivity": "ignore",
+    "endOfLine": "auto" 
+}
diff --git a/README.md b/README.md
@@ -3,3 +3,7 @@
 2. Il est conseillé d'utiliser VisualStudio Code et vous pouvez utiliser Docker, mais ce n'est pas obligatoire ;
 3. Il n'y a aucune dépendance ;
 4. Vous ne devez utiliser que du CSS personnalisé et du JavaScript pur, sans jQuery, Bootstrap ou autre librairie.
+
+## Liens utils:
+- Maquette projet: https://www.figma.com/file/B7NKBDvSI18uoMLJgpnh48/UI-Design-GameOn-FR?type=design&node-id=106-630&mode=design&t=Kk4ZVcfkSdpHEvwg-0
+- RAF: https://github.com/OpenClassrooms-Student-Center/GameOn-website-FR/issues
diff --git a/starterOnly/Logo.png → assets/images/Logo.png b/starterOnly/Logo.png → assets/images/Logo.png
diff --git a/starterOnly/bg_img.jpg → assets/images/bg_img.jpg b/starterOnly/bg_img.jpg → assets/images/bg_img.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,150 @@
+<!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="style.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="assets/images/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>
+    </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="assets/images/bg_img.jpg" alt="img" />
+        </div>
+        <button class="btn-signup modal-btn">je m'inscris</button>
+      </div>
+
+      <div class="form bground">
+        <div class="content">
+          <span class="close close-form-modal"></span>
+          <div class="modal-body">
+            <form name="reserve">
+              <div class="formData">
+                <label for="firstname">Prénom</label>
+                <input class="text-control form-field" type="text" id="firstname" name="firstname" />
+                <p class="form-error firstname-error">Veuillez entrer 2 caractères ou plus pour le champ du prénom.</p>
+              </div>
+              <div class="formData">
+                <label for="lastname">Nom</label>
+                <input class="text-control form-field" type="text" id="lastname" name="lastname" />
+                <p class="form-error lastname-error">Veuillez entrer 2 caractères ou plus pour le champ du nom.</p>
+              </div>
+              <div class="formData">
+                <label for="email">E-mail</label>
+                <input class="text-control form-field" type="email" id="email" name="email" />
+                <p class="form-error email-error">Veuillez entrer une adresse mail valide.</p>
+              </div>
+              <div class="formData">
+                <label for="birthdate">Date de naissance</label>
+                <input class="text-control form-field" type="date" id="birthdate" name="birthdate" />
+                <p class="form-error birthdate-error">Vous devez entrer votre date de naissance valide.</p>
+              </div>
+              <div class="formData">
+                <label for="nbTournament">À combien de tournois GameOn avez-vous déjà participé ?</label>
+                <input
+                  type="number"
+                  class="text-control form-field"
+                  id="nbTournament"
+                  name="nbTournament"
+                />
+                <p class="form-error nbTournament-error">Vous devez entrer le nombre de tournois auquel vous avez participé.</p>
+              </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>
+                <p class="form-error location-error"></p>
+              </div>
+              <div class="formData">
+                <input class="checkbox-input" type="checkbox" id="termsOfUse" name="termsOfUse"/>
+                <label class="checkbox2-label" for="termsOfUse">
+                  <span class="checkbox-icon"></span>
+                  J'ai lu et accepté les conditions d'utilisation.
+                </label>
+                <p class="form-error termsOfUse-error"></p>
+
+                <input class="checkbox-input" type="checkbox" id="newsletter" name="newsletter" />
+                <label class="checkbox2-label" for="newsletter">
+                  <span class="checkbox-icon"></span>
+                  Je souhaite être prévenu des prochains évènements.
+                </label>
+                <p class="form-error newsletter-error"></p>
+              </div>
+              <input id="btn-submit" class="btn-submit-disable" type="submit" class="button" value="C'est parti" disabled />
+            </form>
+          </div>
+        </div>
+      </div>
+      <div class="success-modal bground">
+        <div class="content">
+          <span class="close close-success-modal"></span>
+          <div class="modal-body">
+            <p>Merci pour votre inscription!</p>
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer>
+      <p class="copyrights">Copyright 2014 - 2022, GameOn Inc.</p>
+    </footer>
+    <script src="/src/modal.js" type="module"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "gameon-website-fr",
+  "version": "1.0.0",
+  "description": "1. Forkez ce repo ; 2. Il est conseillé d'utiliser VisualStudio Code et vous pouvez utiliser Docker, mais ce n'est pas obligatoire ; 3. Il n'y a aucune dépendance ; 4. Vous ne devez utiliser que du CSS personnalisé et du JavaScript pur, sans jQuery, Bootstrap ou autre librairie.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/getsu7/GameOn-website-FR.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/getsu7/GameOn-website-FR/issues"
+  },
+  "homepage": "https://github.com/getsu7/GameOn-website-FR#readme",
+  "devDependencies": {
+    "prettier": "3.2.5"
+  }
+}
diff --git a/src/formStore.js b/src/formStore.js
@@ -0,0 +1,11 @@
+// form state
+export const formState = {
+    firstname: { value: '', valid: false },
+    lastname: { value: '', valid: false },
+    email: { value: '', valid: false },
+    birthdate: { value: '', valid: false },
+    nbTournament: { value: '', valid: false },
+    location: { value: '', valid: false },
+    newsletter: { value: false, valid: true },
+    termsOfUse: { value: false, valid: false }
+  };