Completed 5th Project

Author: Aman Kumar Sinha

project-1/facebook-add-remove-friend.html

@@ -33,7 +33,7 @@ <h1>Add & Remove Friends</h1>
 
                     <div class="image"></div>
 
-                    <h2 class="card-title"> Angel Priya</h2>
+                    <h2 class="card-title"> Facebook User</h2>
 
                     <p id="currentStatus">Stranger</p>
 

project-5/insta-story.css

@@ -22,12 +22,23 @@ main {
         rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
       border-radius: 1rem;
       background-color: white;
+      overflow: hidden;
+      z-index: 0;
+
+      & #fullscreen {
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        display: none;
+        background-size: cover;
+        background-position: center;
+        z-index: 1;
+      }
 
       & .stories {
         height: 12rem;
         width: 100%;
         border-bottom: 1.5px solid #555;
-
         white-space: nowrap;
         overflow-x: auto;
         overflow-y: hidden;
@@ -48,6 +59,7 @@ main {
           overflow: hidden;
           display: inline-block;
           margin: 0 0.2rem;
+          cursor: pointer;
 
           & img {
             height: 100%;

project-5/insta-story.html

@@ -28,13 +28,15 @@
         <main>
             <div class="container">
                 <div class="card">
+
+                    <div id="fullscreen"></div>
                     <div class="stories"></div>
                     <div class="text">
                         <h1>Instgram Stories</h1>
                     </div>
                 </div>
 
-                
+
             </div>
         </main>
     </section>

project-5/insta-story.js

@@ -1,18 +1,23 @@
 let images = [
   {
     src: "images/peacock.webp",
+    story: "images/peacock.webp",
   },
   {
     src: "images/eagle.webp",
+    story: "images/eagle.webp",
   },
   {
     src: "images/lion.webp",
+    story: "images/lion.webp",
   },
   {
     src: "images/deer.webp",
+    story: "images/deer.webp",
   },
   {
     src: "images/model.webp",
+    story: "images/model.webp",
   },
 ];
 
@@ -25,3 +30,13 @@ images.forEach((image, index) => {
 
 let stories = document.querySelector(".stories");
 stories.innerHTML = story;
+
+stories.addEventListener("click", (dets) => {
+  
+  document.querySelector("#fullscreen").style.display = "block";
+  document.querySelector("#fullscreen").style.backgroundImage = `url(${images[dets.target.id].story})`;
+
+  setTimeout(() => {
+    document.querySelector("#fullscreen").style.display = "none";
+  }, 3000);
+});