diff --git a/scriptGallerie.js b/scriptGallerie.js
index e69de29..7769a01 100644
--- a/scriptGallerie.js
+++ b/scriptGallerie.js
@@ -0,0 +1,56 @@
+$(document).ready(function () {
+ console.log('Je peux maintenant écrire du code jQuery');
+
+ // Menu dropDown
+
+ // Séléction de la div de la classe dropdown
+ let dropdown = document.querySelector('.dropdown')
+
+ // Au clic si fermé: ouvre sinon ferme
+ dropdown.addEventListener('click', (e) => {
+
+ if (dropdown.classList.contains('closed')) {
+ dropdown.classList.remove('closed')
+ } else {
+ dropdown.classList.add('closed')
+ }
+
+ })
+
+
+ // Gallerie d'image
+
+ // La variable iconGalleryMosaic prend pour valeur l'icon inconGalleryMosaic
+ let iconGalleryMosaic = document.querySelector('.iconGalleryMosaic');
+ // La variable iconGalleryColumn prend pour valeur l'icon inconGalleryColumn
+ let iconGalleryColumn = document.querySelector('.iconGalleryColumn');
+
+ // La variable imgGallery prend pour valeur un tableau avec les images de la div portant l'id imgGallery
+ let imgGallery = document.querySelectorAll('#imgGallery img');
+
+
+ // Listener sur l'icon Mosaïque au click de la souris (l'évenement se passe lorsque l'utilisateur clique sur l'icon)
+ iconGalleryMosaic.addEventListener('click', (e) => {
+ index = 0;
+ // Au moment ou l'utilisateur clique sur l'icon, pour chaque image, supression de la classe colonne et ajout de la classe Mosaïque tant qu'il y a des images
+ while(index < imgGallery.length){
+ imgGallery[index].classList.remove("imgGalleryColumn");
+ imgGallery[index].classList.add("imgGalleryMosaic");
+ index = index + 1;
+ }
+
+ })
+
+ // Listener sur l'icon Colonne au click de la souris (l'évenement se passe lorsque l'utilisateur clique sur l'icon)
+ iconGalleryColumn.addEventListener('click', (e) => {
+ index = 0;
+ // Au moment ou l'utilisateur clique sur l'icon, pour chaque image, supression de la classe Mosaïque et ajout de la classe Colonne tant qu'il y a des images
+ while(index < imgGallery.length){
+ imgGallery[index].classList.remove("imgGalleryMosaic");
+ imgGallery[index].classList.add("imgGalleryColumn");
+ index = index + 1;
+ }
+
+ })
+
+});
diff --git a/scriptIndex.js b/scriptIndex.js
index 2e34fdd..6d59513 100644
--- a/scriptIndex.js
+++ b/scriptIndex.js
@@ -67,7 +67,6 @@ $(document).ready(function () {
let joke = document.getElementById('joke').value;
// les variables name et joke sont insérés dans le DOM avec les autres blagues
$('
'+ '
' + name + '
' + '
' + joke + '
' + '
').prependTo('#feed');
-
}
});
diff --git a/style.css b/style.css
index 99a2e33..bde9654 100644
--- a/style.css
+++ b/style.css
@@ -43,6 +43,7 @@ a:hover{
h1{
margin: 0;
+ padding: 40px 0px;
display: flex;
justify-content: center;
}
@@ -62,9 +63,6 @@ main{
/* Main */
-#titleJavascriptProject{
- padding: 40px 0px;
-}
#refreshingIcon{
width: 50px;
@@ -156,4 +154,45 @@ justify-content: center;
background-color: #CCDAD1;
margin: 20px 200px;
padding: 10px 0px;
+}
+
+
+/* Gallery image */
+
+.imgGalleryMosaic{
+ height: auto;
+ width: 40%;
+ margin: 5px;
+}
+
+.imgGalleryColumn{
+ height: auto;
+ width: 50%;
+ margin: 5px;
+}
+
+
+#imgGallery{
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+
+/* Icon Gallery */
+
+.iconGalleryMosaic{
+ width: 5%;
+ height: auto;
+}
+
+.iconGalleryColumn{
+ width: 5%;
+ height: auto;
+}
+
+#divIconGallery{
+ display: flex;
+ justify-content: space-evenly;
+ margin: 4%;
}
\ No newline at end of file
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+