Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Testing2 #153

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Testing2 #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9c8c937
added animation an improved color scheme
Harsh-1337 Jul 14, 2021
4c5eaf2
added restarting of animation
Harsh-1337 Jul 14, 2021
6a80f84
reduced delay
Harsh-1337 Jul 14, 2021
6c3b439
arranged information in grid
Harsh-1337 Jul 14, 2021
335f331
Improved spacing between elements
Harsh-1337 Jul 15, 2021
545f1af
final commit
Harsh-1337 Jul 15, 2021
9ddae5c
final commit added comments for the sections that were edited
Harsh-1337 Jul 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 67 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<div id="preloading">
</div>
<main class = "back">


<!-- Navbar -->
<nav class="navbar navbar-expand-lg scrolling-navbar">
Expand Down Expand Up @@ -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">
Expand All @@ -73,29 +73,72 @@
<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 class="container-fluid">
<div class="row ">
<div class="col-9" >
<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>
<div id="number" class="number">1</div>
</div>
</div>
<div class="detail_block ">
<div class="label">Launch Year :</div>
<div id="year" class="year">2006</div>
<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>
<div class="vehicle detail_row">
<div class="detail_block">
<div class="label"> Rocket Name :</div>
<div id="rname" class="rname">Falcon 1</div>
<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="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="container">
<div class="row ">
<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">
<div class="row ">
<div class="col">
<div id="anim_6" class="detail_block_c slide-in6">
<div class="label"> Details :</div>
<div id="mdetail" class="rname"><p id="typedetails" class="details"> Merlin engine failure </p></div>
</div>
</div>
</div>
</div>
</div>
<div id="anim_7" class="col-3 patch_img ">
<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" align=right>
</div>
</div>
</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>
Expand Down Expand Up @@ -130,17 +173,18 @@
</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>
Expand Down
65 changes: 60 additions & 5 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,27 @@ 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;

// getting mission outcome and details
if (obj.launch_success === true) {
document.getElementById("result").textContent="Mission Successful";

}
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;
}

document.getElementById("vidframe").src=`https://www.youtube.com/embed/${obj.links.youtube_id}`;
}).catch(function(error){
console.error('wrong');
Expand All @@ -31,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);
});
}
Expand Down Expand Up @@ -58,15 +77,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);

Expand All @@ -76,4 +95,40 @@ const stopVideo = () => {
}
myfunc=(togle)=>{
togle.classList.toggle("change");
}
}

//restarting animation after a number is entered
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;
var el6 = document.getElementById("anim_7");
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;
}
Loading