https://effortless-queijadas-8e77ee.netlify.app/script.js

1//Afficher l'image uniquement lorsqu'une date est sélectionnée
2document.getElementById("date").oninput = function () {
3  fetchData();
4};
5
6//Récupérer la date saisie
7function dateSaisie() {
8  const saisie = document.getElementById("date").value;
9  return saisie;
10}
11//Afficher l'image du jour (API APOD)
12const url =
13  "https://api.nasa.gov/planetary/apod?api_key=rAfAxs6xqfoUBzxLvSRyQUNgE7RYURRNkf2jrj2a&date=";
14
15function fetchData() {
16  fetch(url + dateSaisie() + "&")
17    .then((response) => {
18      return response.json();
19    })
20    .then((nasaData) => {
21      const title = document.querySelector("#picture_title");
22      title.innerHTML = `${nasaData.title} <br> by ${nasaData.copyright}`;
23      title.style.setProperty("background-color", "#333");
24      const description = document.querySelector("#picture_description");
25      description.innerHTML = nasaData.explanation;
26      description.style.setProperty("background-color", "#333");
27      const picture = document.querySelector("#container-2");
28      const nasaPicture = nasaData.hdurl;
29      picture.style.setProperty(
30        "background",
31        `url(${nasaPicture}) no-repeat fixed center`
32      );
33      let oldButton = document.getElementsByClassName("media");
34      if (oldButton.length > 0) {
35        oldButton[0].href = `${nasaPicture}`;
36      } else {
37        let newLink = document.createElement("a");
38        let newContent = document.createTextNode("See media in full-size");
39        newLink.setAttribute("class", "media");
40        newLink.href = `${nasaPicture}`;
41        newLink.target = "_blank";
42        newLink.appendChild(newContent);
43        let currentDiv = document.getElementById("picture_description");
44        currentDiv.after(newLink);
45      }
46    });
47}
48
49function displayPicture() {
50  fetch(url + dateSaisie() + "&")
51    .then((response) => {
52      return response.json();
53    })
54    .then((nasaData) => {
55      window.location.href = `${nasaData.hdurl}`;
56    });
57}
58
59//Données météo sur Mars
60function fetchWeather() {
61  fetch(
62    "https://mars.nasa.gov/rss/api/?feed=weather&category=msl&feedtype=json" //ancienne API : https://mars.nasa.gov/rss/api/?feed=weather&category=mars2020&feedtype=json&api_key=rAfAxs6xqfoUBzxLvSRyQUNgE7RYURRNkf2jrj2a
63  )
64    .then((results) => {
65      return results.json();
66    })
67    .then((weatherData) => {
68      const sols = document.querySelector("#sols");
69      const dateOnEarth = weatherData.soles[0].terrestrial_date;
70      const dateOnEarthsplitted = dateOnEarth.split("-");
71      const newDateOnEarth =
72        dateOnEarthsplitted[0] +
73        " " +
74        dicoDesMois[dateOnEarthsplitted[1] - 1] +
75        " the " +
76        dateOnEarthsplitted[2] +
77        "th";
78      sols.innerHTML = `Sol ${weatherData.soles[0].sol}</br>${newDateOnEarth}`;
79      const temperature = document.querySelector("#temperature");
80      temperature.innerHTML = `Highest : ${weatherData.soles[0].max_temp} ºC</br>Lowest : ${weatherData.soles[0].min_temp} ºC`;
81      const season = document.querySelector("#season");
82      season.innerHTML = `It's ${weatherData.soles[0].season} on Mars`;
83
84      // Visualisation graphique des données météo sur MARS
85      const ctx = document.getElementById("chart");
86      Chart.defaults.color = "black";
87      Chart.defaults.backgroundColor = "#9BD0F5";
88      const getDataMin = () => {
89        let dataMin = [];
90        for (let i = 1; i < 7; i++) {
91          dataMin.push(weatherData.soles[i].min_temp);
92        }
93        return dataMin;
94      };
95      const getDataMax = () => {
96        let dataMax = [];
97        for (let i = 1; i < 7; i++) {
98          dataMax.push(weatherData.soles[i].max_temp);
99        }
100        return dataMax;
101      };
102      const temperatureChart = new Chart(ctx, {
103        type: "line",
104        data: {
105          labels: ["J-6", "J-5", "J-4", "J-3", "J-2", "J-1"],
106          datasets: [
107            {
108              label: "Previous lowest temperatures",
109              data: getDataMin(),
110              backgroundColor: "#672a09",
111              borderColor: "#672a09",
112            },
113            {
114              label: "Previous highest temperatures",
115              color: "white",
116              data: getDataMax(),
117              backgroundColor: "#eeae8a",
118              borderColor: "#eeae8a",
119            },
120          ],
121        },
122        options: {
123          plugins: {
124            legend: {
125              labels: {
126                fontColor: "black",
127                padding: 24,
128                font: {
129                  family: "'Quicksand', Helvetica, sans-serif",
130                  size: 16,
131                },
132              },
133            },
134          },
135          scales: {
136            y: {
137              suggestedMax: -50,
138              suggestedMin: -100,
139              ticks: {
140                font: {
141                  family: "'Quicksand', Helvetica, sans-serif",
142                  size: 16,
143                },
144                color: "black",
145              },
146            },
147            x: {
148              ticks: {
149                font: {
150                  size: 16,
151                },
152                color: "black",
153              },
154            },
155          },
156          responsive: true,
157        },
158      });
159    });
160}
161let dicoDesMois = ["January", "February", "March", "April", "May"];
162fetchWeather();
163
164//Données sur les astéroides
165document.getElementById("asteroid_date").oninput = function () {
166  getDataAsteroids;
167};
168
169function getDateAsteroid() {
170  const date = document.getElementById("asteroid_date").value;
171  return date;
172}
173
174function getDataAsteroids() {
175  const startURL = "https://api.nasa.gov/neo/rest/v1/feed?start_date=";
176  const endURL = "&api_key=byMXZRYPDymQvCcgAEarTFUmCZVtf4OXrnRu5UPY";
177  fetch(
178    startURL + getDateAsteroid() + "&end_date=" + getDateAsteroid() + endURL
179  )
180    .then((response) => {
181      return response.json();
182    })
183    .then((data) => {
184      console.log(data);
185      const length = data.near_earth_objects["2023-03-03"];
186      const description = document.querySelector("#asteroid_description");
187      description.innerHTML = `${length.length} asteroids were near the eart on this date`;
188      description.style.setProperty("background-color", "#333");
189    });
190}
191
192getDataAsteroids();
193
194// document.getElementById("asteroid_date").oninput = getDataAsteroids();
195
196// function fetchAsteroids () {
197//   const dateAsteroid = () => {
198//     return document.getElementById("asteroid_input").value
199//   }
200//   const asteroidsData = await fetch ("https://api.nasa.gov/neo/rest/v1/feed?start_date=" + dateAsteroid() +"&api_key=rAfAxs6xqfoUBzxLvSRyQUNgE7RYURRNkf2jrj2a&date=")
201//   console.log(asteroidsData)
202// }