updated

index.html

@@ -11,7 +11,7 @@
       <header>
         <h3>GitGram</h3>
         <p>Discover GitHub Profiles Instantly</p>
-        <img src="img/search2.png" class="hidden" id="header-icon" alt="" />
+        <img src="img/search2.png" class="hidden" id="header-icon" alt="" name="img"/>
       </header>
       <div class="main">
         <div id="profile-onsearch" class="hidden">

script.js

@@ -10,10 +10,6 @@ for (let i = 1; i < localStorage.length + 1; i++) {
 }
 
 // ||Setting CSS variable values
-let width = window
-  .getComputedStyle(document.getElementsByTagName("main")[0])
-  .width.match(/\d+/)[0];
-document.documentElement.style.setProperty("--width-main", `${width}px`);
 document.documentElement.style.setProperty(
   "--width",
   `${window.getComputedStyle(main).width.match(/\d+/)[0] / 17}px`
@@ -204,12 +200,14 @@ function makeDefault() {
 // ||Function to add listener to the first card
 function addListenerToCard1() {
   if (cardCollection.length > 0) {
-    document.getElementById("card1").addEventListener("click", function () {
-      removeSearchProfile2();
-      profileOnsearch.classList.remove("profile-onsearch");
-      profileOnsearch.classList.add("hidden");
-    });
-    step1(1);
+    document
+      .getElementById(`card${cardCollection.length}`)
+      .addEventListener("click", function () {
+        removeSearchProfile2();
+        profileOnsearch.classList.remove("profile-onsearch");
+        profileOnsearch.classList.add("hidden");
+      });
+    step1(cardCollection.length);
   }
 }
 addListenerToCard1();
@@ -256,8 +254,8 @@ function step2(i) {
         varCard.classList.remove("grid-position1");
         varCard.classList.add("profile-onsearch");
       }, 301);
-      if (i + 1 <= cardCollection.length) step1(i + 1);
-      if (i - 1 > 0) step3(i - 1);
+      if (i - 1 > 0) step1(i - 1);
+      if (i + 1 <= cardCollection.length) step3(i + 1);
     },
     { once: true }
   );
@@ -277,7 +275,7 @@ function reverseStep2(i) {
     varCard.classList.remove("profile-onsearch");
   }, 301);
   step2(i);
-  if (i + 1 <= cardCollection.length) reverseStep1(i + 1);
+  if (i - 1 > 0) reverseStep1(i - 1);
 }
 
 // Step 3
@@ -294,7 +292,7 @@ function step3(i) {
     varCard.classList.add("grid-position2");
   }, 301);
 
-  if (i - 1 < cardCollection.length && i - 1 > 0) step4(i - 1);
+  if (i + 1 <= cardCollection.length && i + 1 > 0) step4(i + 1);
 
   varCard.addEventListener(
     "click",
@@ -308,8 +306,8 @@ function step3(i) {
         varCard.classList.remove("profile");
         varCard.classList.remove("grid-position2");
       }, 301);
-      reverseStep2(i + 1);
-      if (i - 1 < cardCollection.length && i - 1 > 0) reverseStep4(i - 1);
+      reverseStep2(i - 1);
+      if (i + 1 <= cardCollection.length && i + 1 > 0) reverseStep4(i + 1);
     },
     { once: true }
   );

style.css

@@ -43,13 +43,13 @@ header {
   padding: 1rem;
 }
 header h3 {
-  grid-column: 3/7;
+  grid-column: 1/5;
   grid-row: 1/2;
   color: azure;
   font-size: 3.5rem;
 }
 header p {
-  grid-column: 7/13;
+  grid-column: 5/12;
   grid-row: 1/2;
   color: azure;
   align-self: end;
@@ -59,6 +59,7 @@ header p {
 header img {
   grid-column: 14/16;
   width: 50px;
+  aspect-ratio: 1;
   border-radius: 50%;
   align-self: center;
 }
@@ -353,7 +354,7 @@ header img {
     font-size: 4.9rem;
   }
   header p {
-    grid-column: 6/11;
+    grid-column: 4/10;
     font-size: 1.5rem;
     margin-bottom: 1rem;
   }
@@ -407,6 +408,9 @@ header img {
   #history ul li {
     font-size: 1.5rem;
   }
+  #history-icon{
+    width: 100px;
+  }
 }
 @media screen and (max-width: 1600px) and (min-width: 1441px) {
   main {
@@ -416,12 +420,15 @@ header img {
     height: 37rem;
   }
   header p{
-    grid-column: 6/11;
+    grid-column: 4/11;
     margin-left: 1rem;
   }
   .search-profile input {
     background-size: 8% 100%;
   }
+  #history-icon{
+    width: 100px;
+  }
 }
 @media screen and (max-width: 825px) {
   main {
@@ -552,7 +559,7 @@ header img {
     bottom: 0;
   }
   .history {
-    width: var(--width-main);
+    width: 100%;
     height: 100%;
   }
   #history p {