WeatherApp/index.js at main · s123dhara/WeatherApp · 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
const container = document.querySelector('.container')
const search = document.querySelector('.search-box button')
const weatherBox = document.querySelector('.weather-box')
const weatherDetails = document.querySelector('.weather-details')
const err404 = document.querySelector('.not-found')

search.addEventListener('click',()=>{
    const apiKey= '7964279a53c1d011d0080ed3d4a4224b'
    const city = document.querySelector('.search-box input').value;

    if(city === '')
     return ;

    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`)
    .then(response => response.json())
    .then(json =>{
        if(json.cod === '404')
        {
            container.style.height = '400px';
            weatherBox.style.display = 'none'
            weatherDetails.style.display = 'none';
            err404.style.display ='block'
            err404.classList.add('fadeIn')
            return;
        }

        err404.style.display ='none'
        err404.classList.remove('fadeIn')

        const image = document.querySelector('.weather-box img')
        const temperature = document.querySelector('.weather-box .temperature')
        const description = document.querySelector('.weather-box .description')
        const humidity = document.querySelector('.weather-details .humidity span')
        const wind = document.querySelector('.weather-details .wind span')

        switch(json.weather[0].main)
        {
            case 'Clear':
                    image.src = 'clearl.png';
                    document.body.style.backgroundImage = 'url("clear.jpg")';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundPosition = 'center center';
                    break;

                case 'Rain':
                    image.src = 'rainl.png';
                    document.body.style.backgroundImage = 'url("rainy.jpg")';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundPosition = 'center center';
                    break;

                case 'Snow':
                    image.src = 'snowl.png';
                    document.body.style.backgroundImage = 'url("snowy.jpg")';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundPosition = 'center center';
                    break;

                case 'Clouds':
                    image.src = 'cloudl.png';
                    document.body.style.backgroundImage = 'url("cloudy.jpg")';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundPosition = 'center center';
                    break;

                case 'Haze':
                    image.src = 'mistl.png';
                    document.body.style.backgroundImage = 'url("haze.jpg")';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundPosition = 'center center';
                    break;
               case 'Smoke':
                    image.src = 'smokyl.png';
                    document.body.style.backgroundImage = 'url("smoke.jpg")';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundPosition = 'center center';
                    break;
                case 'Fog':
                    image.src = 'fogl.png';
                    document.body.style.backgroundImage = 'url("fog.jpg")';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundPosition = 'center center';
                    break;
                case 'Drizzle':
                    image.src = 'drizzlel.png';
                    document.body.style.backgroundImage = 'url("drizzle.jpg")';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.body.style.backgroundPosition = 'center center';
                    break;

                default:
                    image.src = '';
                    document.body.style.backgroundImage = 'url("photo.jpg")';
        }

        temperature.innerHTML = `${parseInt(json.main.temp)}<span>°C</span>`;

        description.innerHTML =  `${json.weather[0].description}`
        humidity.innerHTML = `${json.main.humidity}%`
        wind.innerHTML = `${parseInt(json.wind.speed)}Km/h`

        weatherBox.style.display = ''
        weatherDetails.style.display = ''
        weatherBox.classList.add('fadeIn');
        weatherDetails.classList.add('fadeIn')
        container.style.height = '599px'

    });

})