From 9c8c937041d12b89ab2fc5b185622e6d6d68ff7b Mon Sep 17 00:00:00 2001
From: 0_o <harshanand.jha@gmail.com>
Date: Wed, 14 Jul 2021 15:50:54 +0530
Subject: [PATCH 1/7] added animation an improved color scheme

---
 index.html |  74 +++++++++++++++-------
 js/main.js |  20 ++++--
 main.css   | 182 ++++++++++++++++++++++++++++++++++++++++++-----------
 3 files changed, 212 insertions(+), 64 deletions(-)

diff --git a/index.html b/index.html
index 53b966d..6961976 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
     <div id="preloading">
     </div>
     <main class = "back">
-    
+
 
 <!-- Navbar -->
 <nav class="navbar navbar-expand-lg scrolling-navbar">
@@ -73,29 +73,55 @@
                      <div class="name">👨‍🚀</div>
                 </div>
             </div>
-            <img src = "https://images2.imgbox.com/3c/0e/T8iJcSN3_o.png" id="mission_patch" class="mission_patch" alt = "mission patch" height=200 width=200 align=right>
-            <div class="lnumber detail_row">
-                <div class="detail_block">
-                    <div class="label">Mission No : </div>
-                    <div id="number" class="number">1</div>
-                </div>
-                <div class="detail_block ">
-                    <div class="label">Launch Year :</div>
-                    <div id="year" class="year">2006</div>
-                </div>
+            <div class="row ">
+              <div class="col-lg col_class1">
+
+                  <div  class="detail_block_c slide-in">
+                      <div class="label">Mission   No  </div>
+                      <div id="number" class="number">1</div>
+                  </div>
+                  <div class="detail_block_c slide-in2 ">
+                      <div class="label">Launch   Year </div>
+                      <div id="year" class="year">2006</div>
+                  </div>
+
+
+                    <div class="detail_block_c slide-in3">
+                        <div class="label">  Rocket Name :</div>
+                        <div id="rname" class="rname">Falcon 1</div>
+                    </div>
+
+
+                    <div class="detail_block_c slide-in4">
+                        <div class="label">Launch Site :</div>
+                        <div id="lsite" class="rtype">Kwajalein Atoll Omelek Island</div>
+                    </div>
+
+
+                    <div class="detail_block_c slide-in5">
+                        <div class="label">  Result :</div>
+                        <div id="result" class="rname">Mission Failed</div>
+                    </div>
+
+
+                    <div class="detail_block_c slide-in6">
+                        <div class="label">  Details :</div>
+                        <div id="mdetail" class="rname">Merlin engine failure</div>
+                    </div>
+
+
+
+
             </div>
-            <div class="vehicle detail_row">
-                <div class="detail_block">
-                    <div class="label">  Rocket Name :</div>
-                    <div id="rname" class="rname">Falcon 1</div>
-                </div>
+              <div class="col-lg patch_img">
+                  <img src = "https://images2.imgbox.com/3c/0e/T8iJcSN3_o.png" id="mission_patch" class="mission_patch patch_img" alt = "mission patch" height=200 width=200 align=right>
+              </div>
             </div>
-            <div class="launch_site detail_row">
-                <div class="detail_block">
-                    <div class="label">Launch Site :</div>
-                    <div id="lsite" class="rtype">Kwajalein Atoll Omelek Island</div>
-                </div>
+            <div class="lnumber detail_row">
             </div>
+              <div class="lnumber detail_row">
+          </div>
+
             <div class="links">
                     <a id="artlink" class="artlink" target="_blank" href="https://www.space.com/2196-spacex-inaugural-falcon-1-rocket-lost-launch.html">
                         <button class="btn youBtn">View Full Article</button>
@@ -130,17 +156,17 @@
             </a>
             </div>
             <br>
-            <p class="copyright">&copy Copyright <script>document.write(new Date().getFullYear())</script> |❤️Manan Kohli</a></p>
+            <p class="copyright">&copy Copyright <script>document.write(new Date().getFullYear())</script> | ❤️Manan Kohli</a></p>
     </footer>
     <a href="#" class="to-top">
         <i class="fa fa-arrow-up" style="font-size:36px"></i>
     </a>
-    
+
     <!---javascript links-->
     <script src="./js/scroll.js"></script>
 
     </div>
-  
+
 
 
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
diff --git a/js/main.js b/js/main.js
index bf6dd6b..b2317c9 100644
--- a/js/main.js
+++ b/js/main.js
@@ -19,6 +19,18 @@ fetch(url+fnum).then(function(response){
     document.getElementById("mission_patch").style.display = "block";
     document.getElementById("mission_patch").src=obj.links.mission_patch_small;
     document.getElementById("artlink").href=obj.links.article_link;
+    document.getElementById("mdetail").textContent=obj.details;
+    if (obj.launch_success === true) {
+      document.getElementById("result").textContent="Mission Successful";
+
+    }
+    else if (obj.launch_success === false) {
+      document.getElementById("result").textContent="Mission Failure"
+
+    }
+
+
+
     document.getElementById("vidframe").src=`https://www.youtube.com/embed/${obj.links.youtube_id}`;
 }).catch(function(error){
     console.error('wrong');
@@ -58,15 +70,15 @@ const stopVideo = () => {
     let iframe_tag = video__container.querySelector( 'iframe');
     if ( iframe_tag) {
         let iframeSrc = iframe_tag.src;
-        iframe_tag.src = iframeSrc; 
+        iframe_tag.src = iframeSrc;
     }
 }
   document.querySelector('#vidBtn')
     .addEventListener('click', toggleModal);
-  
+
   document.querySelector('.overlay')
     .addEventListener('click', toggleModal);
-  
+
   document.querySelector('.modal__closebar')
     .addEventListener('click', toggleModal);
 
@@ -76,4 +88,4 @@ const stopVideo = () => {
     }
 myfunc=(togle)=>{
 togle.classList.toggle("change");
-}
\ No newline at end of file
+}
diff --git a/main.css b/main.css
index fbeb9f0..e9c24ef 100644
--- a/main.css
+++ b/main.css
@@ -10,14 +10,14 @@ body {
 }
 ::-webkit-scrollbar
 {
-  width: 11px;
+  width: 5px;
 }
 ::-webkit-scrollbar-thumb{
-  background: linear-gradient(#faa303,#fa6603);
+  background: linear-gradient(#A2DBFA,#39A2DB);
   border-radius: 50px;
 }
 ::-webkit-scrollbar-thumb:hover{
-  background: linear-gradient(#ff6804,#fda501);
+  background: linear-gradient(#A2DBFA,#39A2DB);
 }
 
 .back{
@@ -79,7 +79,7 @@ header {
   outline: none;
 }
 .nav-item a:hover{
-  color: #f3df27;
+  color: #FF94CC;
 }
 .nav-item a:focus{
   color: rgb(255, 238, 7);
@@ -90,7 +90,7 @@ header {
   left: 0;
   right: 0;
   margin: auto;
-  background-color: #f50808;
+  background-color: #39A2DB;
   color: transparent;
   width: 0%;
   content: '.';
@@ -109,7 +109,7 @@ header {
 .bar1, .bar2, .bar3 {
   width: 33px;
   height: 2px;
-  border: 2.5px solid white;
+  border: 2.5px solid #3EDBF0;
   border-radius: 4px;
   background-color: rgb(255, 255, 255);
   margin: 5px 0;
@@ -146,7 +146,7 @@ header input {
   padding: 12px 15px;
   border: none;
   outline: none;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.6);
   border-radius: 12px;
   color: #313131;
   font-size: 20px;
@@ -155,7 +155,7 @@ header input {
 }
 
 header input:focus {
-  background-color: rgba(255, 255, 255, 0.6);
+  background-color: rgba(255, 255, 255, 0.9) ;
 }
 
 main {
@@ -171,7 +171,7 @@ main {
   align-items: center;
   min-width: 50vw;
   min-height: 60vh;
-  border: 3px solid #ffca33;
+  border: 3px solid #3EDBF0;
   border-radius: 20px;
 }
 
@@ -188,28 +188,137 @@ main {
 .mission {
   margin-bottom: 20px;
 }
+
+
 .detail_block {
   /* display: flex; */
   justify-content: center;
   align-items: center;
-  border: 1px solid #ffca33;
+  border: 1px solid #3EDBF0;
   border-radius: 10px;
   background: none;
   padding: 10px 13px;
   font-size: 20px;
   margin: 10px;
-  color: #ffca33;
+  color: #3EDBF0;
+}
+.detail_block_c {
+  /* display: flex; */
+
+  justify-content: center;
+  align-items: center;
+  border: 0px solid #3EDBF0;
+  border-radius: 100px;
+  background: none;
+  padding: 10px 18px;
+  font-size: 20px;
+  margin: 0 40px 0 40px;
+  color: #3EDBF0;
+}
+.patch_img{
+  justify-content: center;
+  animation: moveLeft 5.5s forwards;
+  -webkit-animation: moveLeft 5.5s forwards;
 }
+@keyframes moveLeft {
+
+    from {
+      transform: translateX(200px);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0px);
+      opacity: 100;
+    }
+
+}
+@-webkit-keyframes moveLeft {
+  from {
+    transform: translateX(200px);
+    opacity: 0;
+  }
+  to {
+      transform: translateX(0px);
+    opacity: 100;
+  }
+}
+#slider {
+
+    transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
+}
+
+.slide-in {
+
+    animation: fadeIn 5.5s forwards;
+    -webkit-animation: fadeIn 5.5s forwards;
+}
+.slide-in2 {
+
+    animation: fadeIn 5.5s forwards;
+    animation-delay: 0.5s ;
+    -webkit-animation: fadeIn 5.5s forwards;
+    -webkit-animation-delay:0.5s;
+}
+.slide-in3 {
+  animation: fadeIn 5.5s forwards;
+  animation-delay: 0.5s ;
+  -webkit-animation: fadeIn 5.5s forwards;
+  -webkit-animation-delay:0.5s;
+}
+.slide-in4 {
+  animation: fadeIn 5.5s forwards;
+  animation-delay: 1s ;
+  -webkit-animation: fadeIn 5.5s forwards;
+  -webkit-animation-delay:1s;
+}
+.slide-in5 {
+  animation: fadeIn 5.5s forwards;
+  animation-delay: 1s ;
+  -webkit-animation: fadeIn 5.5s forwards;
+  -webkit-animation-delay:1s;
+}
+.slide-in6 {
+  animation: fadeIn 5.5s forwards;
+  animation-delay: 1.5s ;
+  -webkit-animation: fadeIn 5.5s forwards;
+  -webkit-animation-delay:1.5s;
+}
+@keyframes fadiIn {
+    from {
+      transform: translateX(-400px);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0px);
+      opacity: 100;
+    }
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    transform: translateX(-400px);
+    opacity: 0;
+  }
+  to {
+      transform: translateX(0px);
+    opacity: 100;
+  }
+}
+.col_class1{
+
+}
+
 .detail_block1 {
   /* display: flex; */
   position: relative;
   justify-content: center;
   align-items: center;
-  border: 1px solid #ffca33;
+  border: 1px solid #3EDBF0;
   background: none;
   padding: 10px 13px;
   font-size: 20px;
-  color: #ffca33;
+  color: #3EDBF0;
 }
 
 .label {
@@ -224,19 +333,19 @@ main {
   margin-top: 20px;
 }
 .mission .name {
-  color: #ffca33;
+  color: #04009A;
   font-size: calc(25px + 2vw);
   font-weight: 900;
   margin: 30px 15px;
-  text-shadow: 2px 2px 10px #ffca33;
+  text-shadow: 2px 2px 10px #ffffff;
   animation: glow 3s ease-in-out infinite alternate;
 }
 .mission .name1 {
-  color: #ffca33;
+  color: #BEAEE2;
   font-size: calc(25px + 2vw);
   font-weight: 900;
   margin: 30px 10px;
-  text-shadow: 2px 2px 10px #ffca33;
+  text-shadow: 2px 2px 10px #BEAEE2;
   animation: glow 3s ease-in-out infinite alternate;
 }
 .boss{
@@ -264,7 +373,7 @@ main {
     width: 0px;
   right: 19%;
   } */
-  
+
 }
 .mission .anime span:nth-child(1) {
   position: absolute;
@@ -272,7 +381,7 @@ main {
   height: 4px;
   top: 0px;
   right: 2vw;
-  background: linear-gradient(to Right, transparent, rgb(252, 182, 102));
+  background: linear-gradient(to Right, transparent, rgb(251 ,	122	, 252));
   animation: border_anime 2s linear infinite;
 }
 .mission .anime span:nth-child(2) {
@@ -281,7 +390,7 @@ main {
   height: 100%;
   top: 9px;
   right: 0px;
-  background: linear-gradient(to bottom, transparent, rgb(250, 228, 180));
+  background: linear-gradient(to bottom, transparent, rgb(255 , 148	, 204));
   animation: border_anime2 2s linear infinite;
   animation-delay: 1s;
 }
@@ -291,7 +400,7 @@ main {
   height: 4px;
   top: 98%;
   right: 2px;
-  background: linear-gradient(to Left, transparent, rgb(250, 228, 180));
+  background: linear-gradient(to Left, transparent, rgb(251 ,	122	, 252));
   animation: border_anime3 2s linear infinite;
 }
 .mission .anime span:nth-child(4) {
@@ -300,7 +409,7 @@ main {
   height: 100%;
   top: 9px;
   right: 99.4%;
-  background: linear-gradient(to top, transparent, rgb(250, 228, 180));
+  background: linear-gradient(to top, transparent, rgb(255 , 148	, 204));
   animation: border_anime4 2s linear infinite;
   animation-delay: 1s;
 }
@@ -339,11 +448,11 @@ main {
 }
 @keyframes glow {
   from {
-    text-shadow: 0 0 06px #ff8633, 0 0 8px #ff8633, 0 0 10px #ff8633;
+    text-shadow: 0 0 06px #88FFF7, 0 0 8px #88FFF7, 0 0 10px #88FFF7;
   }
 
   to {
-    text-shadow: 0 0 06px #ff8633, 0 0 8px #ff8633, 0 1 10px #ff8633;
+    text-shadow: 0 0 06px #88FFF7, 0 0 8px #88FFF7, 0 1 10px #88FFF7;
   }
 }
 
@@ -375,13 +484,13 @@ main {
 }
 
 .btn {
-  border: 2px solid #ffca33;
+  border: 2px solid #9FD8DF;
   background: none;
   padding: 10px 20px;
   font-size: 20px;
   margin: 10px;
   /* margin-left: 40px; */
-  color: #ffca33;
+  color: #9FD8DF;
   transition: 0.8s;
   position: relative;
   border-radius: 6px;
@@ -395,7 +504,7 @@ main {
   right: 0;
   width: 0%;
   height: 100%;
-  background: #ffbb00;
+  background: #19D3DA;
   transition: 0.3s linear;
   z-index: -1;
 }
@@ -446,8 +555,8 @@ main {
   position: relative;
   width: calc(100px + 55vw);
   margin: 5px;
-  border: 4px solid #ffca33;
-  box-shadow: -1px 2px 7px #f5de69b5;
+  border: 4px solid #7868E6;
+  box-shadow: -1px 2px 7px #B8B5FF;
   height: auto;
 }
 
@@ -558,15 +667,15 @@ main {
 
 /*Footer*/
 footer {
-  background-color: #000000;
+  background-color: #ffffff;
   animation: glow 3s ease-in-out infinite alternate;
-  background: linear-gradient(90deg, #ff8633 -40%, black 50%, #ff8633 140%);
+  background: linear-gradient(90deg, #5C33F6 -40%, black 50%, #5C33F6 140%);
   text-align: center;
   padding-bottom: 15px;
 }
 .sm-handle {
   display: flex;
-  padding-top: 2rem;
+  padding: 1rem 4rem 0 4rem;
   justify-content: center;
 }
 .sm-button {
@@ -582,7 +691,7 @@ footer {
   text-decoration: none;
 }
 .sm-button:hover {
-  background: linear-gradient(to right,#ff8633, #ffbb00);
+  background: linear-gradient(to right,#39A2DB, #B5EAEA);
 }
 
 
@@ -595,12 +704,13 @@ footer {
   word-spacing: 2px;
   color: white;
   letter-spacing: 1.5px;
+  padding-bottom: 0;
 }
 
 
 .to-top
 {
-    background-color: goldenrod;
+    background-color: #3EDBF0;
     position: fixed;
     bottom: 16px;
     right: 32px;
@@ -618,7 +728,7 @@ footer {
     transition: all .4s;
 }
 .to-top:hover{
-  color: goldenrod;
+  color: #3EDBF0;
   background-color: lightgray;
 }
 
@@ -627,4 +737,4 @@ footer {
     bottom: 32px;
     pointer-events: auto;
     opacity: 1;
-}
\ No newline at end of file
+}

From 4c5eaf2793e030b7c3b305ac3b856284ec7e3bd7 Mon Sep 17 00:00:00 2001
From: 0_o <harshanand.jha@gmail.com>
Date: Wed, 14 Jul 2021 16:47:28 +0530
Subject: [PATCH 2/7] added restarting of animation

---
 index.html | 26 +++++++-------------------
 js/main.js | 28 ++++++++++++++++++++++++++++
 main.css   |  2 --
 3 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index 6961976..d25db12 100644
--- a/index.html
+++ b/index.html
@@ -56,7 +56,7 @@
     <div class="app-wrap">
         <header>
             <input id="fnumber" type="text" autocomplete="off" class="search-box" placeholder="Enter mission number">
-            <button onclick="fn()" class="btn" id="sbtn">Search</button>
+            <button onclick="fn();reset_animation();" type="submit" class="btn" id="sbtn">Search</button>
         </header>
     <main>
         <div class="mission_wrapper">
@@ -76,42 +76,30 @@
             <div class="row ">
               <div class="col-lg col_class1">
 
-                  <div  class="detail_block_c slide-in">
+                  <div  id="anim_1" class="detail_block_c slide-in">
                       <div class="label">Mission   No  </div>
                       <div id="number" class="number">1</div>
                   </div>
-                  <div class="detail_block_c slide-in2 ">
+                  <div id="anim_2"class="detail_block_c slide-in2 ">
                       <div class="label">Launch   Year </div>
                       <div id="year" class="year">2006</div>
                   </div>
-
-
-                    <div class="detail_block_c slide-in3">
+                    <div id="anim_3" class="detail_block_c slide-in3">
                         <div class="label">  Rocket Name :</div>
                         <div id="rname" class="rname">Falcon 1</div>
                     </div>
-
-
-                    <div class="detail_block_c slide-in4">
+                    <div id="anim_4"class="detail_block_c slide-in4">
                         <div class="label">Launch Site :</div>
                         <div id="lsite" class="rtype">Kwajalein Atoll Omelek Island</div>
                     </div>
-
-
-                    <div class="detail_block_c slide-in5">
+                    <div id="anim_5" class="detail_block_c slide-in5">
                         <div class="label">  Result :</div>
                         <div id="result" class="rname">Mission Failed</div>
                     </div>
-
-
-                    <div class="detail_block_c slide-in6">
+                    <div id="anim_6" class="detail_block_c slide-in6">
                         <div class="label">  Details :</div>
                         <div id="mdetail" class="rname">Merlin engine failure</div>
                     </div>
-
-
-
-
             </div>
               <div class="col-lg patch_img">
                   <img src = "https://images2.imgbox.com/3c/0e/T8iJcSN3_o.png" id="mission_patch" class="mission_patch patch_img" alt = "mission patch" height=200 width=200 align=right>
diff --git a/js/main.js b/js/main.js
index b2317c9..4199765 100644
--- a/js/main.js
+++ b/js/main.js
@@ -89,3 +89,31 @@ const stopVideo = () => {
 myfunc=(togle)=>{
 togle.classList.toggle("change");
 }
+
+//restarting animation after search
+function reset_animation() {
+  var el = document.getElementById("anim_1");
+  el.style.animation = 'none';
+  el.offsetHeight; /* trigger reflow */
+  el.style.animation = null;
+  var el1 = document.getElementById("anim_2");
+  el1.style.animation = 'none';
+  el1.offsetHeight; /* trigger reflow */
+  el1.style.animation = null;
+  var el2 = document.getElementById("anim_3");
+  el2.style.animation = 'none';
+  el2.offsetHeight; /* trigger reflow */
+  el2.style.animation = null;
+  var el3 = document.getElementById("anim_4");
+  el3.style.animation = 'none';
+  el3.offsetHeight; /* trigger reflow */
+  el3.style.animation = null;
+  var el4 = document.getElementById("anim_5");
+  el4.style.animation = 'none';
+  el4.offsetHeight; /* trigger reflow */
+  el4.style.animation = null;
+  var el5 = document.getElementById("anim_6");
+  el5.style.animation = 'none';
+  el5.offsetHeight; /* trigger reflow */
+  el5.style.animation = null;
+}
diff --git a/main.css b/main.css
index e9c24ef..af3f94f 100644
--- a/main.css
+++ b/main.css
@@ -305,9 +305,7 @@ main {
     opacity: 100;
   }
 }
-.col_class1{
 
-}
 
 .detail_block1 {
   /* display: flex; */

From 6a80f84b6a73b770f4814f6a75299436bdda5934 Mon Sep 17 00:00:00 2001
From: 0_o <harshanand.jha@gmail.com>
Date: Wed, 14 Jul 2021 20:21:40 +0530
Subject: [PATCH 3/7] reduced delay

---
 index.html | 16 +++++++++++++---
 js/main.js |  4 ++++
 main.css   | 39 ++++++++++++++++++++-------------------
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index d25db12..17ccf08 100644
--- a/index.html
+++ b/index.html
@@ -75,19 +75,26 @@
             </div>
             <div class="row ">
               <div class="col-lg col_class1">
-
+                <div class="row ">
+                  <div class="col-lg ">
                   <div  id="anim_1" class="detail_block_c slide-in">
                       <div class="label">Mission   No  </div>
                       <div id="number" class="number">1</div>
                   </div>
+                </div>
+                <div class="col-lg">
                   <div id="anim_2"class="detail_block_c slide-in2 ">
                       <div class="label">Launch   Year </div>
                       <div id="year" class="year">2006</div>
                   </div>
+                </div>
+                <div class="col-lg">
                     <div id="anim_3" class="detail_block_c slide-in3">
                         <div class="label">  Rocket Name :</div>
                         <div id="rname" class="rname">Falcon 1</div>
                     </div>
+                  </div>
+                </div>
                     <div id="anim_4"class="detail_block_c slide-in4">
                         <div class="label">Launch Site :</div>
                         <div id="lsite" class="rtype">Kwajalein Atoll Omelek Island</div>
@@ -101,8 +108,11 @@
                         <div id="mdetail" class="rname">Merlin engine failure</div>
                     </div>
             </div>
-              <div class="col-lg patch_img">
-                  <img src = "https://images2.imgbox.com/3c/0e/T8iJcSN3_o.png" id="mission_patch" class="mission_patch patch_img" alt = "mission patch" height=200 width=200 align=right>
+              <div id="anim_7" class="col-lg patch_img">
+                <div class="detail_block_c" >
+                  <div class="label">  Mission Patch :</div>
+                  <img src = "https://images2.imgbox.com/3c/0e/T8iJcSN3_o.png" id="mission_patch" class="mission_patch" alt = "mission patch" height=300 width=300 align=right>
+                </div>
               </div>
             </div>
             <div class="lnumber detail_row">
diff --git a/js/main.js b/js/main.js
index 4199765..4b6c6af 100644
--- a/js/main.js
+++ b/js/main.js
@@ -116,4 +116,8 @@ function reset_animation() {
   el5.style.animation = 'none';
   el5.offsetHeight; /* trigger reflow */
   el5.style.animation = null;
+  var el6 = document.getElementById("anim_7");
+  el6.style.animation = 'none';
+  el6.offsetHeight; /* trigger reflow */
+  el6.style.animation = null;
 }
diff --git a/main.css b/main.css
index af3f94f..38ce509 100644
--- a/main.css
+++ b/main.css
@@ -18,6 +18,7 @@ body {
 }
 ::-webkit-scrollbar-thumb:hover{
   background: linear-gradient(#A2DBFA,#39A2DB);
+  overflow-y: hidden;
 }
 
 .back{
@@ -204,18 +205,20 @@ main {
 }
 .detail_block_c {
   /* display: flex; */
+  /*animation-fill-mode: both;*/
 
   justify-content: center;
   align-items: center;
   border: 0px solid #3EDBF0;
-  border-radius: 100px;
+  border-radius: 50px;
   background: none;
   padding: 10px 18px;
   font-size: 20px;
-  margin: 0 40px 0 40px;
+  margin: 10px 40px 10px 40px;
   color: #3EDBF0;
 }
 .patch_img{
+  align-items: center;
   justify-content: center;
   animation: moveLeft 5.5s forwards;
   -webkit-animation: moveLeft 5.5s forwards;
@@ -242,12 +245,6 @@ main {
     opacity: 100;
   }
 }
-#slider {
-
-    transform: translateX(-100%);
-    -webkit-transform: translateX(-100%);
-}
-
 .slide-in {
 
     animation: fadeIn 5.5s forwards;
@@ -256,33 +253,34 @@ main {
 .slide-in2 {
 
     animation: fadeIn 5.5s forwards;
-    animation-delay: 0.5s ;
+    animation-delay: 0.1s ;
     -webkit-animation: fadeIn 5.5s forwards;
-    -webkit-animation-delay:0.5s;
+    -webkit-animation-delay:0.1s;
 }
 .slide-in3 {
   animation: fadeIn 5.5s forwards;
-  animation-delay: 0.5s ;
+  animation-delay: 0.1s ;
   -webkit-animation: fadeIn 5.5s forwards;
-  -webkit-animation-delay:0.5s;
+  -webkit-animation-delay:0.1s;
 }
 .slide-in4 {
   animation: fadeIn 5.5s forwards;
-  animation-delay: 1s ;
+  animation-delay: 0.1s ;
   -webkit-animation: fadeIn 5.5s forwards;
-  -webkit-animation-delay:1s;
+  -webkit-animation-delay:0.1s;
 }
 .slide-in5 {
   animation: fadeIn 5.5s forwards;
-  animation-delay: 1s ;
+  animation-delay: 0.1s ;
   -webkit-animation: fadeIn 5.5s forwards;
-  -webkit-animation-delay:1s;
+  -webkit-animation-delay:0.1s;
 }
 .slide-in6 {
+
   animation: fadeIn 5.5s forwards;
-  animation-delay: 1.5s ;
+  animation-delay: 0.1s ;
   -webkit-animation: fadeIn 5.5s forwards;
-  -webkit-animation-delay:1.5s;
+  -webkit-animation-delay:0.1s;
 }
 @keyframes fadiIn {
     from {
@@ -305,7 +303,10 @@ main {
     opacity: 100;
   }
 }
-
+.patch_img{
+  text-align: center;
+  justify-content: center;
+}
 
 .detail_block1 {
   /* display: flex; */

From 6c3b43913d99606e3b8a14b6a865250a698cbfe9 Mon Sep 17 00:00:00 2001
From: 0_o <harshanand.jha@gmail.com>
Date: Thu, 15 Jul 2021 02:19:55 +0530
Subject: [PATCH 4/7] arranged information in grid

---
 index.html | 41 ++++++++++++++++++++++++++++++-----------
 js/main.js | 17 +++++++++++++----
 main.css   | 44 +++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 82 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 17ccf08..d13ccad 100644
--- a/index.html
+++ b/index.html
@@ -73,48 +73,65 @@
                      <div class="name">👨‍🚀</div>
                 </div>
             </div>
+            <div class="container">
             <div class="row ">
-              <div class="col-lg col_class1">
-                <div class="row ">
-                  <div class="col-lg ">
+              <div class="col-9" >
+                <div class="container-fluid">
+                <div class="row row_placement">
+                  <div class="col">
                   <div  id="anim_1" class="detail_block_c slide-in">
                       <div class="label">Mission   No  </div>
                       <div id="number" class="number">1</div>
                   </div>
                 </div>
-                <div class="col-lg">
+                <div class="col">
                   <div id="anim_2"class="detail_block_c slide-in2 ">
                       <div class="label">Launch   Year </div>
                       <div id="year" class="year">2006</div>
                   </div>
                 </div>
-                <div class="col-lg">
+                <div class="col">
                     <div id="anim_3" class="detail_block_c slide-in3">
                         <div class="label">  Rocket Name :</div>
                         <div id="rname" class="rname">Falcon 1</div>
                     </div>
                   </div>
                 </div>
+              </div>
+              <div class="container-fluid">
+                <div class="row row_placement">
+                  <div class="col">
                     <div id="anim_4"class="detail_block_c slide-in4">
                         <div class="label">Launch Site :</div>
                         <div id="lsite" class="rtype">Kwajalein Atoll Omelek Island</div>
                     </div>
+                  </div>
+
+                  <div class="col">
                     <div id="anim_5" class="detail_block_c slide-in5">
                         <div class="label">  Result :</div>
                         <div id="result" class="rname">Mission Failed</div>
                     </div>
+                  </div>
+                </div>
+              </div>
+              <div class="container-fluid">
+                <div class="row row_placement">
+                  <div class="col">
                     <div id="anim_6" class="detail_block_c slide-in6">
                         <div class="label">  Details :</div>
-                        <div id="mdetail" class="rname">Merlin engine failure</div>
+                        <div id="mdetail" class="rname"><p id="typedetails" class="details"> Merlin engine failure </p></div>
                     </div>
-            </div>
-              <div id="anim_7" class="col-lg patch_img">
-                <div class="detail_block_c" >
-                  <div class="label">  Mission Patch :</div>
-                  <img src = "https://images2.imgbox.com/3c/0e/T8iJcSN3_o.png" id="mission_patch" class="mission_patch" alt = "mission patch" height=300 width=300 align=right>
+                  </div>
                 </div>
               </div>
             </div>
+              <div id="anim_7"  class="col-3 patch_img ">
+                              <div class="label patch_ps">  Mission Patch :</div>
+                  <img src = "https://images2.imgbox.com/3c/0e/T8iJcSN3_o.png" id="mission_patch" class="mission_patch" alt = "mission patch" height=250 width=250 align=right>
+              </div>
+            </div>
+          </div>
             <div class="lnumber detail_row">
             </div>
               <div class="lnumber detail_row">
@@ -141,6 +158,7 @@
         </div>
     </div>
     <footer>
+
         <div class="sm-handle">
             <a href="https://linkedin.com/in/manan-kohli" class="sm-button" target="_blank">
 
@@ -155,6 +173,7 @@
             </div>
             <br>
             <p class="copyright">&copy Copyright <script>document.write(new Date().getFullYear())</script> | ❤️Manan Kohli</a></p>
+
     </footer>
     <a href="#" class="to-top">
         <i class="fa fa-arrow-up" style="font-size:36px"></i>
diff --git a/js/main.js b/js/main.js
index 4b6c6af..26da220 100644
--- a/js/main.js
+++ b/js/main.js
@@ -15,11 +15,12 @@ fetch(url+fnum).then(function(response){
     document.getElementById("year").textContent=obj.launch_year;
     document.getElementById("mname").textContent=obj.mission_name;
     document.getElementById("rname").textContent= obj.rocket.rocket_name ;
-    document.getElementById("lsite").textContent=obj.launch_site.site_name_long;
+    document.getElementById("lsite").textContent=obj.launch_site.site_name;
     document.getElementById("mission_patch").style.display = "block";
     document.getElementById("mission_patch").src=obj.links.mission_patch_small;
     document.getElementById("artlink").href=obj.links.article_link;
-    document.getElementById("mdetail").textContent=obj.details;
+
+    // document.getElementById("lTime").textContent=obj.launch_date_local;
     if (obj.launch_success === true) {
       document.getElementById("result").textContent="Mission Successful";
 
@@ -28,8 +29,12 @@ fetch(url+fnum).then(function(response){
       document.getElementById("result").textContent="Mission Failure"
 
     }
-
-
+    if (obj.details===null) {
+      document.getElementById("mdetail").textContent="NA";
+    }
+    else {
+      document.getElementById("mdetail").textContent=obj.details;
+    }
 
     document.getElementById("vidframe").src=`https://www.youtube.com/embed/${obj.links.youtube_id}`;
 }).catch(function(error){
@@ -120,4 +125,8 @@ function reset_animation() {
   el6.style.animation = 'none';
   el6.offsetHeight; /* trigger reflow */
   el6.style.animation = null;
+  var el7 = document.getElementById("typedetails");
+  el7.style.animation = 'none';
+  el7.offsetHeight; /* trigger reflow */
+  el7.style.animation = null;
 }
diff --git a/main.css b/main.css
index 38ce509..440a6c5 100644
--- a/main.css
+++ b/main.css
@@ -160,6 +160,7 @@ header input:focus {
 }
 
 main {
+
   padding: 14px 25px;
   text-align: center;
 }
@@ -190,7 +191,11 @@ main {
   margin-bottom: 20px;
 }
 
-
+.row_placement{
+  margin-right: auto;
+  margin-left: 0;
+  padding-left: 0;
+}
 .detail_block {
   /* display: flex; */
   justify-content: center;
@@ -199,7 +204,7 @@ main {
   border-radius: 10px;
   background: none;
   padding: 10px 13px;
-  font-size: 20px;
+  font-size: 10px 40px 10px 40px;
   margin: 10px;
   color: #3EDBF0;
 }
@@ -207,10 +212,10 @@ main {
   /* display: flex; */
   /*animation-fill-mode: both;*/
 
-  justify-content: center;
+  justify-content: space-around ;
   align-items: center;
-  border: 0px solid #3EDBF0;
-  border-radius: 50px;
+  border: 1px solid #3EDBF0;
+  border-radius: 10px;
   background: none;
   padding: 10px 18px;
   font-size: 20px;
@@ -218,6 +223,7 @@ main {
   color: #3EDBF0;
 }
 .patch_img{
+
   align-items: center;
   justify-content: center;
   animation: moveLeft 5.5s forwards;
@@ -307,7 +313,33 @@ main {
   text-align: center;
   justify-content: center;
 }
+.patch_ps{
+  font-size: 20px;
+  padding-left: 60px;
+}
+/*typewriting effect*/
+.details{
+  margin-top: 20px;
+  white-space: nowrap;
+    overflow: hidden;
+    transform: translateY(-50%);
+    animation: typewriter 4s steps(44) 1s 1 normal both,
+               blinkTextCursor 500ms steps(44) infinite normal;
+}
 
+
+/* The typing effect */
+@keyframes typewriter {
+  from { width: 0 }
+  to { width: 100% }
+}
+
+/* The typewriter cursor effect */
+@keyframes blinkTextCursor {
+  from, to { border-color: transparent }
+  50% { border-color: orange; }
+}
+/* *********************************************** */
 .detail_block1 {
   /* display: flex; */
   position: relative;
@@ -666,12 +698,14 @@ main {
 
 /*Footer*/
 footer {
+
   background-color: #ffffff;
   animation: glow 3s ease-in-out infinite alternate;
   background: linear-gradient(90deg, #5C33F6 -40%, black 50%, #5C33F6 140%);
   text-align: center;
   padding-bottom: 15px;
 }
+
 .sm-handle {
   display: flex;
   padding: 1rem 4rem 0 4rem;

From 335f3314e1e7c4b820de91a33eaafaf7541568a8 Mon Sep 17 00:00:00 2001
From: 0_o <harshanand.jha@gmail.com>
Date: Thu, 15 Jul 2021 22:44:35 +0530
Subject: [PATCH 5/7] Improved spacing between elements

---
 index.html | 17 +++++++++--------
 main.css   | 25 ++++++++++++++++++-------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index d13ccad..6f79594 100644
--- a/index.html
+++ b/index.html
@@ -73,11 +73,11 @@
                      <div class="name">👨‍🚀</div>
                 </div>
             </div>
-            <div class="container">
+            <div class="container-fluid">
             <div class="row ">
               <div class="col-9" >
-                <div class="container-fluid">
-                <div class="row row_placement">
+                <div class="container">
+                <div class="row">
                   <div class="col">
                   <div  id="anim_1" class="detail_block_c slide-in">
                       <div class="label">Mission   No  </div>
@@ -98,8 +98,8 @@
                   </div>
                 </div>
               </div>
-              <div class="container-fluid">
-                <div class="row row_placement">
+              <div class="container">
+                <div class="row ">
                   <div class="col">
                     <div id="anim_4"class="detail_block_c slide-in4">
                         <div class="label">Launch Site :</div>
@@ -115,8 +115,8 @@
                   </div>
                 </div>
               </div>
-              <div class="container-fluid">
-                <div class="row row_placement">
+              <div class="container">
+                <div class="row ">
                   <div class="col">
                     <div id="anim_6" class="detail_block_c slide-in6">
                         <div class="label">  Details :</div>
@@ -128,7 +128,9 @@
             </div>
               <div id="anim_7"  class="col-3 patch_img ">
                               <div class="label patch_ps">  Mission Patch :</div>
+                              <div class="img-pos">
                   <img src = "https://images2.imgbox.com/3c/0e/T8iJcSN3_o.png" id="mission_patch" class="mission_patch" alt = "mission patch" height=250 width=250 align=right>
+                    </div>
               </div>
             </div>
           </div>
@@ -158,7 +160,6 @@
         </div>
     </div>
     <footer>
-
         <div class="sm-handle">
             <a href="https://linkedin.com/in/manan-kohli" class="sm-button" target="_blank">
 
diff --git a/main.css b/main.css
index 440a6c5..dfacf9a 100644
--- a/main.css
+++ b/main.css
@@ -18,7 +18,7 @@ body {
 }
 ::-webkit-scrollbar-thumb:hover{
   background: linear-gradient(#A2DBFA,#39A2DB);
-  overflow-y: hidden;
+
 }
 
 .back{
@@ -168,13 +168,14 @@ main {
 
 
 .mission_wrapper {
-  display: flex;
+  display:flex;
   flex-direction: column;
   align-items: center;
   min-width: 50vw;
   min-height: 60vh;
   border: 3px solid #3EDBF0;
   border-radius: 20px;
+
 }
 
 .detail_row {
@@ -191,11 +192,7 @@ main {
   margin-bottom: 20px;
 }
 
-.row_placement{
-  margin-right: auto;
-  margin-left: 0;
-  padding-left: 0;
-}
+
 .detail_block {
   /* display: flex; */
   justify-content: center;
@@ -312,6 +309,17 @@ main {
 .patch_img{
   text-align: center;
   justify-content: center;
+  padding-right: 10px;
+}
+.img-pos{
+  padding-top: 30px;
+  padding-right: 80px;
+}
+@media (max-width:1300px) {
+  .img-pos{
+    padding: 0;
+    margin-left: 150px;
+  }
 }
 .patch_ps{
   font-size: 20px;
@@ -619,9 +627,11 @@ main {
   margin-top: -2rem;
   margin-right: -2rem;
 }
+
 @media (min-width: 1025px) {
   .spa {
     display: none;
+
   }
 }
 
@@ -704,6 +714,7 @@ footer {
   background: linear-gradient(90deg, #5C33F6 -40%, black 50%, #5C33F6 140%);
   text-align: center;
   padding-bottom: 15px;
+
 }
 
 .sm-handle {

From 545f1af226d5621560313eb446602b6dad7e8925 Mon Sep 17 00:00:00 2001
From: Harsh_1337 <harshanand.jha@gmail.com>
Date: Fri, 16 Jul 2021 02:19:11 +0530
Subject: [PATCH 6/7] final commit

---
 index.html |  4 ++--
 main.css   | 44 ++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 6f79594..5635ee7 100644
--- a/index.html
+++ b/index.html
@@ -127,9 +127,9 @@
               </div>
             </div>
               <div id="anim_7"  class="col-3 patch_img ">
-                              <div class="label patch_ps">  Mission Patch :</div>
+                              <h4 style="color:white">Mission patch :</h4>
                               <div class="img-pos">
-                  <img src = "https://images2.imgbox.com/3c/0e/T8iJcSN3_o.png" id="mission_patch" class="mission_patch" alt = "mission patch" height=250 width=250 align=right>
+                  <img src = "https://images2.imgbox.com/3c/0e/T8iJcSN3_o.png" id="mission_patch" class="mission_patch" alt = "mission patch"  align=right>
                     </div>
               </div>
             </div>
diff --git a/main.css b/main.css
index dfacf9a..d4fe99c 100644
--- a/main.css
+++ b/main.css
@@ -18,7 +18,8 @@ body {
 }
 ::-webkit-scrollbar-thumb:hover{
   background: linear-gradient(#A2DBFA,#39A2DB);
-
+ overflow-x: hidden;
+ overflow-y: hidden;
 }
 
 .back{
@@ -160,14 +161,22 @@ header input:focus {
 }
 
 main {
-
+  position: relative;
+  min-height: 100vh;
   padding: 14px 25px;
   text-align: center;
 }
+@media (max-width:1315) {
+  main{
+    position: static;
+    min-height: 0
+  }
 
+}
 
 
 .mission_wrapper {
+
   display:flex;
   flex-direction: column;
   align-items: center;
@@ -306,6 +315,10 @@ main {
     opacity: 100;
   }
 }
+#mission_patch{
+  height: 250px;
+  width: 250px;
+}
 .patch_img{
   text-align: center;
   justify-content: center;
@@ -318,7 +331,20 @@ main {
 @media (max-width:1300px) {
   .img-pos{
     padding: 0;
-    margin-left: 150px;
+    margin-left: 20px;
+  }
+
+}
+@media (max-width:1315px) {
+  #mission_patch{
+    height: 180px;
+    width:180px;
+  }
+}
+@media (max=width:670) {
+  #mission_patch{
+    height: 125px;
+    width:125px;
   }
 }
 .patch_ps{
@@ -708,7 +734,9 @@ main {
 
 /*Footer*/
 footer {
-
+  position: absolute;
+    bottom: 0;
+    width: 100%;
   background-color: #ffffff;
   animation: glow 3s ease-in-out infinite alternate;
   background: linear-gradient(90deg, #5C33F6 -40%, black 50%, #5C33F6 140%);
@@ -716,6 +744,14 @@ footer {
   padding-bottom: 15px;
 
 }
+@media (max-width:1315px) {
+  footer{
+    position: static;
+    bottom: auto;
+    width: auto;
+
+  }
+}
 
 .sm-handle {
   display: flex;

From 9ddae5c5afb457549f1fc664a091ce5a11a9e8a2 Mon Sep 17 00:00:00 2001
From: Harsh_1337 <harshanand.jha@gmail.com>
Date: Fri, 16 Jul 2021 17:14:22 +0530
Subject: [PATCH 7/7] final commit added comments for the sections that were
 edited

---
 js/main.js | 28 +++++++++++++++-------------
 main.css   | 11 ++++++++++-
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/js/main.js b/js/main.js
index 26da220..2a2c067 100644
--- a/js/main.js
+++ b/js/main.js
@@ -20,21 +20,21 @@ fetch(url+fnum).then(function(response){
     document.getElementById("mission_patch").src=obj.links.mission_patch_small;
     document.getElementById("artlink").href=obj.links.article_link;
 
-    // document.getElementById("lTime").textContent=obj.launch_date_local;
+    // getting mission outcome and details
     if (obj.launch_success === true) {
-      document.getElementById("result").textContent="Mission Successful";
+       document.getElementById("result").textContent="Mission Successful";
 
-    }
-    else if (obj.launch_success === false) {
-      document.getElementById("result").textContent="Mission Failure"
+     }
+     else if (obj.launch_success === false) {
+       document.getElementById("result").textContent="Mission Failure"
 
-    }
-    if (obj.details===null) {
-      document.getElementById("mdetail").textContent="NA";
-    }
-    else {
-      document.getElementById("mdetail").textContent=obj.details;
-    }
+     }
+     if (obj.details===null) {
+       document.getElementById("mdetail").textContent="NA";
+     }
+     else {
+       document.getElementById("mdetail").textContent=obj.details;
+     }
 
     document.getElementById("vidframe").src=`https://www.youtube.com/embed/${obj.links.youtube_id}`;
 }).catch(function(error){
@@ -48,6 +48,8 @@ fetch(url+fnum).then(function(response){
     document.getElementById("mission_patch").style.display = "none";
     document.getElementById("artlink").href=obj.links.article_link;
     document.getElementById("vidframe").src=`https://www.youtube.com/embed/${obj.links.youtube_id}`;
+    document.getElementById("result").textContent="NA";
+    document.getElementById("mdetail").textContent="NA";
     console.error(error);
 });
 }
@@ -95,7 +97,7 @@ myfunc=(togle)=>{
 togle.classList.toggle("change");
 }
 
-//restarting animation after search
+//restarting animation after a number is entered
 function reset_animation() {
   var el = document.getElementById("anim_1");
   el.style.animation = 'none';
diff --git a/main.css b/main.css
index d4fe99c..bb1b114 100644
--- a/main.css
+++ b/main.css
@@ -166,6 +166,7 @@ main {
   padding: 14px 25px;
   text-align: center;
 }
+/* changing main's position when screen size reduces */
 @media (max-width:1315) {
   main{
     position: static;
@@ -214,6 +215,7 @@ main {
   margin: 10px;
   color: #3EDBF0;
 }
+
 .detail_block_c {
   /* display: flex; */
   /*animation-fill-mode: both;*/
@@ -228,6 +230,7 @@ main {
   margin: 10px 40px 10px 40px;
   color: #3EDBF0;
 }
+/* animation for mission patch */
 .patch_img{
 
   align-items: center;
@@ -257,6 +260,8 @@ main {
     opacity: 100;
   }
 }
+/* **************************************************************************** */
+/* animation for information blocks */
 .slide-in {
 
     animation: fadeIn 5.5s forwards;
@@ -315,6 +320,8 @@ main {
     opacity: 100;
   }
 }
+/* ***************************************************************** */
+/* ******************* resizing patch when screen size reduces******************************************* */
 #mission_patch{
   height: 250px;
   width: 250px;
@@ -351,6 +358,7 @@ main {
   font-size: 20px;
   padding-left: 60px;
 }
+/* ******************************************************** */
 /*typewriting effect*/
 .details{
   margin-top: 20px;
@@ -744,6 +752,7 @@ footer {
   padding-bottom: 15px;
 
 }
+/* fixing foooter to bottom */
 @media (max-width:1315px) {
   footer{
     position: static;
@@ -752,7 +761,7 @@ footer {
 
   }
 }
-
+/* **************************************************** */
 .sm-handle {
   display: flex;
   padding: 1rem 4rem 0 4rem;