weather-now-API/script.js at master · NatachaKey/weather-now-API · GitHub

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
gsap.from("#header", {y:-300, delay:0.2, duration:3, opacity:0.5, ease:"power4.out"});
gsap.from("#city", {y:-300, delay:1.2, duration:3, opacity:0.5, ease:"power4.out"});
gsap.from("#date", {y:-300, delay:2.2, duration:3, opacity:0, ease:"power4.out"});
gsap.from("#temperature", {y:-300, delay:3.2, duration:3, opacity:0, ease:"power4.out"});
gsap.from("#feelsLike", {y:-300, delay:4.2, duration:3, opacity:0, ease:"power4.out"});
gsap.from("#conditions", {y:-300, delay:5.2, duration:3, opacity:0, ease:"power4.out"});
gsap.from("#variation", {y:300, delay:6.2, duration:3, opacity:0, ease:"power4.out"});

const api = {
    endpoint: "http://api.openweathermap.org/data/2.5/",
    key: "bac9ac3d98649b318d11627f2e4318ad"
}

getApiGeolocation();

async function getApiGeolocation() {
    const resGeolocation = await fetch(`https://ipgeolocation.abstractapi.com/v1/?api_key=b1195a0d717b4bb88763fce48faf455a`);
    const resultGeolocation = await resGeolocation.json();
    getInfo(resultGeolocation.city);
}

const input= document.querySelector("#input");
input.addEventListener("keypress", enter);

function enter (e){
    if (e.keyCode === 13){
      getInfo(input.value)
    }
}

async function getInfo (data) {
    const res = await fetch(`${api.endpoint}weather?q=${data}&units=metric&appID=${api.key}`);
    const resReceived= await res.json();

displayResult(resReceived);
  input.value="";

}

function   displayResult(resReceived){
let city= document.querySelector("#city");
city.textContent= `${resReceived.name}, ${resReceived.sys.country}`;

getOurDate();

let temperature= document.querySelector("#temperature");
temperature.innerHTML= `${Math.round(resReceived.main.temp)}<span>°</span>`;

let feelsLike = document.querySelector("#feelsLike");
feelsLike.innerHTML=` Feels like: ${Math.round(resReceived.main.feels_like)}<span>°</span>`;

let conditions= document.querySelector("#conditions");
conditions.textContent= `${resReceived.weather[0].main}`;

let variation= document.querySelector("#variation");
variation.innerHTML="Min: " +` ${Math.round(resReceived.main.temp_min)}<span>°</span>`+ " " + "Min: " + `${Math.round(resReceived.main.temp_max)}<span>°</span>`;

//  fetch  random background:
// document.body.style.backgroundImage = "url('https://source.unsplash.com/1600x900/?" + resReceived.name + "')"
}

function getOurDate(){

const myDate = new Date();
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

let day = days[myDate.getDay()];

let todayDate=myDate.getDate();

let month = months[myDate.getMonth()];

let year= myDate.getFullYear();

let showDate= document.querySelector("#date");
 showDate.textContent = `${day}` + " " + `${todayDate}` + " " + `${month}` + " " + `${year}`;
}