Fix display of gif on 3rd post

.gitignore

@@ -0,0 +1 @@
+node_modules

index.html

@@ -8,6 +8,8 @@
     <link rel="stylesheet" href="dist/css/style.css">
     <!-- Script -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" integrity="sha512-RXf+QSDCUQs5uwRKaDoXt55jygZZm2V++WUZduaU/Ui/9EGp3f/2KZVahFZBKGH0s774sd3HmrhUy+SgOFQLVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script type="module" defer src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
+    <script type="text/javascript" defer src="https://tenor.com/embed.js"></script>
     <script type="module" defer src="src/js/main.js"></script>
     <title>Document</title>
 </head>
@@ -16,12 +18,7 @@
         <h1>Une vision VS une vision</h1>
     </header>
     <section>
-        <div class="posts">
-            <h2>Un contrat pro ? Ça coûtera cher à la boîte</h2>
-            <picture>
-                <img src="dist/assets/contrat-professionnalisation-alternance-investissement.jpg" alt="">
-            </picture>
-        </div>
+       <!-- Alls posts imported from JS -->
     </section>
     <main>
         <p>Noir c'est noir, <br>Il n'y a plus d'espoir <br>... ou pas !</p>
@@ -36,7 +33,8 @@ <h2>Un contrat pro ? Ça coûtera cher à la boîte</h2>
         </div>
     </main>
     <footer>
-
+       
     </footer>
+
 </body>
 </html>

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "dark-or-light-view",
+  "version": "1.0.0",
+  "description": "Create a landing page whose display depends on the user's point of view ... or his bias",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alice-sebego/dark-or-light-view.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/alice-sebego/dark-or-light-view/issues"
+  },
+  "homepage": "https://github.com/alice-sebego/dark-or-light-view#readme",
+  "dependencies": {}
+}

src/js/content.js

@@ -23,10 +23,10 @@ const posts = {
     junior : {
         title : "Les juniors, sérieux !?!",
         pessimitic : "Sans façon ! Trop de freins : Entre le manque d'expérience et d'autonomie ...",
-        dark_img:"https://tenor.com/bAjWx.gif",
+        dark_img:"<div class='tenor-gif-embed' data-postid='21010459' data-share-method='host' data-width='100%' data-aspect-ratio='1.2607594936708861'><a href='https://tenor.com/view/experience-need-experience-need-job-need-experience-for-job-need-job-for-experience-gif-21010459'>Experience Need Experience GIF</a> from <a href='https://tenor.com/search/experience-gifs'>Experience GIFs</a></div><script type='text/javascript' async src='https://tenor.com/embed.js'></script>",
         alt_dark:"Need experience for job, need job for experience",
         optimistic:"\"L'expérience de chacun est le trésor de tous.\" - Gérard de Nerval",
-        light_img:"https://tenor.com/0E2L.gif",
+        light_img:"<div class='tenor-gif-embed' data-postid='12511761' data-share-method='host' data-width='100%' data-aspect-ratio='1.371900826446281'><a href='https://tenor.com/view/this-is-how-we-bingham-treasure-hunt-treasure-got-it-happy-gif-12511761'>This Is How We Bingham Treasure Hunt GIF</a> from <a href='https://tenor.com/search/thisishowwebingham-gifs'>Thisishowwebingham GIFs</a></div><script type='text/javascript' async src='https://tenor.com/embed.js'></script>",
         alt_light:"La diversité dans une équipe nous vaccine des biais cognitifs ;)"
     },
 

src/js/main.js

@@ -4,18 +4,29 @@ const $section = document.querySelector("section");
 const $switch = document.querySelector("#switch");
 
 for(let [key, val] of Object.entries(posts)){
-    console.log(`Key : ${key} | Valeur : ${val}`);
 
     let {title, pessimitic, dark_img, alt_dark, optimistic, light_img, alt_light} = val;
+
+    if(key !== "junior"){
+        const viewPoint = document.createElement("div");
+        viewPoint.setAttribute("class", "posts");
+        viewPoint.innerHTML = ` 
+        <h2>${title}</h2>
+        <p>${pessimitic}</p>
+        <picture>
+            <img src="${dark_img}" alt="${alt_dark}">
+        </picture>
+        `;
+        $section.appendChild(viewPoint);
+    } else {
+        const viewPoint = document.createElement("div");
+        viewPoint.setAttribute("class", "posts");
+        viewPoint.innerHTML = ` 
+        <h2>${title}</h2>
+        <p>${pessimitic}</p>
+        ${dark_img}
+        `;
+        $section.appendChild(viewPoint);
+    }
 
-    const viewPoint = document.createElement("div");
-    viewPoint.setAttribute("class", "posts");
-    viewPoint.innerHTML = ` 
-    <h2>${title}</h2>
-    <p>${pessimitic}</p>
-    <picture>
-        <img src="${dark_img}" alt="${alt_dark}">
-    </picture>
-    `;
-    $section.appendChild(viewPoint);
 }