Hugging Face's logo

Spaces:
duongve
/
Weather_Dashboard
Sleeping

App Files Community
Weather_Dashboard
File size: 3,249 Bytes 
320a5a6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
document.getElementById('search-button').addEventListener('click', function() {
    let city = document.getElementById('city-input').value;
    fetchWeatherData(city);
});

document.getElementById('location-button').addEventListener('click', function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
            let lat = position.coords.latitude;
            let lon = position.coords.longitude;
            fetchWeatherDataByLocation(lat, lon);
        });
    } else {
        alert('Geolocation is not supported by this browser.');
    }
});

function fetchWeatherData(city) {
    fetch(`/weather?city=${city}`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert(data.error);
            } else {
                displayWeatherData(data);
            }
        })
        .catch(error => console.error('Error:', error));
}

function fetchWeatherDataByLocation(lat, lon) {
    fetch(`/weatherlocation?lat=${lat}&lon=${lon}`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert(data.error);
            } else {
                displayWeatherData(data);
            }
        })
        .catch(error => console.error('Error:', error));
}

function displayWeatherData(data) {
    let currentWeather = document.getElementById('current-weather');
    currentWeather.innerHTML = `

        <div class="weather-details">

            <h2>${data.location.name} (${data.current.last_updated})</h2>

            <p>Temperature: ${data.current.temp_c}°C</p>

            <p>Wind: ${data.current.wind_kph} KPH</p>

            <p>Humidity: ${data.current.humidity}%</p>

        </div>

        <div class="weather-icon">

            <img src="${data.current.condition.icon}" alt="${data.current.condition.text}">

            <p>${data.current.condition.text}</p>

        </div>

    `;
    
    let forecast = document.getElementById('forecast');
    forecast.innerHTML = '';
    
    let lastFourDays = data.forecast.forecastday.slice(-4);
    lastFourDays.forEach(day => {
        forecast.innerHTML += `

            <div class="forecast-day">

                <h3>${day.date}</h3>

                <img src="${day.day.condition.icon}" alt="${day.day.condition.text}">

                <p>Temp: ${day.day.avgtemp_c}°C</p>

                <p>Wind: ${day.day.maxwind_kph} KPH</p>

                <p>Humidity: ${day.day.avghumidity}%</p>

            </div>

        `;
    });
}


document.getElementById('subscribe-form').addEventListener('submit', function(event) {
    event.preventDefault();
    let email = document.getElementById('email-input').value;
    fetch('/subscribe', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
               },
        body: JSON.stringify({ email: email })
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            alert(data.message);
        }
    })
    .catch(error => console.error('Error:', error));
});