diff --git a/Pages/asteroid-info/index.html b/Pages/asteroid-info/index.html index 0f46a5c..856012f 100644 --- a/Pages/asteroid-info/index.html +++ b/Pages/asteroid-info/index.html @@ -1,137 +1,188 @@ - - - - + + + Asteroids - Near Earth Object Web Service - - - - - - - - - - + + + + + + + + +
-
-
-

Near Earth Objects

- -
- - -
- -
- - -
- -
- - -
-
- - - The ending date should not be more than 7 than the Starting date
-
-
- - +
+

Near Earth Objects

+ +
+ +
-
-

Name of the Asteroid: X6969

- -
- -
-

Estimated diameter (km)

-

Min: X

-

Max: X

-
- -
-

Potential hazardous?

-

Yes

-
- -
-

Close approach Date (YYYY-MM-DD)

-

2024-05-12

-
- -
-

Relative Velocity

-

km/sec: X

-

km/hr: X

-
- -
-

Orbiting body

- Earth -
+
+ + +
-
-

Sentry object

- No -
+
+
+
+ + + The ending date should not be more than 7 than the Starting date +
+
+
-
+ +
+ +
+

+ Name of the Asteroid: X6969 +

+ +
+
+

Estimated diameter (km)

+

Min: X

+

Max: X

+
+ +
+

Potential hazardous?

+

Yes

+
+ +
+

Close approach Date (YYYY-MM-DD)

+

2024-05-12

+
+ +
+

Relative Velocity

+

km/sec: X

+

km/hr: X

+
+ +
+

Orbiting body

+ Earth +
+ +
+

Sentry object

+ No +
+
- - - \ No newline at end of file + + diff --git a/Pages/asteroid-info/script.js b/Pages/asteroid-info/script.js index fc1760f..a229c8f 100644 --- a/Pages/asteroid-info/script.js +++ b/Pages/asteroid-info/script.js @@ -1,215 +1,229 @@ // PARTICLES BACKGROUND -particlesJS("bg-ast", { - "particles": { - "number": { - "value": 650, - "density": { - "enable": true, - "value_area": 789.1476416322727 - } - }, - "color": { - "value": "#ffffff" - }, - "shape": { - "type": "circle", - "stroke": { - "width": 0, - "color": "#000000" - }, - "polygon": { - "nb_sides": 5 - }, - "image": { - "src": "img/github.svg", - "width": 100, - "height": 100 - } - }, - "opacity": { - "value": 0.48927153781200905, - "random": false, - "anim": { - "enable": true, - "speed": 1.5, - "opacity_min": 0, - "sync": false - } - }, - "size": { - "value": 3, - "random": true, - "anim": { - "enable": true, - "speed": 2, - "size_min": 0, - "sync": false - } - }, - "line_linked": { - "enable": false, - "distance": 150, - "color": "#ffffff", - "opacity": 0.4, - "width": 1 - }, - "move": { - "enable": true, - "speed": 0.2, - "direction": "none", - "random": true, - "straight": false, - "out_mode": "out", - "bounce": false, - "attract": { - "enable": false, - "rotateX": 600, - "rotateY": 1200 - } - } +particlesJS('bg-ast', { + particles: { + number: { + value: 650, + density: { + enable: true, + value_area: 789.1476416322727 + } }, - "interactivity": { - "detect_on": "canvas", - "events": { - "onhover": { - "enable": true, - "mode": "bubble" - }, - "onclick": { - "enable": true, - "mode": "push" - }, - "resize": true - }, - "modes": { - "grab": { - "distance": 400, - "line_linked": { - "opacity": 1 - } - }, - "bubble": { - "distance": 83.91608391608392, - "size": 1, - "duration": 3, - "opacity": 1, - "speed": 3 - }, - "repulse": { - "distance": 200, - "duration": 0.4 - }, - "push": { - "particles_nb": 4 - }, - "remove": { - "particles_nb": 2 - } - } + color: { + value: '#ffffff' + }, + shape: { + type: 'circle', + stroke: { + width: 0, + color: '#000000' + }, + polygon: { + nb_sides: 5 + }, + image: { + src: 'img/github.svg', + width: 100, + height: 100 + } + }, + opacity: { + value: 0.48927153781200905, + random: false, + anim: { + enable: true, + speed: 1.5, + opacity_min: 0, + sync: false + } + }, + size: { + value: 3, + random: true, + anim: { + enable: true, + speed: 2, + size_min: 0, + sync: false + } }, - "retina_detect": true -}); + line_linked: { + enable: false, + distance: 150, + color: '#ffffff', + opacity: 0.4, + width: 1 + }, + move: { + enable: true, + speed: 0.2, + direction: 'none', + random: true, + straight: false, + out_mode: 'out', + bounce: false, + attract: { + enable: false, + rotateX: 600, + rotateY: 1200 + } + } + }, + interactivity: { + detect_on: 'canvas', + events: { + onhover: { + enable: true, + mode: 'bubble' + }, + onclick: { + enable: true, + mode: 'push' + }, + resize: true + }, + modes: { + grab: { + distance: 400, + line_linked: { + opacity: 1 + } + }, + bubble: { + distance: 83.91608391608392, + size: 1, + duration: 3, + opacity: 1, + speed: 3 + }, + repulse: { + distance: 200, + duration: 0.4 + }, + push: { + particles_nb: 4 + }, + remove: { + particles_nb: 2 + } + } + }, + retina_detect: true +}) // Rest of the logic // Search button and the asteroid-info-div -let searchBtn = document.querySelector("#dates-submit-btn"); -let asteroidInfoDiv = document.querySelector(".asteroid-info"); +let searchBtn = document.querySelector('#dates-submit-btn') +let asteroidInfoDiv = document.querySelector('.asteroid-info') // Variables for constructing the URL -var startDateInput; -var endDateInput; +var startDateInput +var endDateInput // Function to construct the URL -function constructURL(startDate, endDate) { - return `https://api.nasa.gov/neo/rest/v1/feed?start_date=${startDate}&end_date=${endDate}&api_key=eISHzmGbQk7EMWv9NTlVtvzZVmeLKPUoL3uKMSPJ`; +function constructURL (startDate, endDate) { + return `https://api.nasa.gov/neo/rest/v1/feed?start_date=${startDate}&end_date=${endDate}&api_key=eISHzmGbQk7EMWv9NTlVtvzZVmeLKPUoL3uKMSPJ` } // Checks for change event in the starting date input -document.getElementById("starting-date").addEventListener("change", function() { - startDateInput = this.value; +document + .getElementById('starting-date') + .addEventListener('change', function () { + startDateInput = this.value if (startDateInput && endDateInput) { - var url = constructURL(startDateInput, endDateInput); + var url = constructURL(startDateInput, endDateInput) } -}); + }) // Checks for change is ending date input -document.getElementById("ending-date").addEventListener("change", function() { - endDateInput = this.value; - - if (startDateInput && endDateInput) { - var url = constructURL(startDateInput, endDateInput); - } -}); +document.getElementById('ending-date').addEventListener('change', function () { + endDateInput = this.value -// Function for the API call and putting all the values into the DOM elements -function neows(inputUrl, sdi) { - fetch(inputUrl).then((response) => { - return response.json() - }).then((data) => { - let asteroidName = data.near_earth_objects[sdi][0].name; - let estDiameterMinimum = data.near_earth_objects[sdi][0].estimated_diameter.kilometers.estimated_diameter_min; - let estDiameterMaximum = data.near_earth_objects[sdi][0].estimated_diameter.kilometers.estimated_diameter_max; - let potentialHazard = data.near_earth_objects[sdi][0].is_potentially_hazardous_asteroid; - let closeApproachDate = data.near_earth_objects[sdi][0].close_approach_data[0].close_approach_date; - let relativeVelocitySec = data.near_earth_objects[sdi][0].close_approach_data[0].relative_velocity.kilometers_per_second; - let relativeVelocityHr = data.near_earth_objects[sdi][0].close_approach_data[0].relative_velocity.kilometers_per_hour; - let orbitingBody = data.near_earth_objects[sdi][0].close_approach_data[0].orbiting_body; - let isSentryObject = data.near_earth_objects[sdi][0].is_sentry_object; - - let sentryVal; - if (isSentryObject){ - sentryVal = "Yes"; - } else { - sentryVal = "No"; - } - - let hazardVal; - if (potentialHazard) { - hazardVal = "Yes"; - } else { - hazardVal = "No"; - } - - document.querySelector("#asteroid-name").innerHTML = asteroidName; - - document.querySelector("#estDiaMin").innerHTML = estDiameterMinimum.toFixed(3); - document.querySelector("#estDiaMax").innerHTML = estDiameterMaximum.toFixed(3); - - document.querySelector("#potentialHazardVal").innerHTML = hazardVal; - - document.querySelector("#closeApproachDate").innerHTML = closeApproachDate; - - document.querySelector("#relVelocitySec").innerHTML = relativeVelocitySec; - document.querySelector("#relVelocityHr").innerHTML = relativeVelocityHr; - - document.querySelector("#orbitingBodyVal").innerHTML = orbitingBody; - - document.querySelector("#sentryObjectVal").innerHTML = sentryVal; + if (startDateInput && endDateInput) { + var url = constructURL(startDateInput, endDateInput) + } +}) - asteroidInfoDiv.style.display = "block" +// Function for the API call and putting all the values into the DOM elements +function neows (inputUrl, sdi) { + fetch(inputUrl) + .then(response => { + return response.json() + }) + .then(data => { + let asteroidName = data.near_earth_objects[sdi][0].name + let estDiameterMinimum = + data.near_earth_objects[sdi][0].estimated_diameter.kilometers + .estimated_diameter_min + let estDiameterMaximum = + data.near_earth_objects[sdi][0].estimated_diameter.kilometers + .estimated_diameter_max + let potentialHazard = + data.near_earth_objects[sdi][0].is_potentially_hazardous_asteroid + let closeApproachDate = + data.near_earth_objects[sdi][0].close_approach_data[0] + .close_approach_date + let relativeVelocitySec = + data.near_earth_objects[sdi][0].close_approach_data[0].relative_velocity + .kilometers_per_second + let relativeVelocityHr = + data.near_earth_objects[sdi][0].close_approach_data[0].relative_velocity + .kilometers_per_hour + let orbitingBody = + data.near_earth_objects[sdi][0].close_approach_data[0].orbiting_body + let isSentryObject = data.near_earth_objects[sdi][0].is_sentry_object + + let sentryVal + if (isSentryObject) { + sentryVal = 'Yes' + } else { + sentryVal = 'No' + } + + let hazardVal + if (potentialHazard) { + hazardVal = 'Yes' + } else { + hazardVal = 'No' + } + + document.querySelector('#asteroid-name').innerHTML = asteroidName + + document.querySelector('#estDiaMin').innerHTML = + estDiameterMinimum.toFixed(3) + document.querySelector('#estDiaMax').innerHTML = + estDiameterMaximum.toFixed(3) + + document.querySelector('#potentialHazardVal').innerHTML = hazardVal + + document.querySelector('#closeApproachDate').innerHTML = closeApproachDate + + document.querySelector('#relVelocitySec').innerHTML = relativeVelocitySec + document.querySelector('#relVelocityHr').innerHTML = relativeVelocityHr + + document.querySelector('#orbitingBodyVal').innerHTML = orbitingBody + + document.querySelector('#sentryObjectVal').innerHTML = sentryVal + + asteroidInfoDiv.style.display = 'block' }) - } // Event listener for the Search Button -searchBtn.addEventListener("click", () => { - if (startDateInput && endDateInput) { - - let milStartDate = new Date(startDateInput); - let milEndDate = new Date(endDateInput); - let differenceInMilliseconds = milEndDate - milStartDate; - let differenceInDays = (differenceInMilliseconds / (1000 * 60 * 60 * 24)) - - if (differenceInDays < 7) { - var url = constructURL(startDateInput, endDateInput); - neows(url, startDateInput); - } else { - alert("Date range should not exceed 7") - } - } else [ - alert("Date input cannot be empty") - ] +searchBtn.addEventListener('click', () => { + if (startDateInput && endDateInput) { + let milStartDate = new Date(startDateInput) + let milEndDate = new Date(endDateInput) + let differenceInMilliseconds = milEndDate - milStartDate + let differenceInDays = differenceInMilliseconds / (1000 * 60 * 60 * 24) + + if (differenceInDays < 7) { + var url = constructURL(startDateInput, endDateInput) + neows(url, startDateInput) + } else { + alert('Date range should not exceed 7') + } + } else [alert('Date input cannot be empty')] }) diff --git a/Pages/asteroid-info/style.css b/Pages/asteroid-info/style.css index 1374958..f6eaae4 100644 --- a/Pages/asteroid-info/style.css +++ b/Pages/asteroid-info/style.css @@ -1,179 +1,180 @@ * { - box-sizing: border-box; - margin: 0; - padding: 0; + box-sizing: border-box; + margin: 0; + padding: 0; } body { - background-image: linear-gradient(to left, rgb(10, 0, 73), rgb(0, 0, 0)); - overflow-x: hidden; - color: rgb(255, 255, 255); - font-family: sans-serif; + background-image: linear-gradient(to left, rgb(10, 0, 73), rgb(0, 0, 0)); + overflow-x: hidden; + color: rgb(255, 255, 255); + font-family: sans-serif; } .body::-webkit-scrollbar { - display: none; + display: none; } /* NAVBAR STYLING */ .navbar_background { - background-image: linear-gradient(to left, rgb(10, 0, 73), rgb(0, 0, 0)); + background-image: linear-gradient(to left, rgb(10, 0, 73), rgb(0, 0, 0)); } #bg-ast { - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - z-index: -1; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: -1; } /* HERO SECTION */ .container { - width: 100%; - position: relative; - top: 40px; - padding: 10px; - text-align: center; + width: 100%; + position: relative; + top: 40px; + padding: 10px; + text-align: center; } /* Inputs */ .input-field { - padding: 20px 0px; + padding: 20px 0px; } #input-heading { - font-weight: bold; - font-size: 3rem; - background: -webkit-linear-gradient(top, rgb(228, 214, 251), rgb(132, 0, 255)) text; - -webkit-text-fill-color: transparent; + font-weight: bold; + font-size: 3rem; + background: -webkit-linear-gradient(top, rgb(228, 214, 251), rgb(132, 0, 255)) + text; + -webkit-text-fill-color: transparent; } .date-input-fields-div { - margin: 8px 0px; + margin: 8px 0px; } -.date-input-fields-div>label { - color: rgba(255, 255, 255, 0.75); - font-weight: 600; - font-size: 1rem; +.date-input-fields-div > label { + color: rgba(255, 255, 255, 0.75); + font-weight: 600; + font-size: 1rem; } .date-inputs { - padding: 4px 8px; - border-radius: 2px; - border: none; - outline: none; - background-color: #e4d6fb; - transition: 0.1s ease-in-out; + padding: 4px 8px; + border-radius: 2px; + border: none; + outline: none; + background-color: #e4d6fb; + transition: 0.1s ease-in-out; } .date-inputs:hover { - box-shadow: 2px 2px 1px 1px rgb(187, 18, 187); - cursor: pointer; + box-shadow: 2px 2px 1px 1px rgb(187, 18, 187); + cursor: pointer; } #dates-submit-btn { - padding: 6px 12px; - outline: none; - border: none; - background-color: #0d6efd; - border-radius: 6px; - color: white; - font-weight: bold; - letter-spacing: 1px; - transition: 0.1s ease-in-out; - margin: 10px 0px; + padding: 6px 12px; + outline: none; + border: none; + background-color: #0d6efd; + border-radius: 6px; + color: white; + font-weight: bold; + letter-spacing: 1px; + transition: 0.1s ease-in-out; + margin: 10px 0px; } #dates-submit-btn:hover { - background-color: #0b5ed7; + background-color: #0b5ed7; } .note { - margin: 0px auto; - padding: 4px; - width: fit-content; - display: flex; + margin: 0px auto; + padding: 4px; + width: fit-content; + display: flex; } #exclmation-icon { - margin: 0px 4px; + margin: 0px 4px; } /* Asteroid info */ .asteroid-info { - border: 2px solid #e4d6fb; - border-radius: 8px; - padding: 20px 60px; - width: 50%; - margin: 0px auto; - display: none; + border: 2px solid #e4d6fb; + border-radius: 8px; + padding: 20px 60px; + width: 50%; + margin: 0px auto; + display: none; } .asteroid-grid { - display: grid; - gap: 20px; - grid-template-columns: repeat(2, 1fr); + display: grid; + gap: 20px; + grid-template-columns: repeat(2, 1fr); } .asteroid-info-card { - background-color: #ffffff; - color: black; - border-radius: 10px; - width: fit-content; - padding: 10px; - width: 100%; - filter: drop-shadow(0 5px 10px 0 #ffffff); - z-index: 0; - overflow: hidden; - transition: 0.4s ease-in; - position: relative; + background-color: #ffffff; + color: black; + border-radius: 10px; + width: fit-content; + padding: 10px; + width: 100%; + filter: drop-shadow(0 5px 10px 0 #ffffff); + z-index: 0; + overflow: hidden; + transition: 0.4s ease-in; + position: relative; } .asteroid-info-card::before { - content: ""; - position: absolute; - z-index: -1; - top: -15px; - right: -15px; - background: #7952b3; - height: 220px; - width: 25px; - border-radius: 32px; - transform: scale(1); - transform-origin: 50% 50%; - transition: transform 0.25s ease-out; + content: ''; + position: absolute; + z-index: -1; + top: -15px; + right: -15px; + background: #7952b3; + height: 220px; + width: 25px; + border-radius: 32px; + transform: scale(1); + transform-origin: 50% 50%; + transition: transform 0.25s ease-out; } .asteroid-info-card:hover::before { - transition-delay: 0.2s; - transform: scale(40); + transition-delay: 0.2s; + transform: scale(40); } -.asteroid-info-card:hover{ - color: #ffffff; +.asteroid-info-card:hover { + color: #ffffff; } #name-of-asteroid { - font-size: 2rem; - font-weight: bold; - padding-bottom: 20px; + font-size: 2rem; + font-weight: bold; + padding-bottom: 20px; } #asteroid-name { - color: #7952b3; - font-size: 2.2rem; - text-shadow: 2px 2px 0px black; - transition: 0.3s ease-in-out; + color: #7952b3; + font-size: 2.2rem; + text-shadow: 2px 2px 0px black; + transition: 0.3s ease-in-out; } -#asteroid-name:hover{ - text-shadow: 2px 2px 0px #7952b3; - color: #ffffff; +#asteroid-name:hover { + text-shadow: 2px 2px 0px #7952b3; + color: #ffffff; } diff --git a/Pages/gallery/gallery.css b/Pages/gallery/gallery.css new file mode 100644 index 0000000..07ad77a --- /dev/null +++ b/Pages/gallery/gallery.css @@ -0,0 +1,25 @@ +.header { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + margin: 20px; + margin-top: 100px; +} + +input { + background-color: rgb(10, 0, 73); + border: 1px solid rgba(255, 255, 255, 0.664); + border-radius: 2px; + color: white; + padding: 2px; + margin: 5px; +} + +button { + background-color: black; + color: white; + border: 1px solid rgba(255, 255, 255, 0.537); + padding: 2px; +} diff --git a/Pages/gallery/gallery.html b/Pages/gallery/gallery.html new file mode 100644 index 0000000..66f59cd --- /dev/null +++ b/Pages/gallery/gallery.html @@ -0,0 +1,113 @@ + + + + + + cosmoXplore + + + + + + + + + + + + +
+

Gallery

+
+ + +
+
+ +
+
+ +
+
+ + +
+
+ + + +

+ © 2024 CosmoXplore India, Inc. All Rights Reserved +

+
+
+ + diff --git a/Pages/gallery/gallery.js b/Pages/gallery/gallery.js new file mode 100644 index 0000000..5f5cf76 --- /dev/null +++ b/Pages/gallery/gallery.js @@ -0,0 +1,101 @@ +// API CALL : NASA Photo Video Gallery +const APIurl = 'https://images-api.nasa.gov/search?q=apollo' +window.addEventListener('load', makeMediaRequest(APIurl)) +window.addEventListener('load', searchMedia) +window.addEventListener('load', () => { + let mediaSearchButton = document.getElementById('mediaSearchButton') + mediaSearchButton.addEventListener('click', searchMedia) +}) + +// makes request for media +function makeMediaRequest (APIurl) { + console.log(`making request at ${APIurl}`) + fetch(APIurl) + .then(response => { + return response.json() + }) + .then(data => { + galleryData = data + Gallery(galleryData) + }) + .catch(error => console.error(error)) +} + +// shows the media in gallery + +function Gallery (data) { + let promises = [] + let childrenHTML = [''] + + // show only 50 or less media at a time + for (let i = 0; i < 49; i++) { + let url = data.collection.items[i] + let nasa_id = data.collection.items[i].data[0].nasa_id + let media_type = data.collection.items[i].data[0].media_type + + // find the exact url for jpg image for showing in gallery, for every media + let promise = fetch(url.href) + .then(response => response.json()) + .then(data => { + let link = url.links[0] + + htmlMedia(link.href, childrenHTML, nasa_id, media_type) + }) + .catch(error => console.error(error)) + + promises.push(promise) + } + + // when all promises resolve, we add the accumulated html + Promise.all(promises).then(() => { + let galleryContainer = document.querySelector('#galleryContainer') + galleryContainer.innerHTML = childrenHTML[0] + + // Add event listener to each image + for (let media of galleryContainer.children) { + ;(function (id, src, type) { + let nextPageURL + // if (type === 'image') { + // nextPageURL = src + // } else { + // // it is a video, and the url will be with extension mp4 + // } + media.addEventListener('click', function () { + openDetailPage(id, src) + }) + })(media.id, media.src, media.media_type) + } + }) +} + +// generates html elements for gallery media +function htmlMedia (data, childrenHTML, nasa_id, media_type) { + let elem = document.createElement('img') + elem.classList.add('mini-gallery-media') + elem.src = data + elem.id = nasa_id + elem.type = media_type + + childrenHTML[0] += elem.outerHTML +} + +// when user clicks on a media, the function redirects them to detail page for that media +function openDetailPage (id, mediaURL) { + console.log(mediaURL) + window.location.href = '../mediaDetail/mediaDetail.html' + window.sessionStorage.setItem('nasa_id', id) + window.sessionStorage.setItem('mediaURL', mediaURL) +} + +// when user search, this function makes API request for that query. +function searchMedia () { + let inputMedia = document.getElementById('mediaInput') + let query = inputMedia.value + + if (query) { + // make a search request for the query + makeMediaRequest(`https://images-api.nasa.gov/search?q=${query}`) + } +} + +// when user clicks diff --git a/Pages/mediaDetail/mediaDetail.css b/Pages/mediaDetail/mediaDetail.css new file mode 100644 index 0000000..0e28e73 --- /dev/null +++ b/Pages/mediaDetail/mediaDetail.css @@ -0,0 +1,28 @@ +.mediaSubContainer { + width: 45vw; + margin: 20px; +} + +#mediaContainer { + display: flex; + margin-top: 50px; + align-items: center; + justify-content: center; + margin-top: 100px; +} + +@media (max-width: 1500px) { + body { + display: flex; + align-items: center; + justify-content: center; + } + #mediaContainer { + flex-direction: column; + width: 90vw; + } + + .mediaSubContainer { + width: 90vw; + } +} diff --git a/Pages/mediaDetail/mediaDetail.html b/Pages/mediaDetail/mediaDetail.html new file mode 100644 index 0000000..cf4826f --- /dev/null +++ b/Pages/mediaDetail/mediaDetail.html @@ -0,0 +1,100 @@ + + + + + + cosmoXplore + + + + + + + + + + + +
+
+
+
+ + +
+
+ + + +

+ © 2024 CosmoXplore India, Inc. All Rights Reserved +

+
+
+ + diff --git a/Pages/mediaDetail/mediaDetail.js b/Pages/mediaDetail/mediaDetail.js new file mode 100644 index 0000000..5f82794 --- /dev/null +++ b/Pages/mediaDetail/mediaDetail.js @@ -0,0 +1,87 @@ +let nasa_id = window.sessionStorage.getItem('nasa_id') +let mediaURL = window.sessionStorage.getItem('mediaURL') + +// make api request to fetch metadata +fetch(`https://images-api.nasa.gov/metadata/${nasa_id}`) + .then(response => { + return response.json() + }) + .then(data => { + fetchMetaData(data.location) + }) + .catch(error => { + console.error(error) + }) + +function fetchMetaData (location) { + fetch(location) + .then(response => { + return response.json() + }) + .then(data => { + putDataInHTML(mediaURL, data) + }) + .catch(error => { + console.error(error) + }) +} + +function putDataInHTML (src, data) { + let media = document.querySelector('#media') + let mediaData = document.querySelector('#metaData') + + if (data['AVAIL:MediaType'] === 'image') { + let img = document.createElement('img') + img.src = src + console.log(src) + media.appendChild(img) + } else { + // search for mp4 url of video + fetch(`https://images-api.nasa.gov/asset/${nasa_id}`) + .then(response => { + return response.json() + }) + .then(data => { + let count = 2 + for (i = 0; i < data.collection.items.length; i++) { + console.log('hello') + let url = String(data.collection.items[i].href) + if (url.endsWith('mp4')) { + if (count != 0) { + let video = document.createElement('video') + video.src = url + video.setAttribute('controls', '') + video.style.width = '45vw' + media.appendChild(video) + } + count-- + break + } + } + // console.log("http://images-assets.nasa.gov/video/T803048_EGRESS-TRAINING-IN-THE-GULF-OF-MEXICO-WITH-APOLLO-8-BACKUP-CREW/T803048_EGRESS-TRAINING-IN-THE-GULF-OF-MEXICO-WITH-APOLLO-8-BACKUP-CREW~large.mp4") + }) + .catch(error => { + console.log('error') + console.error(error) + }) + } + + if (data['AVAIL:Center']) { + mediaData.innerHTML += `Center : ${data['AVAIL:Center']}

` + } + if (data['AVAIL:DateCreated']) { + mediaData.innerHTML += `DateCreated : ${data['AVAIL:DateCreated']}

` + } + if (data['AVAIL:Description']) { + mediaData.innerHTML += `Description : ${data['AVAIL:Description']}

` + } + if (data['AVAIL:Keywords']) { + mediaData.innerHTML += `Keywords : ${data['AVAIL:Keywords']}

` + } + if (data['AVAIL:NASAID']) { + mediaData.innerHTML += `NASAID : ${data['AVAIL:NASAID']}

` + } + if (data['AVAIL:Owner']) { + mediaData.innerHTML += `Owner : ${data['AVAIL:Owner']}

` + } +} diff --git a/app.js b/app.js index 1e33394..fe06961 100644 --- a/app.js +++ b/app.js @@ -1,130 +1,135 @@ // PARTICLES BACKGROUND - -particlesJS("bg", { - "particles": { - "number": { - "value": 650, - "density": { - "enable": true, - "value_area": 789.1476416322727 - } +particlesJS('bg', { + particles: { + number: { + value: 650, + density: { + enable: true, + value_area: 789.1476416322727 + } + }, + color: { + value: '#ffffff' + }, + shape: { + type: 'circle', + stroke: { + width: 0, + color: '#000000' }, - "color": { - "value": "#ffffff" + polygon: { + nb_sides: 5 }, - "shape": { - "type": "circle", - "stroke": { - "width": 0, - "color": "#000000" - }, - "polygon": { - "nb_sides": 5 - }, - "image": { - "src": "img/github.svg", - "width": 100, - "height": 100 - } + image: { + src: 'img/github.svg', + width: 100, + height: 100 + } + }, + opacity: { + value: 0.48927153781200905, + random: false, + anim: { + enable: true, + speed: 1.5, + opacity_min: 0, + sync: false + } + }, + size: { + value: 3, + random: true, + anim: { + enable: true, + speed: 2, + size_min: 0, + sync: false + } + }, + line_linked: { + enable: false, + distance: 150, + color: '#ffffff', + opacity: 0.4, + width: 1 + }, + move: { + enable: true, + speed: 0.2, + direction: 'none', + random: true, + straight: false, + out_mode: 'out', + bounce: false, + attract: { + enable: false, + rotateX: 600, + rotateY: 1200 + } + } + }, + interactivity: { + detect_on: 'canvas', + events: { + onhover: { + enable: true, + mode: 'bubble' }, - "opacity": { - "value": 0.48927153781200905, - "random": false, - "anim": { - "enable": true, - "speed": 1.5, - "opacity_min": 0, - "sync": false - } + onclick: { + enable: true, + mode: 'push' }, - "size": { - "value": 3, - "random": true, - "anim": { - "enable": true, - "speed": 2, - "size_min": 0, - "sync": false + resize: true + }, + modes: { + grab: { + distance: 400, + line_linked: { + opacity: 1 } }, - "line_linked": { - "enable": false, - "distance": 150, - "color": "#ffffff", - "opacity": 0.4, - "width": 1 + bubble: { + distance: 83.91608391608392, + size: 1, + duration: 3, + opacity: 1, + speed: 3 }, - "move": { - "enable": true, - "speed": 0.2, - "direction": "none", - "random": true, - "straight": false, - "out_mode": "out", - "bounce": false, - "attract": { - "enable": false, - "rotateX": 600, - "rotateY": 1200 - } - } - }, - "interactivity": { - "detect_on": "canvas", - "events": { - "onhover": { - "enable": true, - "mode": "bubble" - }, - "onclick": { - "enable": true, - "mode": "push" - }, - "resize": true + repulse: { + distance: 200, + duration: 0.4 }, - "modes": { - "grab": { - "distance": 400, - "line_linked": { - "opacity": 1 - } - }, - "bubble": { - "distance": 83.91608391608392, - "size": 1, - "duration": 3, - "opacity": 1, - "speed": 3 - }, - "repulse": { - "distance": 200, - "duration": 0.4 - }, - "push": { - "particles_nb": 4 - }, - "remove": { - "particles_nb": 2 - } + push: { + particles_nb: 4 + }, + remove: { + particles_nb: 2 } - }, - "retina_detect": true - }); - - - + } + }, + retina_detect: true +}) // 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) - displayData(data.url, data.explanation, data.title, data.date, data.copyright,data.media_type) +fetch( + 'https://api.nasa.gov/planetary/apod?api_key=eISHzmGbQk7EMWv9NTlVtvzZVmeLKPUoL3uKMSPJ' +) + .then(response => { + return response.json() }) - .catch((error) => console.error(error)) + .then(data => { + console.log('fetching') + displayData( + data.url, + data.explanation, + data.title, + data.date, + data.copyright + ) + }) + .catch(error => console.error(error)) //function to display data in apod section function displayData(media, info, title, date, copyright,mediatype){ @@ -156,15 +161,12 @@ particlesJS("bg", { let photosArr; function displayRover(){ - document.querySelector('.rover_container').style.display = 'none'; - document.querySelector('.rover_display').style.display = 'flex'; - - let userDate = document.querySelector('.date_input').value; + let userDate = document.querySelector('.date_input').value let url = `https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=${userDate}&api_key=eISHzmGbQk7EMWv9NTlVtvzZVmeLKPUoL3uKMSPJ` fetch(url) - .then((response) => { + .then(response => { return response.json() }).then((data) => { console.log(data) @@ -184,21 +186,20 @@ function displayRover(){ .catch((error) => console.error(error)) } - function updateDom(img_src, date, roverName, camera, launch, land, status){ - - document.querySelector('#roverImg').src = img_src - document.querySelector('.date').textContent = date - document.querySelector('.roverName').textContent = roverName - document.querySelector('.camera').textContent = camera - document.querySelector('.land').textContent = land - document.querySelector('.launch').textContent = launch - document.querySelector('.status').textContent = status +function updateDom (img_src, date, roverName, camera, launch, land, status) { + document.querySelector('#roverImg').src = img_src + document.querySelector('.date').textContent = date + document.querySelector('.roverName').textContent = roverName + document.querySelector('.camera').textContent = camera + document.querySelector('.land').textContent = land + document.querySelector('.launch').textContent = launch + document.querySelector('.status').textContent = status } -// added closeRover function -function closeRoverDisplay(e){ - document.querySelector('.rover_container').style.display = 'flex'; - document.querySelector('.rover_display').style.display = 'none'; +// added closeRover function +function closeRoverDisplay (e) { + document.querySelector('.rover_container').style.display = 'flex' + document.querySelector('.rover_display').style.display = 'none' } //MARS PHOTOS SLIDESHOW OF MULTIPLE CAMERAS @@ -227,10 +228,44 @@ function showDivs(n) { // API CALL 3 : NASA Photo Video Gallery fetch('https://images-api.nasa.gov/search?q=apollo') - .then((response) => { - return response.json() - }).then((data) => { - console.log(data) - + .then(response => { + return response.json() }) - .catch((error) => console.error(error)) \ No newline at end of file + .then(data => { + galleryData = data + miniGallery(galleryData) + }) + .catch(error => console.error(error)) + +// show-more button +let showMoreButton = document.createElement('button') +showMoreButton.classList.add('show-more') +showMoreButton.innerText = 'Show more' + +// show mini gallery +function miniGallery (data) { + let galleryContainer = document.querySelector('div#galleryContainer') + + // extract only 6 pictures'URL + for (i = 1; i <= 6; i++) { + let url = data.collection.items[i].links[0].href + + let img = document.createElement('img') + img.classList.add('mini-gallery-media') + img.src = url + + // show the 6 pictures + galleryContainer.appendChild(img) + console.log(galleryContainer) + } + + // button will redirect to the main gallery page + galleryContainer.appendChild(showMoreButton) +} + +// onclicking the show-more button, user will be redirected to the main gallery page +showMoreButton.addEventListener('click', mainGallery) + +function mainGallery () { + window.location.href = 'http://127.0.0.1:5500/pages/gallery/gallery.html' +} diff --git a/index.html b/index.html index 14ac60b..c4bdea3 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,25 @@ - - - + + + + cosmoXplore - - - - + + + +