Feat: Fonctionnalité d'ajout d'un article par formulaire #5

pierrickmartinet · Mar 29, 2021 · d87879c · d87879c
1 parent 1be6df7
commit d87879c
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -39,11 +39,11 @@ <h2 class="textWhite titleFont">Javascript Project</h2>
         <div class="dropdown closed">
             <h2 class="icon">Menu<span>∆</span></h2>
             <ul class="menu">
-              <li><a href="index.html">Accueil</a></li>
-              <li><a href="gallerie.html">Gallerie</a></li>
-              <li><a href="jeu.html">Jeu</a></li>
+                <li><a href="index.html">Accueil</a></li>
+                <li><a href="gallerie.html">Gallerie</a></li>
+                <li><a href="jeu.html">Jeu</a></li>
             </ul>
-          </div>
+        </div>
 
     </header>
 
@@ -52,18 +52,37 @@ <h2 class="icon">Menu<span>∆</span></h2>
         <h1 id="titleJavascriptProject">Accueil</h1>
 
         <!-- Carrousel d'image -->
-<div class="fotorama" data-transition="slide" data-loop="true" data-autoplay="3000">
-    <img src="images/chuckjoke1.jpg">
-    <img src="images/chuckjoke3.jpg">
-    <img src="images/chuckjoke5.jpg">
-    <img src="images/chuckjoke7.jpg">
-    <img src="images/chuckjoke8.jpg">
-  </div>
+        <div class="fotorama" data-transition="slide" data-loop="true" data-autoplay="3000">
+            <img src="images/chuckjoke1.jpg">
+            <img src="images/chuckjoke3.jpg">
+            <img src="images/chuckjoke5.jpg">
+            <img src="images/chuckjoke7.jpg">
+            <img src="images/chuckjoke8.jpg">
+        </div>
+
+
+        <!-- Formulaire d'ajout de blague -->
+        <div id="form">
+            <h2 class="form titleFont">Poste ta blague !</h2>
+            <form id="formulaire">
+                <div class="form">
+                    <input type="text" name="name" id="name" placeholder="Enter your name">
+                </div>
+                <div class="form">
+                    <textarea name="joke" id="joke" placeholder="Enter your joke" rows="7" cols="50"></textarea>
+                </div>
+                <div class="form">
+                    <input type="submit" value="Envoyer">
+                </div>
+            </form>
+        </div>
 
 
         <!-- Icone rafraichir la page -->
         <a href="index.html"><img id="refreshingIcon" src="images/refreshing.svg"
                 alt="Bouton rafraichir les blagues"></a>
+
+
         <!-- Div contenant les blagues appellé depuis l'API -->
         <div id="feed">
         </div>

diff --git a/scriptIndex.js b/scriptIndex.js
@@ -1,7 +1,7 @@
 $(document).ready(function () {
     console.log('Je peux maintenant écrire du code jQuery');
 
-    
+
     // Appelle et traitement API par requête Ajax
 
     $.getJSON("http://api.icndb.com/jokes/random/20")
@@ -13,11 +13,7 @@ $(document).ready(function () {
             let data = response;
             console.log(data);
 
-            while (index < data.value.length) {
-                // Récupère dans l'objet data la propriété joke, la place dans une div et place cette div dans la div "feed"
-                $('<div class="blagues"></div>').append(data.value[index].joke).prependTo('#feed');
-                index += 1;
-            }
+            createJoke(index, data);
 
         })
 
@@ -32,6 +28,14 @@ $(document).ready(function () {
         });
 
 
+    //Fonction d'affichage des articles dans le DOM
+    function createJoke(index, data) {
+        while (index < data.value.length) {
+            // Récupère dans l'objet data la propriété joke, la place dans une div et place cette div dans la div "feed"
+            $('<div class="blagues"></div>').append(data.value[index].joke).prependTo('#feed');
+            index += 1;
+        }
+    }
 
     // Menu dropDown
 
@@ -40,11 +44,31 @@ $(document).ready(function () {
 
     // Au clic si fermé: ouvre sinon ferme
     dropdown.addEventListener('click', (e) => {
+        console.log(dropdown.classList);
         if (dropdown.classList.contains('closed')) {
             dropdown.classList.remove('closed')
         } else {
             dropdown.classList.add('closed')
         }
+
     })
 
-});
+
+    // Formulaire dynamique
+
+    // Lélément form du bloc HTML éxécutera cette action (la fonction(e)) lors de l'envoi
+    form.onsubmit = function (e) {
+        // preventDefault permet d'annuler le rechargement de la page par défaut du bouton envoyer du formulaire
+        e.preventDefault();
+        console.log(e);
+        // la variable name prend pour valeur la valeur de l'input du DOM avec l'id name
+        let name = document.getElementById('name').value;
+        // la variable joke prend pour valeur la valeur de l'input du DOM avec l'id joke 
+        let joke = document.getElementById('joke').value;
+        // les variables name et joke sont insérés dans le DOM avec les autres blagues
+        $('<div class="blagues">'+ '<div>' + name + '</div>' + '<div>' + joke + '</div>' + '</div>').prependTo('#feed');
+
+    }
+
+});
+
diff --git a/style.css b/style.css
@@ -89,6 +89,7 @@ main{
     border-radius: 20px;
 }
 
+
 /* Caroussel */
 
 .fotorama{
@@ -139,3 +140,20 @@ justify-content: center;
   .dropdown.closed .icon span {
     transform: rotate(180deg);
   }
+
+
+/* Formulaire */
+
+.form{
+  display: flex;
+  justify-content: center;
+  padding: 5px;
+}
+
+#form{
+  border: 4px solid;
+  border-radius: 50px;
+  background-color: #CCDAD1;
+  margin: 20px 200px;
+  padding: 10px 0px;
+}