Skip to content

Commit 79be965

Browse files
committed
overflow-y added in css
** still needs video/img toggle optimization
1 parent 0819b90 commit 79be965

File tree

3 files changed

+29
-6
lines changed

3 files changed

+29
-6
lines changed

index.html

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,13 @@
77
<title>replit</title>
88
<link href="style.css" rel="stylesheet" type="text/css" />
99
<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">
10+
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
14+
<link rel="preconnect" href="https://fonts.googleapis.com">
15+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16+
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
1017
</head>
1118

1219
<body>
@@ -18,9 +25,10 @@ <h1>Picture of the Day</h1>
1825
<h2></h2>
1926

2027
<img src='' alt=''>
28+
<iframe src='' frameborder="0"></iframe>
2129
<p></p>
2230
<h3>Which PIC?</h3>
23-
<input type='text' name='' value=''>
31+
<input type='date' name='' value=''>
2432
<button type='button' name='button'>Get STARRY</button>
2533

2634

script.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
document.querySelector('button').addEventListener('click',getFetch)
22

33
function getFetch(){
4-
5-
const url = 'https://api.nasa.gov/planetary/apod?api_key=vIn5A36tyJL0QLmQG6ahSCP89ei7GYOtTa1XGD3U'
4+
const choice = document.querySelector('input').value
5+
const url = `https://api.nasa.gov/planetary/apod?api_key=vIn5A36tyJL0QLmQG6ahSCP89ei7GYOtTa1XGD3U&date=${choice}`
66

77
fetch(url)
88
.then(res => res.json())
99
.then(data => {
1010
console.log(data)
11-
document.querySelector('img').src = data.hdurl
11+
if (data.media_type === 'image'){
12+
document.querySelector('img').src = data.hdurl
13+
} else if (data.media_type === 'video'){
14+
document.querySelector('iframe').src = data.url
15+
}
1216
document.querySelector('h2').innerText = data.title
1317
document.querySelector('p').innerText = data.explanation
1418
})

style.css

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
11
html, body {
2-
height: 100%;
2+
height: 90%;
33
width: 100%;
44
text-align: center;
55
background-image: url('http://www.nasa.gov/sites/default/files/thumbnails/image/main_image_star-forming_region_carina_nircam_final-5mb.jpg');
6+
overflow-y: scroll;
67
}
78

89
h1,h2, h3 {
910
color: white;
10-
background: rgba(159,90,253,.5)
11+
background: rgba(159,90,253,.5);
12+
font-family: 'Libre Baskerville', serif;
1113
}
1214

1315
p{
1416
background-color: white;
1517
border: 2px double purple;
18+
}
19+
20+
h1{
21+
font-family: 'Permanent Marker', cursive;
22+
font-size: 64px;
23+
}
24+
25+
.hidden {
26+
display:none;
1627
}

0 commit comments

Comments
 (0)