Merge pull request #36 from sadnxssdlm:Feature_Posts_JS_

fix heart count problem

Author: Sunnysmilen

assets/js/script.js

@@ -4,29 +4,26 @@ const menuHamburger = document.querySelector(".menu-hamburger");
 const navLinks = document.querySelector(".nav-links");
 
 menuHamburger.addEventListener("click", () => {
-    navLinks.classList.toggle("mobile-menu");
+  navLinks.classList.toggle("mobile-menu");
 });
 //
 
 /*SLIDER */
 
 const slide = [
-    "slider1.jpg",
-    "slider2.avif",
-    "slider3.jpg",
-    "slider4.avif",
-    "slider5.jpg",
-    "slider6.avif",
-    "slider7.jpg",
-    "slider8.jpg",
-    "slider9.jpg"
+  "slider1.jpg",
+  "slider2.avif",
+  "slider3.jpg",
+  "slider4.avif",
+  "slider5.jpg",
+  "slider6.avif",
 ];
 let index = 0;
 function changeSlide(sens) {
-    index = index + sens;
-    if (index > slide.length - 1) index = 0;
-    if (index < 0) index = slide.length - 1;
-    document.getElementById("slider1").src = "assets/img/images/" + slide[index];
+  index = index + sens;
+  if (index > slide.length - 1) index = 0;
+  if (index < 0) index = slide.length - 1;
+  document.getElementById("slider1").src = "assets/img/images/" + slide[index];
 }
 
 setInterval("changeSlide(1)", 4000);
@@ -40,54 +37,50 @@ const closeBtn = document.querySelector(".close-btn");
 
 // Ouvrir le modal
 stories.forEach((story) => {
-    story.addEventListener("click", () => {
-        modalStory.src = story.src;
-        storiesModal.style.display = "flex";
-        closeBtn.style.display = "block";
-
-        // Vu (retire les contours)
-        story.classList.add("viewed");
-    });
+  story.addEventListener("click", () => {
+    modalStory.src = story.src;
+    storiesModal.style.display = "flex";
+    closeBtn.style.display = "block";
+
+    // Vu (retire les contours)
+    story.classList.add("viewed");
+  });
 });
 
 // Fermer le modal
 closeBtn.addEventListener("click", () => {
-    storiesModal.style.display = "none";
-    closeBtn.style.display = "none";
+  storiesModal.style.display = "none";
+  closeBtn.style.display = "none";
 });
 
 // Quand tu cliques en dehors du model il se ferme
 storiesModal.addEventListener("click", (e) => {
-    if (e.target === storiesModal) {
-        storiesModal.style.display = "none";
-        closeBtn.style.display = "none";
-    }
+  if (e.target === storiesModal) {
+    storiesModal.style.display = "none";
+    closeBtn.style.display = "none";
+  }
 });
 
 /*POSTS */
 
 let heart1 = document.getElementById("btnh1");
 function Toggle1() {
-    if (heart1.style.color === "red") {
-    } else {
-        heart1.style.color = "red";
-    }
+  if (heart1.style.color === "grey") {
+  } else {
+    heart1.style.color = "red";
+  }
 }
-
 let like = document.getElementById("like");
-let count = 0;
+let count = 1;
+let count1 = 6;
+let count2 = 3;
+let count3 = 10;
 
 function countClicks1() {
-    if ((count1 = count + 1)) {
-        count = count + 1;
-    }
-    console.log((like.innerHTML = count));
-}
-
-if (heart1.style.color === "red") {
-    heart1.style.color = "grey";
-} else {
-    heart1.style.color = "red";
+  if ((count = count1 + 1)) {
+    count1 = count1 + 1;
+  }
+  console.log((like.innerHTML = count));
 }
 
 /*Intéraction post de commentaire*/
@@ -98,37 +91,38 @@ const selectEl = favDialog.querySelector("input");
 const confirmBtn = favDialog.querySelector("#confirmBtn");
 
 showButton.addEventListener("click", () => {
-    favDialog.showModal();
+  favDialog.showModal();
 });
 
 selectEl.addEventListener("newpost", () => {
-    confirmBtn.value = selectEl.value;
+  confirmBtn.value = selectEl.value;
 });
 
 favDialog.addEventListener("close", () => {
-    outputBox.value =
-        favDialog.returnValue === "default"
-            ? "Pas de valeur retournée."
-            : `${favDialog.returnValue}.`;
+  outputBox.value =
+    favDialog.returnValue === "default"
+      ? "Pas de valeur retournée."
+      : `${favDialog.returnValue}.`;
 });
 confirmBtn.addEventListener("click", (event) => {
-    event.preventDefault();
-    favDialog.close(selectEl.value);
+  event.preventDefault();
+  favDialog.close(selectEl.value);
 });
 
 /*like*/
 let heart2 = document.getElementById("btnh2");
 function Toggle2() {
-    if (heart2.style.color === "red") {
-    } else {
-        heart2.style.color = "red";
-    }
+  if (heart2.style.color === "grey") {
+  } else {
+    heart2.style.color = "red";
+  }
 }
+
 function countClick2() {
-    if ((count2 = count + 1)) {
-        count = count + 1;
-    }
-    console.log((heartCount.innerHTML = count));
+  if ((count = count2 + 1)) {
+    count2 = count2 + 1;
+  }
+  console.log((heartCount.innerHTML = count));
 }
 
 const showButton2 = document.getElementById("showDialog2");
@@ -138,34 +132,34 @@ const text = favDialog.querySelector("input2");
 const confirmBtn2 = favDialog.querySelector("#confirmBtn2");
 
 showButton2.addEventListener("click", () => {
-    favDialog2.showModal();
+  favDialog2.showModal();
 });
 
 favDialog2.addEventListener("close", (e) => {
-    publish.value =
-        favDialog2.returnValue === "default"
-            ? "Pas de valeur retournée."
-            : `${favDialog2.returnValue}.`;
+  publish.value =
+    favDialog2.returnValue === "default"
+      ? "Pas de valeur retournée."
+      : `${favDialog2.returnValue}.`;
 });
 confirmBtn.addEventListener("click", (event) => {
-    event.preventDefault();
-    favDialog.close(selectEl.value);
+  event.preventDefault();
+  favDialog.close(selectEl.value);
 });
 
 /*like*/
 let heart3 = document.getElementById("btnh3");
 function Toggle3() {
-    if (heart3.style.color === "red") {
-    } else {
-        heart3.style.color = "red";
-    }
+  if (heart3.style.color === "grey") {
+  } else {
+    heart3.style.color = "red";
+  }
 }
 
 function countClick3() {
-    if ((count3 = count + 1)) {
-        count = count + 1;
-    }
-    console.log((Countheart.innerHTML = count));
+  if ((count = count3 + 1)) {
+    count3 = count3 + 1;
+  }
+  console.log((Countheart.innerHTML = count));
 }
 
 /*Commentaire à poster*/
@@ -176,45 +170,45 @@ const text3 = favDialog.querySelector("input3");
 const confirmBtn3 = favDialog.querySelector("#confirmBtn3");
 
 showButton3.addEventListener("click", () => {
-    favDialog3.showModal();
+  favDialog3.showModal();
 });
 
 favDialog3.addEventListener("close", (e) => {
-    outputBox3.value =
-        favDialog3.returnValue === "default"
-            ? "Pas de valeur retournée."
-            : `${favDialog.returnValue}.`;
+  outputBox3.value =
+    favDialog3.returnValue === "default"
+      ? "Pas de valeur retournée."
+      : `${favDialog.returnValue}.`;
 });
 
 /*WILDERSMSG */
 let comment = [
-    "La formation en alternance m'a permis d'avoir une première expérience professionnelle dans le développement web, de continuer à approfondir mes connaissances et d'apprendre des nouvelles notions pendant une année supplémentaire.",
-    "Même si on était en distanciel, on échangeait énormément, que ce soit avec nos camarades ou le formateur qui était vraiment pédagogue et présent pour nous à n'importe quel moment.",
-    "Allez chercher de la confiance auprès des autres apprenants avec vous, pour éviter ce syndrome de l'imposteur par lequel on est tous passés à un moment donné. Et surtout, accrochez-vous ! C'est très intense, mais on apprend plein de choses et on ressort de là avec énormément de connaissances, c'est vraiment génial.",
-    "J’ai vécu une expérience intense riche en émotion pendant 5 mois de laquelle je suis devenu quelqu’un de meilleur autant sur le plan personnel que professionnel. C’est pourquoi j’ai décidé de remettre le couvert pendant un an en accordant de nouveau ma confiance à la Wild Code School pour la poursuite de mes études.",
+  "La formation en alternance m'a permis d'avoir une première expérience professionnelle dans le développement web, de continuer à approfondir mes connaissances et d'apprendre des nouvelles notions pendant une année supplémentaire.",
+  "Même si on était en distanciel, on échangeait énormément, que ce soit avec nos camarades ou le formateur qui était vraiment pédagogue et présent pour nous à n'importe quel moment.",
+  "Allez chercher de la confiance auprès des autres apprenants avec vous, pour éviter ce syndrome de l'imposteur par lequel on est tous passés à un moment donné. Et surtout, accrochez-vous ! C'est très intense, mais on apprend plein de choses et on ressort de là avec énormément de connaissances, c'est vraiment génial.",
+  "J’ai vécu une expérience intense riche en émotion pendant 5 mois de laquelle je suis devenu quelqu’un de meilleur autant sur le plan personnel que professionnel. C’est pourquoi j’ai décidé de remettre le couvert pendant un an en accordant de nouveau ma confiance à la Wild Code School pour la poursuite de mes études.",
 ];
 
 let texte = document.querySelector(".txt1");
 let numero = 0;
 let indexLettre = 0;
 
 function ecrirePhrase() {
-    let contenu = comment[numero];
-    texte.innerHTML = "";
-    indexLettre = 0;
-
-    let timer = setInterval(() => {
-        if (indexLettre < contenu.length) {
-            texte.innerHTML += contenu.charAt(indexLettre);
-            indexLettre++;
-        } else {
-            clearInterval(timer);
-            setTimeout(() => {
-                numero = (numero + 1) % comment.length;
-                ecrirePhrase();
-            }, 3000);
-        }
-    }, 50);
+  let contenu = comment[numero];
+  texte.innerHTML = "";
+  indexLettre = 0;
+
+  let timer = setInterval(() => {
+    if (indexLettre < contenu.length) {
+      texte.innerHTML += contenu.charAt(indexLettre);
+      indexLettre++;
+    } else {
+      clearInterval(timer);
+      setTimeout(() => {
+        numero = (numero + 1) % comment.length;
+        ecrirePhrase();
+      }, 3000);
+    }
+  }, 50);
 }
 
 ecrirePhrase();

index.html

@@ -204,12 +204,42 @@ <h2 class="username">Ayoub</h2>
                                 class="fas fa-heart"></i></button>
                         <p id="Countheart"></p>
 
-                        <div class="commentBox3">
-                            <dialog id="favDialog3">
-                                <form method="dialog">
-                                    <p>
-                                        <label>
-                                            Post comment
+                <div class="commentBox3">
+                    <dialog id="favDialog3">
+                        <form method="dialog">
+                          <p>
+                            <label>
+                      Post comment 
+                               
+                      <input id="text3" type="text" name="comment" placeholder="Comment here" >
+                            </label>
+                          </p>
+                          <menu>
+                            <button value="cancel">Delete</button>
+                            <button id="confirmBtn3">Post</button>
+                          </menu>
+                        </form>
+                      </dialog>
+                      <p>
+                        <button id="showDialog3"><i
+                            class="fa-solid fa-comment"></i></button>
+                      </p>
+                      <output id="output3"></output>
+                    </div>
+                    <div class="retweetBox">
+                      <button class="retweetIcon" popovertarget="retweetBox"><i
+                              class="fa-solid fa-retweet"></i></button>
+                      <div id="retweetBox" popover>
+                          <button popovertarget="retweetBox" popovertargetaction="hide"></button>
+                          <input type="text" name="CommentBox" placeholder="Comment here" class="userComment">
+                          <div class="buttons">
+                              <button type="submit" abled id="publishBtn">Retweet</button>
+                              <output id="outputRetweet3"></output>
+                            </div>
+                      </div>
+                  </div>
+    </article>         
+            </section>
 
                                             <input id="text3" type="text" name="comment" placeholder="Comment here">
                                         </label>