From 79be965fce6c87234d8314af76b1fa15a4aa24c8 Mon Sep 17 00:00:00 2001 From: Mike Spade Date: Mon, 26 Sep 2022 14:30:42 +0000 Subject: [PATCH] overflow-y added in css ** still needs video/img toggle optimization --- index.html | 10 +++++++++- script.js | 10 +++++++--- style.css | 15 +++++++++++++-- 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 005f8a3..357cffe 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,13 @@ replit + + + + + + + @@ -18,9 +25,10 @@

Picture of the Day

+

Which PIC?

- + diff --git a/script.js b/script.js index 33e74df..b638c89 100644 --- a/script.js +++ b/script.js @@ -1,14 +1,18 @@ document.querySelector('button').addEventListener('click',getFetch) function getFetch(){ - - const url = 'https://api.nasa.gov/planetary/apod?api_key=vIn5A36tyJL0QLmQG6ahSCP89ei7GYOtTa1XGD3U' + const choice = document.querySelector('input').value + const url = `https://api.nasa.gov/planetary/apod?api_key=vIn5A36tyJL0QLmQG6ahSCP89ei7GYOtTa1XGD3U&date=${choice}` fetch(url) .then(res => res.json()) .then(data => { console.log(data) - document.querySelector('img').src = data.hdurl + if (data.media_type === 'image'){ + document.querySelector('img').src = data.hdurl + } else if (data.media_type === 'video'){ + document.querySelector('iframe').src = data.url + } document.querySelector('h2').innerText = data.title document.querySelector('p').innerText = data.explanation }) diff --git a/style.css b/style.css index 5c9ca13..10440f3 100644 --- a/style.css +++ b/style.css @@ -1,16 +1,27 @@ html, body { - height: 100%; + height: 90%; width: 100%; text-align: center; background-image: url('http://www.nasa.gov/sites/default/files/thumbnails/image/main_image_star-forming_region_carina_nircam_final-5mb.jpg'); + overflow-y: scroll; } h1,h2, h3 { color: white; -background: rgba(159,90,253,.5) +background: rgba(159,90,253,.5); +font-family: 'Libre Baskerville', serif; } p{ background-color: white; border: 2px double purple; +} + +h1{ + font-family: 'Permanent Marker', cursive; + font-size: 64px; +} + +.hidden { + display:none; } \ No newline at end of file