├── README.md
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # WeatherApplication
2 | A simple weather application using the openweather API.
3 |
4 | STEPS TO RUN THE CODE:
5 | 1. Go to https://openweathermap.org
6 | 2. Create a free account
7 | 3. Navigate to the API keys section
8 | 4. Generate a key
9 | 5. Copy that key to clipboard
10 | 6. Insert that key into the required variable in the script.js file
11 | 7. Enjoy!
12 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Weather App
7 |
8 |
9 |
10 |
11 |
Weather App
12 |
13 |
14 |
15 |
![Weather Icon]()
16 |
17 |
18 |
19 |
20 |
21 |
22 |
${data.message}
`;
47 | } else {
48 | const cityName = data.name;
49 | const temperature = Math.round(data.main.temp - 273.15); // Convert to Celsius
50 | const description = data.weather[0].description;
51 | const iconCode = data.weather[0].icon;
52 | const iconUrl = `https://openweathermap.org/img/wn/${iconCode}@4x.png`;
53 |
54 | const temperatureHTML = `
55 | ${temperature}°C
56 | `;
57 |
58 | const weatherHtml = `
59 | ${cityName}
60 | ${description}
61 | `;
62 |
63 | tempDivInfo.innerHTML = temperatureHTML;
64 | weatherInfoDiv.innerHTML = weatherHtml;
65 | weatherIcon.src = iconUrl;
66 | weatherIcon.alt = description;
67 |
68 | showImage();
69 | }
70 | }
71 |
72 | function displayHourlyForecast(hourlyData) {
73 | const hourlyForecastDiv = document.getElementById('hourly-forecast');
74 |
75 | const next24Hours = hourlyData.slice(0, 8); // Display the next 24 hours (3-hour intervals)
76 |
77 | next24Hours.forEach(item => {
78 | const dateTime = new Date(item.dt * 1000); // Convert timestamp to milliseconds
79 | const hour = dateTime.getHours();
80 | const temperature = Math.round(item.main.temp - 273.15); // Convert to Celsius
81 | const iconCode = item.weather[0].icon;
82 | const iconUrl = `https://openweathermap.org/img/wn/${iconCode}.png`;
83 |
84 | const hourlyItemHtml = `
85 |
86 |
${hour}:00
87 |
88 |
${temperature}°C
89 |