<!doctype html>
<html>
<head>
<script src="lib/script.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astronomy Picture of the Day</title>
<link href='https://cdn.muicss.com/mui-0.10.3/css/mui.min.css' rel='stylesheet' type='text/css' />
<script src='https://cdn.muicss.com/mui-0.10.3/js/mui.min.js'></script>
<link rel="stylesheet" href="lib/style.css">
</head>
<body>
<div id="loadingField">
<h2>Loading</h2>
<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<div onclick="document.body.classList.remove('mui-scroll-lock')" id="wrapper" style="display: none;">
<button onclick="viewMenu()" class="menuBtn mui-btn mui-btn--fab"><i style="color: rgb(45, 45, 45); font-size: 30px;" class="bi bi-list"></i></button>
<div class="picture">
<h2 id="title"></h2>
<div class="container">
<img id="picture"><br>
<button onclick="favourite(document.getElementById('title').innerHTML, document.getElementById('hd').href, document.getElementById('date').innerHTML, document.getElementById('explanation').innerHTML)" class="favourite mui-btn mui-btn--small mui-btn mui-btn--fab" style="background-color: rgba(255, 255, 255, 0.5);padding: 0;">
<i id="heart" style="color: rgba(255, 0, 0, 0.70);font-size: 15px;" class="bi bi-heart-fill"></i>
</button>
</div>
© <span id="copyright"></span>
<span id="date"></span><br />
<a href="" id="hd">View HD Image</a>
</div>
<div class="desk">
<p id="explanation"></p>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
* {
color: lightgray;
font-family: 'Roboto', sans-serif;
outline: none;
}
body {
background-color: rgb(45, 45, 45);
text-align: center;
}
#loadingField {
text-align: center;
}
.lds-spinner {
color: official;
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-spinner div {
transform-origin: 40px 40px;
animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
content: " ";
display: block;
position: absolute;
top: 3px;
left: 37px;
width: 6px;
height: 18px;
border-radius: 20%;
background: #fff;
}
.lds-spinner div:nth-child(1) {
transform: rotate(0deg);
animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
transform: rotate(30deg);
animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
transform: rotate(60deg);
animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
transform: rotate(90deg);
animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
transform: rotate(120deg);
animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
transform: rotate(150deg);
animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
transform: rotate(180deg);
animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
transform: rotate(210deg);
animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
transform: rotate(240deg);
animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
transform: rotate(270deg);
animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
transform: rotate(300deg);
animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
transform: rotate(330deg);
animation-delay: 0s;
}
@keyframes lds-spinner {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#picture, #pictureDate {
width: 35%;
border-radius: 15px;
}
.desk{
width: 60%;
margin: 0 auto;
}
#explanation, #explanationDate {
text-align: left;
}
.menuBtn {
position: fixed;
right: 15px;
bottom: 15px;
}
#menuItems {
border: lightgray solid 1px;
border-radius: 5px;
}
.container {
position: relative;
}
.favourite {
position: absolute;
bottom: 1%;
right: 20%;
transform: translate(50%, -50%);
}
.menu {
margin: 25% auto;
width: 75%;
padding: 5% 1% 10px 1%;
}
.popup {
margin: 50% auto;
width: 50%;
padding: 5% 5% 5% 5%;
}
.w50{
text-align: center;
}
@media screen and (max-width: 600px) {
#picture, #pictureDate {
width: 80%;
border-radius: 25px;
}
.desk{
width: 80%;
}
}
@media screen and (min-width: 550px) {
.menu{
width: 50%;
margin: 5% auto;
padding: 2.5% 5% 10px 5%;
}
.menuBtn {
right: 55px;
bottom: 55px;
}
}
let url = 'https://go-apod.herokuapp.com/apod'
function go(){
let json = new XMLHttpRequest();
json.open('GET', url, true);
json.responseType = 'text';
json.onload = function () {
data = JSON.parse(json.responseText)
document.getElementById("picture").src = data.url;
document.getElementById("title").innerHTML = data.title;
document.getElementById("copyright").innerHTML = data.copyright;
document.getElementById("date").innerHTML = data.date;
document.getElementById("hd").href = data.hdurl;
document.getElementById("explanation").innerHTML = data.explanation;
document.getElementById("loadingField").style.display = 'none';
document.getElementById("wrapper").style.display = 'block';
};
json.send(null);
}
function viewMenu(){
var modalEl = document.createElement('div');
modalEl.classList.add("menu");
modalEl.style.height = innerHeight * 0.75 + "px";
modalEl.style.borderRadius = '15px'
modalEl.style.backgroundColor = 'rgb(82, 82, 82)';
modalEl.innerHTML = `
<div class="wrapperMenu">
<h4 id="menuItems" onclick="seeFavourite()">Favourite</h4>
<h4 id="menuItems" onclick="date()">Select Astronomy Picture Of The Day Image Date to get</h4>
</div>
`
// show modal
mui.overlay('on', modalEl);
}
function date(){
var modalEl = document.createElement('div');
modalEl.classList.add("menu");
modalEl.style.height = innerHeight * 0.75 + "px";
modalEl.style.borderRadius = '15px'
modalEl.style.backgroundColor = 'rgb(82, 82, 82)';
modalEl.innerHTML = `
<div class="dateField">
<h4>Select Date</h4>
<input style="height:30px;" type='date' id='dateInput'>
<button onclick="checkDate(document.getElementById('dateInput').value)" class="mui-btn mui-btn--small">Ok</button>
</div>
`
// show modal
mui.overlay('on', modalEl);
}
function checkDate(date){
if(new Date() < new Date(date)){
var modalEl = document.createElement('div');
modalEl.classList.add("popup");
modalEl.style.borderRadius = '15px'
modalEl.style.backgroundColor = 'rgb(82, 82, 82)';
modalEl.innerHTML = `
<h3>Friend, you entered the wrong date</h3>
`
// show modal
mui.overlay('on', modalEl);
}
else{
getImageDate(date)
}
}
function getImageDate(date){
//localStorage('url', "https://api.nasa.gov/planetary/apod?date="+`${date}`+"&api_key="+`DEMO_KEY`)
url = "https://api.nasa.gov/planetary/apod?date="+`${date}`+"&api_key="+`DEMO_KEY`;
var modalEl = document.createElement('div');
modalEl.classList.add("menu");
modalEl.style.borderRadius = '15px'
modalEl.style.backgroundColor = 'rgb(52, 52, 52)';
modalEl.innerHTML = `
<div id="wrapperDate" style="display=none;">
<div class="picture">
<h2 id="titleDate"></h2>
<img id="pictureDate"><br>
© <span id="copyrightDate"></span>
<span id="dateDate"></span><br />
<a href="" id="hdDate">View HD Image</a>
</div>
<div class='w50'>
<p style="padding-left:5%;padding-right:5%;" id="explanationDate"></p>
</div>
</div>
`
// show modal
mui.overlay('on', modalEl);
let json = new XMLHttpRequest();
json.open('GET', url, true);
json.responseType = 'text';
json.onload = function () {
data = JSON.parse(json.responseText)
document.getElementById("pictureDate").src = data.url;
document.getElementById("titleDate").innerHTML = data.title;
document.getElementById("copyrightDate").innerHTML = data.copyright;
document.getElementById("dateDate").innerHTML = data.date;
document.getElementById("hdDate").href = data.hdurl;
document.getElementById("explanationDate").innerHTML = data.explanation;
};
json.send(null);
document.getElementById('wrapperDate').onload = function(){
document.getElementById("loadingFieldDate").style.display = 'none';
document.getElementById("wrapperDate").style.display = 'block';
}
}
function favourite(title, photo, date, explanation){
if(window.titleFavToDay != true){
window.titleFavToDay = true;
fetch('https://apod-a7d05-default-rtdb.firebaseio.com/favourite.json', {
method: 'POST',
body: JSON.stringify({'title': title, 'photo': photo, 'date': date, 'explanation': explanation, 'now': new Date})
})
.then(response => response.json())
.then(response => addToLocalStorage(document.getElementById('title').innerHTML, document.getElementById('hd').href, document.getElementById('date').innerHTML, document.getElementById('explanation').innerHTML))
}
}
function addToLocalStorage(title, photo, date, explanation){
// const arrFav = JSON.parse(localStorage.getItem('favourites') || '[]')
// arrFav.push({'title': title, 'photo': photo, 'date': date, 'explanation': explanation})
// localStorage.setItem('favourites', JSON.stringify(arrFav))
}
function seeFavourite(){
// const array = JSON.parse(localStorage.getItem('favourites'))
var modalEl = document.createElement('div');
modalEl.classList.add("popup");
modalEl.style.borderRadius = '15px'
modalEl.style.backgroundColor = 'rgb(82, 82, 82)';
modalEl.innerHTML = 'Coming Soon :)'
// show modal
mui.overlay('on', modalEl);
}
window.onload = function(){
go();
}