Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@janisgaucho
janisgaucho committed Jun 11, 2024
0 parents commit 9585e88
Show file tree
Hide file tree
Showing 6 changed files with 389 additions and 0 deletions.
38 changes: 38 additions & 0 deletions archive.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delorean Space</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<special-header></special-header>

<div class="form-container">
<label for="month">Month <input type="number" id="month" min="1" max="12"></label>
<label for="day">Day <input type="number" id="day" min="1" max="31"></label>
<label for="year">Year <input type="number" id="year" min="1995"></label>
<button class="date-button"><i class="fa-solid fa-rotate-left"></i>Let's go !</button>
</div>

<a href="index.html" class="archive">See the picture of the day.</a>

<div class="result-container">
<div class="image-container">
<button><i class="fa-solid fa-download"></i></button>
<p class="image-copyright">Copyright de l'image.</p>
</div>
<div class="infos-container">
<h2 class="image-title">Titre de l'image</h2>
<p class="image-description">Description de l'image.</p>
<a class="image-wiki" href="https://fr.wikipedia.org/wiki/Astronomy_Picture_of_the_Day" target="_blank"><button><i class="fa-solid fa-up-right-from-square"></i>More informations here</button></a>
</div>
</div>

<script src="archive.js"></script>
<script src="headerFooter.js"></script>
<script src="https://kit.fontawesome.com/e6a435a23d.js" crossorigin="anonymous"></script>
</body>
</html>
52 changes: 52 additions & 0 deletions archive.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
//CHOIX DE LA DATE
const dateBtn = document.querySelector(".date-button");


dateBtn.addEventListener("click", refreshData);
function refreshData() {
const month = document.querySelector("#month");
const day = document.querySelector("#day");
const year = document.querySelector("#year");


//NASA APOD API
async function getNASA(){
try {
const responseNASA = await fetch (`https://api.nasa.gov/planetary/apod?api_key=zZZumdFIPeG0wPVv3ga7fwnXpJ2Cc5fp2YbBa8u9&date=${year.value}-${month.value}-${day.value}`);
console.log(responseNASA);
console.log(month.value);
console.log(day.value);
console.log(year.value);

const responseDataNASA = await responseNASA.json();
console.log(responseDataNASA);

const sortedDataNASA = {
copyright: responseDataNASA.copyright,
date: responseDataNASA.date,
description: responseDataNASA.explanation,
title: responseDataNASA.title,
image: responseDataNASA.url
}
populatedUIDATA(sortedDataNASA)
}
catch(error){

}
}
getNASA();
}

const imageCopyright = document.querySelector(".image-copyright");
const imageDescription = document.querySelector(".image-description");
const imageTitle = document.querySelector(".image-title");
const imageBg = document.querySelector(".image-container");
const imageWiki = document.querySelector(".image-wiki");

function populatedUIDATA(dataNASA){
imageCopyright.textContent = dataNASA.copyright;
imageDescription.textContent = dataNASA.description;
imageTitle.textContent = dataNASA.title;
imageBg.style.backgroundImage = `url(${dataNASA.image})`;
imageWiki.href = `https://google.com/search?q=${dataNASA.title}`;
}
8 changes: 8 additions & 0 deletions headerFooter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
//HEADER
class SpecialHeader extends HTMLElement {
connectedCallback() {
this.innerHTML = ` <a href="index.html" class="logo"><h1>Sky of the <span>day.</span></h1></a>
`
}
}
customElements.define('special-header', SpecialHeader)
32 changes: 32 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sky of the day</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<special-header></special-header>

<p class="date">Today's date</p>
<a href="archive.html" class="archive">Go back in the past.</a>

<div class="container">
<div class="image-container">
<button><i class="fa-solid fa-download"></i></button>
<p class="image-copyright">Copyrights</p>
</div>
<div class="infos-container">
<h2 class="image-title">Title</h2>
<p class="image-description">Description.</p>
<a class="image-wiki" href="https://fr.wikipedia.org/wiki/Astronomy_Picture_of_the_Day" target="_blank" class="imgUrl"><button><i class="fa-solid fa-up-right-from-square"></i>More informations here</button></a>
</div>
</div>

<script src="https://kit.fontawesome.com/e6a435a23d.js" crossorigin="anonymous"></script>
<script src="main.js"></script>
<script src="headerFooter.js"></script>
</body>
</html>
49 changes: 49 additions & 0 deletions main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
//NASA APOD API
async function getNASA(){
try {
const responseNASA = await fetch ("https://api.nasa.gov/planetary/apod?api_key=zZZumdFIPeG0wPVv3ga7fwnXpJ2Cc5fp2YbBa8u9");
console.log(responseNASA);

const responseDataNASA = await responseNASA.json();
console.log(responseDataNASA);

const sortedDataNASA = {
copyright: responseDataNASA.copyright,
date: responseDataNASA.date,
description: responseDataNASA.explanation,
title: responseDataNASA.title,
image: responseDataNASA.url
}
populatedUIDATA(sortedDataNASA)
}
catch(error){

}
}
getNASA()

const imageCopyright = document.querySelector(".image-copyright");
const imageDescription = document.querySelector(".image-description");
const imageTitle = document.querySelector(".image-title");
const imageBg = document.querySelector(".image-container");
const imageWiki = document.querySelector(".image-wiki");
console.log(imageWiki);

function populatedUIDATA(dataNASA){
imageCopyright.textContent = dataNASA.copyright;
imageDescription.textContent = dataNASA.description;
imageTitle.textContent = dataNASA.title;
imageBg.style.backgroundImage = `url(${dataNASA.image})`;
imageWiki.href = `https://google.com/search?q=${dataNASA.title}`;
}

//AFFICHAGE DE LA DATE DU JOUR
const date = document.querySelector(".date");

let today = new Date();
let month = today.getMonth() + 1;
let year = today.getFullYear();
let day = today.getDate();

let currentDate = `${month}/${day}/${year}`;
date.textContent = currentDate;
210 changes: 210 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
background-color: #01080E;
text-align: center;
}


.logo {
text-decoration: none;
}

h1, h2 {
color: white;
font-family: 'Space Grotesk', sans-serif;
margin: 0;
}
h1 span {
color: #169BD9;
}

.date {
background-color: #169BD9;
width: fit-content;
padding: 4px;
border-radius: 8px;
margin: 8px auto;
color: black;
}

.archive {
font-size: 0.7em;
text-decoration: underline;
}

p, a {
color: white;
font-family: 'Space Mono', serif;
margin: 0;
}

.container {
display: flex;
justify-content: center;
gap: 64px;
padding: 64px;
}

.image-container {
background-image: url(https://apod.nasa.gov/apod/image/9904/lee_gg.jpg);
width: 50%;
min-height: 50vh;
border-radius: 8px;
display: flex;
flex-direction: column;
padding: 16px;
justify-content: space-between;
align-items: center;
background-repeat: no-repeat;
background-size: cover;
}

.image-container button {
width: 32px;
height: 32px;
border: none;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.178);
color: white;
margin-right: auto;
border: 1px solid white;
opacity: 0;
}

/* .image-container button:hover {
opacity: 1;
} */

.image-container p {
background-color: rgba(0, 0, 0, 0.438);
width: 100%;
padding: 8px;
border-radius: 8px;
white-space: nowrap;
font-size: 0.7em;
}

.infos-container {
width: 50%;
text-align: left;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: space-between;
}

.image-wiki button {
background-color: #169bd923;
border: 1px solid #169BD9;
border-radius: 8px;
color: #169BD9;
padding: 8px 16px;
display: inline-flex;
gap: 8px;
cursor: pointer;
font-family: 'Space Mono', serif;
align-items: center;
}

/*
ARCHIVES
*/
.form-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
background-color: #169bd91e;
padding: 8px;
border-radius: 8px;
width: 50vw;
margin: 32px auto 0;
cursor: pointer;
gap: 24px;
}
.form-container:hover {
background-color: #169bd950;
}
.form-container label {
color: white;
font-family: 'Space Mono', serif;
font-size: 0.8em;
display:flex;
flex-direction:column-reverse;
align-items: center;
cursor: pointer;
}
.form-container input {
background-color:#01080E;
border: none;
border-radius: 4px;
height: 32px;
width: 100%;
outline: none;
text-align: center;
color: white;
font-family: 'Space Mono', serif;
font-size: 1.5em;
font-weight: 500;
cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}

.form-container button {
background-color: #01080E;
border: none;
border-radius: 8px;
font-family: 'Space Mono', serif;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
color: white;
cursor: pointer;
}

.result-container {
display: flex;
gap: 32px;
padding: 64px 64px 0;
}

@media (max-width:768px) {
.container, .result-container {
flex-direction: column;
padding: 24px;
}
.image-container, .infos-container {
width: 100% !important;
}
body {
padding: 32px 0;
margin: 0;
}
.image-container {
padding: 0;
}
.infos-container {
gap: 32px;
}
.form-container {
gap: 8px;
row-gap: 16px;
grid-template-columns: 1fr 1fr 2fr;
}
.form-container input:not(:nth-child(3)) {
grid-column: 1;
grid-row: 1;
}
.form-container button {
padding: 8px;
grid-column: 1 / 4;
}
}

0 comments on commit 9585e88

Please sign in to comment.