weather-app/script.js at master · Issac-Moses/weather-app · 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
document.addEventListener('DOMContentLoaded', function() {

    const weatherForm = document.getElementById('weather-form');
    const cityInput = document.getElementById('city-input');
    const weatherInfo = document.getElementById('weather-info');
    const videoSource = document.getElementById('video-source');
    const bgVideo = document.getElementById('bg-video');
    const weatherBox = document.getElementById('weather-box');


    const API_KEY = '5b74e87158f9cad9592fdfeac5683b9f';

    weatherBox.style.display = 'none';


    function initVideo() {
        videoSource.src = "videos/default.mp4";
        bgVideo.load();
        bgVideo.play().catch(e => {
            bgVideo.muted = true;
            bgVideo.play();
        });
    }


    initVideo();


    weatherForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const city = cityInput.value.trim();
        if (city) {
            getWeather(city);
        }
    });


    async function getWeather(city) {
        try {
            weatherBox.style.display = 'block';
            showLoading(`Fetching weather for ${city}...`);

            const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`);

            if (!response.ok) {
                throw new Error('City not found');
            }

            const data = await response.json();
            displayWeather(data);
        } catch (error) {
            showError("Weather Error", error.message);
            initVideo();
        }
    }

    function showLoading(message) {
        weatherInfo.innerHTML = `
            <div class="loading-spinner">⏳</div>
            <p>${message}</p>
        `;
    }

    function showError(title, message) {
        weatherInfo.innerHTML = `
            <h2 style="color: #ff6b6b;">❌ ${title}</h2>
            <p>${message}</p>
        `;
    }

    function displayWeather(data) {
        const condition = data.weather[0].main.toLowerCase();
        const { icon, video } = getWeatherAssets(condition);

        videoSource.src = `videos/${video}`;
        bgVideo.load();
        bgVideo.play();

        weatherInfo.innerHTML = `
            <h2>${data.name}, ${data.sys.country}</h2>
            <div style="font-size: 3rem;">${icon}</div>
            <p class="temperature">${Math.round(data.main.temp)}°C</p>
            <p class="conditions">${data.weather[0].description}</p>
            <p class="feels-like">Feels like: ${Math.round(data.main.feels_like)}°C</p>

            <div class="weather-details">
                <div class="weather-detail-item">
                    <span>Humidity</span>
                    <span>${data.main.humidity}%</span>
                </div>
                <div class="weather-detail-item">
                    <span>Wind</span>
                    <span>${data.wind.speed} m/s</span>
                </div>
                <div class="weather-detail-item">
                    <span>Pressure</span>
                    <span>${data.main.pressure} hPa</span>
                </div>
            </div>

            <div class="sun-times">
                <p>🌅 Sunrise: ${new Date(data.sys.sunrise * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
                <p>🌇 Sunset: ${new Date(data.sys.sunset * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
            </div>
        `;
    }

    function getWeatherAssets(condition) {
        const weatherAssets = {
            'clear': { icon: '☀️', video: 'sunny.mp4' },
            'rain': { icon: '🌧️', video: 'rainy.mp4' },
            'drizzle': { icon: '🌦️', video: 'drizzle.mp4' },
            'clouds': { icon: '☁️', video: 'cloudy.mp4' },
            'snow': { icon: '❄️', video: 'snowy.mp4' },
            'thunderstorm': { icon: '⛈️', video: 'thunderstorm.mp4' },
            'mist': { icon: '🌫️', video: 'foggy.mp4' },
            'fog': { icon: '🌫️', video: 'foggy.mp4' },
            'haze': { icon: '🌫️', video: 'foggy.mp4' },
            'tornado': { icon: '🌪️', video: 'tornado.mp4' },
            'default': { icon: '🌤️', video: 'default.mp4' }
        };

        return weatherAssets[condition] || weatherAssets['default'];
    }
});