File tree Expand file tree Collapse file tree 3 files changed +29
-6
lines changed Expand file tree Collapse file tree 3 files changed +29
-6
lines changed Original file line number Diff line number Diff line change 7
7
< title > replit</ title >
8
8
< link href ="style.css " rel ="stylesheet " type ="text/css " />
9
9
< 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 ">
10
17
</ head >
11
18
12
19
< body >
@@ -18,9 +25,10 @@ <h1>Picture of the Day</h1>
18
25
< h2 > </ h2 >
19
26
20
27
< img src ='' alt =''>
28
+ < iframe src ='' frameborder ="0 "> </ iframe >
21
29
< p > </ p >
22
30
< h3 > Which PIC?</ h3 >
23
- < input type ='text ' name ='' value =''>
31
+ < input type ='date ' name ='' value =''>
24
32
< button type ='button ' name ='button '> Get STARRY</ button >
25
33
26
34
Original file line number Diff line number Diff line change 1
1
document . querySelector ( 'button' ) . addEventListener ( 'click' , getFetch )
2
2
3
3
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 } `
6
6
7
7
fetch ( url )
8
8
. then ( res => res . json ( ) )
9
9
. then ( data => {
10
10
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
+ }
12
16
document . querySelector ( 'h2' ) . innerText = data . title
13
17
document . querySelector ( 'p' ) . innerText = data . explanation
14
18
} )
Original file line number Diff line number Diff line change 1
1
html , body {
2
- height : 100 % ;
2
+ height : 90 % ;
3
3
width : 100% ;
4
4
text-align : center;
5
5
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;
6
7
}
7
8
8
9
h1 , h2 , h3 {
9
10
color : white;
10
- background : rgba (159 , 90 , 253 , .5 )
11
+ background : rgba (159 , 90 , 253 , .5 );
12
+ font-family : 'Libre Baskerville' , serif;
11
13
}
12
14
13
15
p {
14
16
background-color : white;
15
17
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;
16
27
}
You can’t perform that action at this time.
0 commit comments