overflow-y added in css

** still needs video/img toggle optimization
ShdwSpde · Sep 26, 2022 · 79be965 · 79be965
1 parent 0819b90
commit 79be965
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,13 @@
   <title>replit</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com"> 
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com"> 
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
 </head>
 
 <body>
@@ -18,9 +25,10 @@ <h1>Picture of the Day</h1>
       <h2></h2>
 
       <img src='' alt=''>
+      <iframe src='' frameborder="0"></iframe>
       <p></p>
       <h3>Which PIC?</h3>
-      <input type='text' name='' value=''>
+      <input type='date' name='' value=''>
       <button type='button' name='button'>Get STARRY</button>
 
 

diff --git 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
@@ -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;
 }