apiWeather.github.io/app.js at main · diebarix/apiWeather.github.io · 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
window.addEventListener('load', () => {
    //navigator.geolocation devuelve un objeto de geolocalizacion de solo lectura, que proporciona acceso web a la geolocalizacion
    let lon
    let lat

    let temperatureWorth = document.getElementById('temperature-worth')
    let temperatureDescription = document.getElementById('temperature-description')
    let ubication = document.getElementById('ubication')
    let iconAnimated = document.getElementById('icon-animated')
    let windSpeed = document.getElementById('wind-speed')

    if(navigator.geolocation){
        //con getCurrentPosition obtenemos todos los datos de nuestra localizacion
        navigator.geolocation.getCurrentPosition(position => {
            console.log(position)
            lon = position.coords.longitude
            lat = position.coords.latitude
            console.log(lon)

            const url = /*Aqui va la API */;
            console.log(url)
            //usamos peticiones hacia la API usando fetch
            //fetch utiliza promesas
            fetch(url)
            //vamos a indicar que trabajaremos en formato json
                .then(response => {return response.json()})
                //data devolvera los datos de la ciudad en el formato json
                .then(data => {
                    let temp =  data.main.temp
                    //lo mostramos en nuestro html con .textContent
                    tempCelcius = Math.round(temp - 273.15)
                    temperatureWorth.textContent = `${tempCelcius} *C`

                    let desc = data.weather[0].description
                    temperatureDescription.textContent = desc.toUpperCase()

                    ubication.textContent = data.name
                    windSpeed.textContent = `${data.wind.speed} m/s`
                    //icons static
                    let weatherIcon = data.weather[0].icon
                    const urlIcon = `http://openweathermap.org/img/wn/${weatherIcon}.png`
                    console.log(data)

                    //icons animated with svg
                    switch (data.weather[0].description) {
                        case 'clear sky':
                            iconAnimated.src = 'animated/day.svg'
                            console.log('clear')
                            break;
                        case 'few clouds':
                            iconAnimated.src = 'animated/cloudy-night-1.svg'
                            console.log('few clouds')
                            break;
                        case 'scattered clouds':
                            iconAnimated.src = 'animated/cloudy-night-2.svg'
                            console.log('scattered clouds')
                            break;
                        case 'overcast clouds':
                            iconAnimated.src = 'animated/cloudy-day-2.svg'
                            console.log('overcast clouds')
                            break;
                        case 'broken clouds':
                            iconAnimated.src = 'animated/cloudy-night-3.svg'
                            console.log('broken clouds')
                            break;
                        case 'shower rain':
                            iconAnimated.src = 'animated/rainy-7.svg'
                            console.log('shower rain')
                            break;
                        case 'rain':
                            iconAnimated.src = 'animated/rainy-4.svg'
                            console.log('rain')
                            break;
                        case 'thunderstorm':
                            iconAnimated.src = 'animated/thunder.svg'
                            console.log('thunderstorm')
                            break;
                        case 'snow':
                            iconAnimated.src = 'animated/snowy-6.svg'
                            console.log('snow')
                            break;
                        case 'mist':
                            iconAnimated.src = 'animated/cloudy.svg'
                            console.log('mist')
                            break;

                        default:
                            break;
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        })
    }
})