Added JS

Author: Aman Kumar Sinha

project-3/custom-cursor.css

@@ -2,6 +2,7 @@ body{
     background-color: black;
     margin: 0;
     padding: 0;
+    overflow: hidden;
 }
 
 main{

project-5/insta-story.html

@@ -28,28 +28,7 @@
         <main>
             <div class="container">
                 <div class="card">
-                    <div class="stories">
-                        <div class="story">
-                            <img src="images/model.webp" alt="" />
-                        </div>
-
-                        <div class="story">
-                            <img src="images/deer.webp" alt="" />
-                        </div>
-
-                        <div class="story">
-                            <img src="images/eagle.webp" alt="" />
-                        </div>
-
-                        <div class="story">
-                            <img src="images/lion.webp" alt="" />
-                        </div>
-
-                        <div class="story">
-                            <img src="images/peacock.webp" alt="" />
-                        </div>
-                    </div>
-
+                    <div class="stories"></div>
                     <div class="text">
                         <h1>Instgram Stories</h1>
                     </div>

project-5/insta-story.js

@@ -0,0 +1,27 @@
+let images = [
+  {
+    src: "images/peacock.webp",
+  },
+  {
+    src: "images/eagle.webp",
+  },
+  {
+    src: "images/lion.webp",
+  },
+  {
+    src: "images/deer.webp",
+  },
+  {
+    src: "images/model.webp",
+  },
+];
+
+let story = "";
+images.forEach((image, index) => {
+  story += `<div class="story">
+                  <img src="${image.src}" id=${index} alt="img" />
+              </div>`;
+});
+
+let stories = document.querySelector(".stories");
+stories.innerHTML = story;