Skip to content

Commit

Permalink
martian imagery section
Browse files Browse the repository at this point in the history
  • Loading branch information
@PranavBarthwal
PranavBarthwal committed Jan 14, 2024
1 parent 27b64eb commit 316807a
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 40 deletions.
38 changes: 19 additions & 19 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,36 +114,36 @@ particlesJS("bg", {



// NASA API CALL
// NASA API CALL 1 : APoD

// fetch('https://api.nasa.gov/planetary/apod?api_key=eISHzmGbQk7EMWv9NTlVtvzZVmeLKPUoL3uKMSPJ')
// .then((response) => {
// return response.json()
// }).then((data) => {
// console.log(data)
fetch('https://api.nasa.gov/planetary/apod?api_key=eISHzmGbQk7EMWv9NTlVtvzZVmeLKPUoL3uKMSPJ')
.then((response) => {
return response.json()
}).then((data) => {
console.log(data)

// displayData(data.hdurl, data.explanation, data.title, data.date, data.copyright )
displayData(data.url, data.explanation, data.title, data.date, data.copyright )

// })
// .catch((error) => console.log(error))
})
.catch((error) => console.log(error))


// function to display data in apod section
// function displayData(image, info, title, date, copyright){
// document.getElementById("apod_img").src = image
// document.getElementById("apod_info").textContent = info
// document.getElementById("title").textContent = title
// document.getElementById("date").textContent = date
// document.getElementById("copyright").textContent = copyright
//function to display data in apod section
function displayData(image, info, title, date, copyright){
document.getElementById("apod_img").src = image
document.getElementById("apod_info").textContent = info
document.getElementById("title").textContent = title
document.getElementById("date").textContent = date
document.getElementById("copyright").textContent = copyright

// }
}




// NASA API CALL 2
// NASA API CALL 2 : Mars Rover Photos

// fetch('https://api.nasa.gov/EPIC/api/natural/images?api_key=eISHzmGbQk7EMWv9NTlVtvzZVmeLKPUoL3uKMSPJ')
// fetch('https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2015-6-3&api_key=eISHzmGbQk7EMWv9NTlVtvzZVmeLKPUoL3uKMSPJ')
// .then((response) => {
// return response.json()
// }).then((data) => {
Expand Down
51 changes: 41 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<a class="nav-link text-light" href="#">APoD</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">CosmoNews</a>
<a class="nav-link text-light" href="#">MartianImagery</a>
</li>
<li class="nav-item">
<button class="btn btn-outline-light" type="submit">Contact Us</button>
Expand Down Expand Up @@ -75,11 +75,11 @@ <h1 class="display-2 fw-bold text-light">Let's embark on a Cosmic Expedition.</h


<!-- APOD SECTION -->

<h1 align="center">Astronomy Picture of The Day</h1>
<div class="container my-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
<h2 class="display-6 fw-bold lh-1 text-light">Astronomy Picture Of The Day</h2><br>
<h2 id="title" class="display-7 fw-bold lh-1 text-light">APoD Title</h2><br>

<p id="apod_info" class="lead">NASA's Astronomy Picture of the Day (APoD) showcases captivating celestial images accompanied by brief explanations. Each day, NASA features astronomical wonders, ranging from stunning nebulae and galaxies to snapshots of our solar system, providing a daily dose of cosmic beauty and scientific insight. APoD serves as a valuable resource for both astronomy enthusiasts and those seeking to explore the wonders of the universe.</p>

Expand All @@ -88,9 +88,8 @@ <h2 class="display-6 fw-bold lh-1 text-light">Astronomy Picture Of The Day</h2><
<div class="card text-bg-dark" style="width: 30rem; max-height: 400px;">
<img src="./assets/64e4e4aabd98a600197c0ca3.webp" id="apod_img" class="card-img" height="400px" width="30rem">
<div class="card-img-overlay">
<h5 id="title" class="card-title"></h5>
<p id="copyright" class="card-text"></p>
<p id="date" class="card-text"><small></small></p>
<h5 id="copyright" class="card-title"></h5>
<p id="date" class="card-text"></p>
</div>
</div>
</div>
Expand All @@ -103,11 +102,40 @@ <h5 id="title" class="card-title"></h5>



<!-- COSMO NEWS -->
<h1 align="center">CosmoNews</h1>
<!-- Mars Rover Photos -->
<h1 align="center">Mars Rover Photos</h1>
<br>
<br>
<div class="rover_container">
<div class="rover_section_text">
<p>Embark on a fascinating journey into the Martian landscape as we delve into the photographic archives of diverse rovers, each boasting a distinctive collection of images meticulously stored in a comprehensive database. This rich repository offers an extensive visual chronicle of Mars' exploration.

Discover the convenience of accessing Mars rover images effortlessly by entering the Earth date corresponding to a specific photo. This user-friendly approach provides unparalleled flexibility, allowing you to seamlessly navigate through the captivating imagery captured during the exploration of the enigmatic Red Planet.Whether you're intrigued by the geological formations, atmospheric phenomena, or the rover's own milestones, this immersive experience promises a deeper understanding of Mars' unique features and the scientific endeavors undertaken by these robotic explorers. Join us in unlocking the mysteries of the Red Planet through the lens of cutting-edge technology and unparalleled exploration.</p>
</div>
</div>


<br>
<br>
<div class="mars_container">
<div class="card" style="width: 40rem;">
<img src="./assets/64e4e4aabd98a600197c0ca3.webp" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Get Martian Images real quick!</p>
</div>
</div>
</div>

<br>
<div class="container marketing">

<div class="input-group mb-4 input_container">
<input class="date_input" type="text" ="form-control" placeholder="Enter the date for retrieving Mars Rover Images. (YYYY-MM-DD)" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-primary" type="button" id="button-addon2">Enter</button>
</div>



<!-- <div class="container marketing">
<hr class="featurette-divider">
<div class="row featurette">
Expand Down Expand Up @@ -142,7 +170,7 @@ <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class=
<div class="col-md-5">
<img src="./assets/jb1p0zcvmgrdx7yq9sur.png" width="500" height="500">
</div>
</div>
</div>
<hr class="featurette-divider">
Expand All @@ -151,6 +179,9 @@ <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class=
</div>
<br>
<br>
<br>
<br>




Expand Down
43 changes: 32 additions & 11 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,46 @@ body{


#bg{
position: absolute;
position:fixed;
top:0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}

.input_container{
display: flex;
width: 100%;
justify-content: center;

}

.date_input{
width: 700px;
}




.rover_container{
width: 100;
display: flex;
justify-content: center;

}
.rover_section_text{
width: 70%;
}


.mars_container{
width: 100%;
display: flex;
justify-content: center;

}

/* #apod_img{
margin-bottom: 50px;
border-radius: 20px;
border-color: aliceblue;
border: 1px;
} */
/*
#apod_img:hover{
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
} */



Expand Down

0 comments on commit 316807a

Please sign in to comment.