From 1b48648787e12e6dc661213740edd2fb0779d4f1 Mon Sep 17 00:00:00 2001 From: stephanieEt Date: Sun, 17 Dec 2023 18:45:51 +0100 Subject: [PATCH 1/6] Ajout class arrow --- index.html | 231 +++++++++++++++++++++++++++++------------------------ 1 file changed, 125 insertions(+), 106 deletions(-) diff --git a/index.html b/index.html index 8c07106a..21d43d09 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,122 +8,140 @@ - + + -
-

- -

- Devis -
-
-
+ + - + + \ No newline at end of file From 7eeff377873d0d49e6cab63f2e97e9cdf4e9dfa9 Mon Sep 17 00:00:00 2001 From: stephanieEt Date: Tue, 19 Dec 2023 17:42:32 +0100 Subject: [PATCH 2/6] Add Event Listeners et bullets points --- assets/script.js | 61 ++++++++++++++++++++++++++++++++++-------------- 1 file changed, 44 insertions(+), 17 deletions(-) diff --git a/assets/script.js b/assets/script.js index 4fe57504..b93093cb 100644 --- a/assets/script.js +++ b/assets/script.js @@ -1,18 +1,45 @@ const slides = [ - { - "image":"slide1.jpg", - "tagLine":"Impressions tous formats en boutique et en ligne" - }, - { - "image":"slide2.jpg", - "tagLine":"Tirages haute définition grand format pour vos bureaux et events" - }, - { - "image":"slide3.jpg", - "tagLine":"Grand choix de couleurs de CMJN aux pantones" - }, - { - "image":"slide4.png", - "tagLine":"Autocollants avec découpe laser sur mesure" - } -] + { + image: "slide1.jpg", + tagLine: "Impressions tous formats en boutique et en ligne", + }, + { + image: "slide2.jpg", + tagLine: + "Tirages haute définition grand format pour vos bureaux et events", + }, + { + image: "slide3.jpg", + tagLine: "Grand choix de couleurs de CMJN aux pantones", + }, + { + image: "slide4.png", + tagLine: "Autocollants avec découpe laser sur mesure", + }, +]; + +/*Ajout des Event Listeners sur les flèches*/ + +const arrowleft = document.querySelector(".arrow_left"); +function showMsg() { + console.log("Vous avez cliqué sur la flèche de gauche"); +} +arrowleft.addEventListener("click", showMsg); + +const arrowright = document.querySelector(".arrow_right"); +function showMsg() { + console.log("Vous avez cliqué sur la flèche de droite"); +} +arrowright.addEventListener("click", showMsg); + +/*Création des bulles points*/ +let dotsBullet = document.querySelector(".dots"); +let i = 0; +for (let i = 0; i < slides.length; i++) { + const dot = document.createElement("div"); + dot.className = "dot"; + + dotsBullet.appendChild(dot); +} +let dotsCheck = document.querySelectorAll(".dot"); +dotsCheck[i].classList.add("dot_selected"); From c0d6372f88a0bb60c54f7d76b5491c55da27bceb Mon Sep 17 00:00:00 2001 From: stephanieEt Date: Wed, 20 Dec 2023 12:22:12 +0100 Subject: [PATCH 3/6] change slide and add condition --- assets/script.js | 56 ++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 49 insertions(+), 7 deletions(-) diff --git a/assets/script.js b/assets/script.js index b93093cb..c46810b5 100644 --- a/assets/script.js +++ b/assets/script.js @@ -20,26 +20,68 @@ const slides = [ /*Ajout des Event Listeners sur les flèches*/ -const arrowleft = document.querySelector(".arrow_left"); -function showMsg() { +let arrowleft = document.querySelector(".arrow_left"); +function slideLeft() { console.log("Vous avez cliqué sur la flèche de gauche"); } -arrowleft.addEventListener("click", showMsg); +arrowleft.addEventListener("click", slideLeft); -const arrowright = document.querySelector(".arrow_right"); -function showMsg() { +let arrowright = document.querySelector(".arrow_right"); +function slideRight() { console.log("Vous avez cliqué sur la flèche de droite"); } -arrowright.addEventListener("click", showMsg); +arrowright.addEventListener("click", slideRight); /*Création des bulles points*/ + let dotsBullet = document.querySelector(".dots"); let i = 0; + for (let i = 0; i < slides.length; i++) { const dot = document.createElement("div"); dot.className = "dot"; - dotsBullet.appendChild(dot); } + let dotsCheck = document.querySelectorAll(".dot"); dotsCheck[i].classList.add("dot_selected"); + +/*Changement de slide au clic sur la flèche droite*/ + +const bannerImage = document.querySelector(".banner-img"); + +const bannerText = document.querySelector("#banner p"); + +function slideRight() { + dotsCheck[i].classList.remove("dot_selected"); + /*i += 1; lors de létape 4, puis condition pour avoir le défilement étape 5*/ + + if (i >= slides.length - 1) { + i = 0; + } else { + i++; + } + + dotsCheck[i].classList.add("dot_selected"); + + /*changement de l'image et du titre*/ + bannerImage.src = `./assets/images/slideshow/${slides[i].image}`; + bannerText.innerHTML = slides[i].tagLine; +} + +function slideLeft() { + dotsCheck[i].classList.remove("dot_selected"); + /*i -= 1; lors de l'étape 4, puis condition pour avoir le défilement étape 5*/ + + if (i <= 0) { + i = slides.length - 1; + } else { + i--; + } + + dotsCheck[i].classList.add("dot_selected"); + + /*changement de l'image et du titre*/ + bannerImage.src = `./assets/images/slideshow/${slides[i].image}`; + bannerText.innerHTML = slides[i].tagLine; +} From 5cf485368719938e16d2c9bc3118bcac381a8a81 Mon Sep 17 00:00:00 2001 From: stephanieEt Date: Wed, 20 Dec 2023 16:40:03 +0100 Subject: [PATCH 4/6] refactoring code --- assets/script.js | 70 ++++++++++++++++++++++-------------------------- 1 file changed, 32 insertions(+), 38 deletions(-) diff --git a/assets/script.js b/assets/script.js index c46810b5..d602eb5d 100644 --- a/assets/script.js +++ b/assets/script.js @@ -20,22 +20,14 @@ const slides = [ /*Ajout des Event Listeners sur les flèches*/ -let arrowleft = document.querySelector(".arrow_left"); -function slideLeft() { - console.log("Vous avez cliqué sur la flèche de gauche"); -} +const arrowleft = document.querySelector(".arrow_left"); arrowleft.addEventListener("click", slideLeft); -let arrowright = document.querySelector(".arrow_right"); -function slideRight() { - console.log("Vous avez cliqué sur la flèche de droite"); -} +const arrowright = document.querySelector(".arrow_right"); arrowright.addEventListener("click", slideRight); /*Création des bulles points*/ - -let dotsBullet = document.querySelector(".dots"); -let i = 0; +const dotsBullet = document.querySelector(".dots"); for (let i = 0; i < slides.length; i++) { const dot = document.createElement("div"); @@ -43,45 +35,47 @@ for (let i = 0; i < slides.length; i++) { dotsBullet.appendChild(dot); } -let dotsCheck = document.querySelectorAll(".dot"); -dotsCheck[i].classList.add("dot_selected"); - -/*Changement de slide au clic sur la flèche droite*/ - +const dotsCheck = document.querySelectorAll(".dot"); const bannerImage = document.querySelector(".banner-img"); - const bannerText = document.querySelector("#banner p"); -function slideRight() { - dotsCheck[i].classList.remove("dot_selected"); - /*i += 1; lors de létape 4, puis condition pour avoir le défilement étape 5*/ +let positionImage = 0; +setClassAndImage(); - if (i >= slides.length - 1) { - i = 0; +function slideRight() { + console.log("Vous avez cliqué sur la flèche de droite"); + changeClass("remove"); + if (positionImage >= slides.length - 1) { + positionImage = 0; } else { - i++; + positionImage++; } - - dotsCheck[i].classList.add("dot_selected"); - - /*changement de l'image et du titre*/ - bannerImage.src = `./assets/images/slideshow/${slides[i].image}`; - bannerText.innerHTML = slides[i].tagLine; + setClassAndImage(); } function slideLeft() { - dotsCheck[i].classList.remove("dot_selected"); - /*i -= 1; lors de l'étape 4, puis condition pour avoir le défilement étape 5*/ - - if (i <= 0) { - i = slides.length - 1; + console.log("Vous avez cliqué sur la flèche de gauche"); + changeClass("remove"); + if (positionImage <= 0) { + positionImage = slides.length - 1; } else { - i--; + positionImage--; } + setClassAndImage(); +} - dotsCheck[i].classList.add("dot_selected"); +function changeClass(action) { + if (action === "remove") { + dotsCheck[positionImage].classList.remove("dot_selected"); + } + if (action === "add") { + dotsCheck[positionImage].classList.add("dot_selected"); + } +} +function setClassAndImage() { + changeClass("add"); /*changement de l'image et du titre*/ - bannerImage.src = `./assets/images/slideshow/${slides[i].image}`; - bannerText.innerHTML = slides[i].tagLine; + bannerImage.src = `./assets/images/slideshow/${slides[positionImage].image}`; + bannerText.innerHTML = slides[positionImage].tagLine; } From 48c231981fd08048b2686a7a100b95fb202302a0 Mon Sep 17 00:00:00 2001 From: stephanieEt Date: Thu, 21 Dec 2023 15:09:07 +0100 Subject: [PATCH 5/6] link Readme --- ReadMe.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ReadMe.md b/ReadMe.md index 0cb318ae..f559d6e9 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -1 +1,4 @@ # Print-It WebSite v.1 + +lien vers le Projet 5: +https://stephanieet.github.io/Projet5-JS/ \ No newline at end of file From 50fc5a386770226c1c77e7518cc475c738abd4b3 Mon Sep 17 00:00:00 2001 From: stephanieEt Date: Wed, 3 Jan 2024 10:31:38 +0100 Subject: [PATCH 6/6] fix commentaires --- assets/script.js | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/script.js b/assets/script.js index d602eb5d..a8745f8b 100644 --- a/assets/script.js +++ b/assets/script.js @@ -29,6 +29,7 @@ arrowright.addEventListener("click", slideRight); /*Création des bulles points*/ const dotsBullet = document.querySelector(".dots"); +/* Boucle qui permet de rajouter un bullet point en fonction du nombre d'images*/ for (let i = 0; i < slides.length; i++) { const dot = document.createElement("div"); dot.className = "dot";