-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.js
192 lines (179 loc) · 7.35 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
const NASA_API_KEY = 'ZsZLeAaCbDiosbI2g1jiI3BYahv2btDZIAnP8jVT'
const ASTRO_APP_ID = '849f222f-933a-45cd-9aaf-c0537236161c'
const ASTRO_APP_SECRET =
'40440e9fd6ed0c7e6b13acc3d9c64a9ef4ebd52b12c1157006bf04bdc2f1a9e7bd6ea762fb1eef3709685551ea62fa5b72af0cde46cb1b23de55e71f249cefbb926208b3ff72732ae8b29197ba8a02ad2e83338ad5d9c81894c81362e5ef5c3837c1f0b9922f54c7b32cb27bb3dc5ac8'
const authString = btoa(`${ASTRO_APP_ID}:${ASTRO_APP_SECRET}`)
const date = document.getElementById('date')
const form = document.getElementById('form')
const marsGallery = document.getElementById('mars-gallery')
const moonPhase = document.getElementById('moon-phase')
const moonPhaseDiv = document.getElementById('moon-phase-div')
let chosenDate
let moonPhaseImgUrl
date.onchange = (e) => {
chosenDate = e.target.value
}
form.onsubmit = (e) => {
e.preventDefault()
fetch(
`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=${chosenDate}&api_key=${NASA_API_KEY}`
)
.then((response) => response.json())
.then((data) => {
if (data.photos.length !== 0) {
let photo1 =
data.photos[Math.floor(Math.random() * data.photos.length)].img_src
let photo2 =
data.photos[Math.floor(Math.random() * data.photos.length)].img_src
let photo3 =
data.photos[Math.floor(Math.random() * data.photos.length)].img_src
let photo4 =
data.photos[Math.floor(Math.random() * data.photos.length)].img_src
let photo5 =
data.photos[Math.floor(Math.random() * data.photos.length)].img_src
let photo6 =
data.photos[Math.floor(Math.random() * data.photos.length)].img_src
marsGallery.classList.remove('hidden')
marsGallery.innerHTML = `
<h1 class="text-4xl text-center font-bold tracking-tight mb-12 my-3">
Mars images for ${dayjs(chosenDate).format('M/D/YYYY')}
</h1>
<div class="-m-1 flex flex-wrap md:-m-2">
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2 container">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center p-3 hover:opacity-25"
src="${photo1}"
/>
<div class="content">
<div class="text">Mars is the fourth planet from the sun</div>
</div>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2 container">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center p-3 hover:opacity-25"
src="${photo2}"
/>
<div class="content">
<div class="text">Mars' nickname is "the Red Planet"</div>
</div>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2 container">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center p-3 hover:opacity-25"
src="${photo3}"
/>
<div class="content">
<div class="text">Mars is the second smallest planet in the solar system</div>
</div>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2 container">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center p-3 hover:opacity-25"
src="${photo4}"
/>
<div class="content">
<div class="text">Mars' temperatures range from -166°F - 95°F"</div>
</div>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2 container">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center p-3 hover:opacity-25"
src="${photo5}"
/>
<div class="content">
<div class="text">Mars has two small moons named Phobos and Deimos</div>
</div>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2 container">
<img
alt="gallery"
class="block h-full w-full object-cover object-center p-3 hover:opacity-25"
src="${photo6}"
/>
<div class="content">
<div class="text">Mars is named after ther Roman god of war.</div>
</div>
</div>
</div>
</div>
`
getMoonPhase()
} else {
marsGallery.classList.remove('hidden')
moonPhaseDiv.classList.add('hidden')
marsGallery.innerHTML = `
<h1 class="text-4xl text-center font-bold tracking-tight mb-12 my-3">
No mars images found on ${dayjs(chosenDate).format('M/D/YYYY')} :(
</h1>`
}
})
window.scrollTo(0, document.body.scrollHeight)
}
const getMoonPhase = async () => {
const data = `{"style":{"moonStyle":"default","backgroundStyle":"stars","backgroundColor":"#000000","headingColor":"#ffffff","textColor":"#e84a4a"},"observer":{"latitude":33.775867,"longitude":-84.39733,"date":"${
chosenDate ? chosenDate : new Date().toISOString()
}"},"view":{"type":"landscape-simple","parameters":{}}}`
const xhr = new XMLHttpRequest()
xhr.withCredentials = true
xhr.addEventListener('readystatechange', function () {
if (this.readyState === this.DONE) {
moonPhaseImgUrl = JSON.parse(this.responseText)
moonPhaseDiv.classList.remove('hidden')
moonPhase.setAttribute('src', moonPhaseImgUrl.data.imageUrl)
}
})
xhr.open('POST', 'https://api.astronomyapi.com/api/v2/studio/moon-phase')
xhr.setRequestHeader('Authorization', `Basic ${authString}`)
xhr.send(data)
}
const moonFacts = [
'Did you know the Moon moves away from Earth at a rate of 3.78cm per year?',
'Did you know that Moon Dust smells like spent gunpowder?',
'Did you know that Surface Temperatures on the Moon can reach boiling point?',
"Did you know the Moon is in a 'captured rotation' with the Earth, meaning we always see the same side?",
'Did you know scientists have discovered water on the Moon?',
'Did you know it takes 27.3 days for the Moon to travel all the way around the Earth?',
'Did you know it would take around 400,000 moons to match the brightness of the Sun?',
'Did you know the Moon has quakes just like the Earth does?',
'Did you know the Moon is lemon-shaped?',
'Did you know there is currently over 70 spacecraft vehicles on the moon?',
'Did you know the Moon is about 32 Earths away from us?',
'Did you know despite contrary belief, the Moon Does indeed have an atmosphere, albeit very thin?',
]
const moonfactoidbox = document.getElementById('moonFact')
moonfactoidbox.style.maxHeight = '4rem'
function adjustTextBoxSize() {
moonfactoidbox.style.width = 'auto'
moonfactoidbox.style.width = `${moonfactoidbox.offsetWidth}px`
}
moonPhase.addEventListener('mouseover', (e) => {
if (e.target.tagName === 'IMG') {
const randomFact = moonFacts[Math.floor(Math.random() * moonFacts.length)]
moonfactoidbox.innerHTML = randomFact
moonfactoidbox.classList.remove('hidden')
moonfactoidbox.style.top = `${e.clientY}px`
moonfactoidbox.style.left = `${e.clientX}px`
adjustTextBoxSize()
}
})
moonPhase.addEventListener('mouseout', (e) => {
if (e.target.tagName === 'IMG') {
moonfactoidbox.classList.add('hidden')
}
})