Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ajout class arrow #9

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Ajout class arrow #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1b48648
Ajout class arrow
stephanieEt Dec 17, 2023
7eeff37
Add Event Listeners et bullets points
stephanieEt Dec 19, 2023
c0d6372
change slide and add condition
stephanieEt Dec 20, 2023
5cf4853
refactoring code
stephanieEt Dec 20, 2023
48c2319
link Readme
stephanieEt Dec 21, 2023
50fc5a3
fix commentaires
stephanieEt Jan 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions ReadMe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
# Print-It WebSite v.1

lien vers le Projet 5:
https://stephanieet.github.io/Projet5-JS/
98 changes: 81 additions & 17 deletions assets/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,82 @@
const slides = [
{
"image":"slide1.jpg",
"tagLine":"Impressions tous formats <span>en boutique et en ligne</span>"
},
{
"image":"slide2.jpg",
"tagLine":"Tirages haute définition grand format <span>pour vos bureaux et events</span>"
},
{
"image":"slide3.jpg",
"tagLine":"Grand choix de couleurs <span>de CMJN aux pantones</span>"
},
{
"image":"slide4.png",
"tagLine":"Autocollants <span>avec découpe laser sur mesure</span>"
}
]
{
image: "slide1.jpg",
tagLine: "Impressions tous formats <span>en boutique et en ligne</span>",
},
{
image: "slide2.jpg",
tagLine:
"Tirages haute définition grand format <span>pour vos bureaux et events</span>",
},
{
image: "slide3.jpg",
tagLine: "Grand choix de couleurs <span>de CMJN aux pantones</span>",
},
{
image: "slide4.png",
tagLine: "Autocollants <span>avec découpe laser sur mesure</span>",
},
];

/*Ajout des Event Listeners sur les flèches*/

const arrowleft = document.querySelector(".arrow_left");
arrowleft.addEventListener("click", slideLeft);

const arrowright = document.querySelector(".arrow_right");
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";
dotsBullet.appendChild(dot);
}

const dotsCheck = document.querySelectorAll(".dot");
const bannerImage = document.querySelector(".banner-img");
const bannerText = document.querySelector("#banner p");

let positionImage = 0;
setClassAndImage();

function slideRight() {
console.log("Vous avez cliqué sur la flèche de droite");
changeClass("remove");
if (positionImage >= slides.length - 1) {
positionImage = 0;
} else {
positionImage++;
}
setClassAndImage();
}

function slideLeft() {
console.log("Vous avez cliqué sur la flèche de gauche");
changeClass("remove");
if (positionImage <= 0) {
positionImage = slides.length - 1;
} else {
positionImage--;
}
setClassAndImage();
}

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[positionImage].image}`;
bannerText.innerHTML = slides[positionImage].tagLine;
}
231 changes: 125 additions & 106 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,128 +1,147 @@
<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print it ! - Impressions d'entreprise</title>
<link rel="stylesheet" href="./assets/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Slab:wght@400;900&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Slab:wght@400;900&display=swap"
rel="stylesheet">
</head>

<body>
<header class="container">
<h1>
<img class="logo" src="./assets/images/logo.png" alt="Print it ! Impressions d'entreprises" >
</h1>
<a class="btn devis" href="mailto:[email protected]">Devis</a>
</header>
<main>
<div id="banner">
<img class="banner-img" src="./assets/images/slideshow/slide1.jpg" alt="Banner Print-it">
<p>Impressions tous formats <span>en boutique et en ligne</span></p>
<div class="dots">
<header class="container">
<h1>
<img class="logo" src="./assets/images/logo.png" alt="Print it ! Impressions d'entreprises">
</h1>
<a class="btn devis" href="mailto:[email protected]">Devis</a>
</header>
<main>
<div id="banner">
<img class="arrow arrow_left" src="./assets/images/arrow_left.png" alt="Flèche gauche">
<img class="arrow arrow_right" src="./assets/images/arrow_right.png" alt="Flèche droite">
<img class="banner-img" src="./assets/images/slideshow/slide1.jpg" alt="Banner Print-it">
<p>Impressions tous formats <span>en boutique et en ligne</span></p>
<div class="dots">
</div>
</div>
</div>
<section id="about-us" class="container">
<section id="about-us" class="container">
<div>
<h2>Qui sommes-nous ?</h2>
<ul>
<li>Depuis près de 60 ans nous sommes un imprimeur familial spécialisé dans les besoins
d’entreprises de petite et grande taille. Implantés à Rennes dans le quartier Bréquigny, nous
accompagnons nos clients dans leurs projets d’impression.</li>
<li>De la création de vos fichiers à la livraison de vos imprimés, nous mettons tout notre
savoir-faire à votre disposition afin de répondre au mieux à vos attentes.</li>
</ul>
</div>
<aside>
<img src="./assets/images/colors.jpg" alt="palette multicolore">
</aside>
</section>
<section id="products" class="container">
<div>
<h2>Nos produits</h2>
<p>Grâce à nos nombreuses années d'expérience dans l'impression de produits évènementiels et supports de
communication, nous ne cessons d'innover et de perfectionner nos services afin de satisfaire au
mieux nos clients. Vous pourrez parcourir les différentes rubriques du site afin de découvrir notre
large gamme de papiers et finitions, pour des produits aussi divers que les dépliants ou plaquettes
promotionnelles, les brochures, les flyers, les goodies d’entreprises, les autocollants de toutes
tailles... </p>
</div>
<aside>
<img src="./assets/images/yellow-book.jpg" alt="Imprimeur avec un livre jaune dans les mains">
</aside>

</section>
<section id="question" class="bg-yellow">
<h2>Une question? Un devis?</h2>
<p>Appelez-nous au 02 12 34 56 78 ou faites une demande de devis ici :</p>
<a href="mailto:[email protected]" class="btn devis">Devis</a>
</section>
<section id="why-us" class="container">
<h2>Pourquoi faire appel à nous?</h2>
<div>
<article>
<img src="./assets/images/proximity-icon.png" alt="Icone Proximité">
<h3>Proximité</h3>
<p>Facile d’accès, une équipe compétente et à l'écoute des clients vous attend pour tous vos besoins
d'impression et en communication visuelle.</p>
</article>
<article>
<img src="./assets/images/quality-icon.png" alt="Icone Qualité">
<h3>Qualité</h3>
<p>Qu'il s'agisse de copies simples, de brochures, de cartes de visite ou de conception, nous vous
garantissons toujours des résultats optimaux.</p>
</article>
<article>
<img src="./assets/images/speedy-icon.png" alt="Rapidité Qualité">
<h3>Rapidité</h3>
<p>Vous pouvez compter sur nous pour répondre à vos sollicitations en temps et en heure.</p>
</article>
</div>
</section>
<section id="contact" class="bg-lightblue">
<div class="container">
<div>
<h2>Contact</h2>
<div>
<h3>Par téléphone</h3>
<ul>
<li>Appelez-nous au 02 12 34 56 78</li>
<li>Lun-Ven : 9h30-18h30</li>
<li>Sam : 10h-13h et 14h-18h30</li>
</ul>
</div>
<div>
<h3>Par e-mail</h3>
<p>
<a href="mailto:[email protected]" class="btn">Nous écrire</a>
</p>
</div>
<div>
<h3>Se rendre en boutique</h3>
<p>5, rue Yves Noël,<br>
35200 Rennes<br>
<img class="inline-icon" src="./assets/images/metro.png" alt="metro" /> Clémenceau
</p>
</div>
</div>
<div>
<img src="./assets/images/magnifying-glass.jpg" alt="Loupe avec palette bleue">
</div>

</div>
</section>
</main>
<footer>
<div>
<h2>Qui sommes-nous ?</h2>
<p class="footer-contact">Contact</p>
<ul>
<li>Depuis près de 60 ans nous sommes un imprimeur familial spécialisé dans les besoins d’entreprises de petite et grande taille. Implantés à Rennes dans le quartier Bréquigny, nous accompagnons nos clients dans leurs projets d’impression.</li>
<li>De la création de vos fichiers à la livraison de vos imprimés, nous mettons tout notre savoir-faire à votre disposition afin de répondre au mieux à vos attentes.</li>
<li>Appelez-nous au 02 12 34 56 78</li>
<li>Lun-Ven : 9h30-18h30</li>
<li>Sam : 10h-13h et 14h-18h30</li>
</ul>
</div>
<aside>
<img src="./assets/images/colors.jpg" alt="palette multicolore">
</aside>
</section>
<section id="products" class="container">
<div>
<h2>Nos produits</h2>
<p>Grâce à nos nombreuses années d'expérience dans l'impression de produits évènementiels et supports de communication, nous ne cessons d'innover et de perfectionner nos services afin de satisfaire au mieux nos clients. Vous pourrez parcourir les différentes rubriques du site afin de découvrir notre large gamme de papiers et finitions, pour des produits aussi divers que les dépliants ou plaquettes promotionnelles, les brochures, les flyers, les goodies d’entreprises, les autocollants de toutes tailles... </p>
<p>5, rue Yves Noël,35200 Rennes<br>
<img src="./assets/images/metro.png" alt="metro" /> Clémenceau
</p>
</div>
<aside>
<img src="./assets/images/yellow-book.jpg" alt="Imprimeur avec un livre jaune dans les mains">
</aside>

</section>
<section id="question" class="bg-yellow">
<h2>Une question? Un devis?</h2>
<p>Appelez-nous au 02 12 34 56 78 ou faites une demande de devis ici :</p>
<a href="mailto:[email protected]" class="btn devis">Devis</a>
</section>
<section id="why-us" class="container">
<h2>Pourquoi faire appel à nous?</h2>
<div>
<article>
<img src="./assets/images/proximity-icon.png" alt="Icone Proximité">
<h3>Proximité</h3>
<p>Facile d’accès, une équipe compétente et à l'écoute des clients vous attend pour tous vos besoins d'impression et en communication visuelle.</p>
</article>
<article>
<img src="./assets/images/quality-icon.png" alt="Icone Qualité">
<h3>Qualité</h3>
<p>Qu'il s'agisse de copies simples, de brochures, de cartes de visite ou de conception, nous vous garantissons toujours des résultats optimaux.</p>
</article>
<article>
<img src="./assets/images/speedy-icon.png" alt="Rapidité Qualité">
<h3>Rapidité</h3>
<p>Vous pouvez compter sur nous pour répondre à vos sollicitations en temps et en heure.</p>
</article>
<a href="mailto:[email protected]" class="btn">Nous écrire</a>
<a href="mailto:[email protected]?subject=Demande&nbsp;de&nbsp;devis" class="btn devis">Devis</a>
</div>
</section>
<section id="contact" class="bg-lightblue">
<div class="container">
<div>
<h2>Contact</h2>
<div>
<h3>Par téléphone</h3>
<ul>
<li>Appelez-nous au 02 12 34 56 78</li>
<li>Lun-Ven : 9h30-18h30</li>
<li>Sam : 10h-13h et 14h-18h30</li>
</ul>
</div>
<div>
<h3>Par e-mail</h3>
<p>
<a href="mailto:[email protected]" class="btn">Nous écrire</a>
</p>
</div>
<div>
<h3>Se rendre en boutique</h3>
<p>5, rue Yves Noël,<br>
35200 Rennes<br>
<img class="inline-icon" src="./assets/images/metro.png" alt="metro"/> Clémenceau</p>
</div>
</div>
<div>
<img src="./assets/images/magnifying-glass.jpg" alt="Loupe avec palette bleue">
</div>

<div>
<img class="footer-logo" src="./assets/images/logo.png" alt="Print it ! Impressions d'entreprises">
</div>
</section>
</main>
<footer>
<div>
<p class="footer-contact">Contact</p>
<ul>
<li>Appelez-nous au 02 12 34 56 78</li>
<li>Lun-Ven : 9h30-18h30</li>
<li>Sam : 10h-13h et 14h-18h30</li>
</ul>
</div>
<div>
<p>5, rue Yves Noël,35200 Rennes<br>
<img src="./assets/images/metro.png" alt="metro"/> Clémenceau</p>
</div>
<div>
<a href="mailto:[email protected]" class="btn">Nous écrire</a>
<a href="mailto:[email protected]?subject=Demande&nbsp;de&nbsp;devis" class="btn devis">Devis</a>
</div>
<div>
<img class="footer-logo" src="./assets/images/logo.png" alt="Print it ! Impressions d'entreprises" >
</div>
</footer>
<script src="./assets/script.js"></script>
</footer>
<script src="./assets/script.js"></script>
</body>
</html>

</html>