Skip to content

Commit d8ecf58

Browse files
devmalik7devmalik7
authored
Merge pull request #88 from psy-duck1/update-weather-dashboard-in-javascript
Update weather dashboard in javascript
2 parents baa5347 + 70c7c69 commit d8ecf58

File tree

3 files changed

+649
-190
lines changed

3 files changed

+649
-190
lines changed

‎Javascript/Weather Site/index.html‎

Lines changed: 86 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,97 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Weather App</title>
7-
<link rel="stylesheet" href="style.css">
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Weather Dashboard</title>
7+
<link rel="stylesheet" href="style.css">
88
</head>
99
<body>
10-
<main class="app">
11-
<header>
12-
<h1>Weather App</h1>
13-
<div class="controls">
14-
<input id="q" type="text" placeholder="Enter city name" value="London">
15-
<button id="search">Search</button>
16-
</div>
17-
</header>
10+
<!-- Loading Spinner -->
11+
<div class="loading" id="loading">
12+
<div class="spinner"></div>
13+
</div>
1814

19-
<section id="output">
20-
<div class="card" id="card">
21-
<div class="left">
22-
<img src="" alt="weather icon" id="icon" class="icon">
23-
<div class="temp" id="temp">--°C</div>
24-
<div class="cond" id="condition">--</div>
15+
<div class="container">
16+
<!-- Header -->
17+
<header class="header">
18+
<h1>Weather Dashboard</h1>
19+
<div class="search-container">
20+
<input type="text" class="search-input" id="cityInput" placeholder="Search for a city..." autocomplete="off">
21+
<button class="search-btn" id="searchBtn">🔍</button>
22+
</div>
23+
</header>
24+
25+
<!-- Error Message -->
26+
<div class="error-message" id="errorMessage"></div>
27+
28+
<!-- Main Weather Display -->
29+
<div class="glass-card main-weather" id="mainWeather">
30+
<h2 class="city-name" id="cityName">Loading...</h2>
31+
<div class="date-time" id="dateTime"></div>
32+
<div class="weather-icon" id="weatherIcon">⏳</div>
33+
<div class="temperature">
34+
<span id="temperature">--°</span>
35+
<button class="temp-toggle" id="tempToggle">°F</button>
36+
</div>
37+
<div class="weather-description" id="weatherDescription">Loading weather data...</div>
38+
</div>
39+
40+
<!-- Weather Details Grid -->
41+
<div class="weather-details" id="weatherDetails">
42+
<div class="glass-card detail-card">
43+
<div class="detail-icon">🌡️</div>
44+
<div class="detail-info">
45+
<h3>Feels Like</h3>
46+
<div class="value" id="feelsLike">--°</div>
47+
</div>
48+
</div>
49+
<div class="glass-card detail-card">
50+
<div class="detail-icon">💧</div>
51+
<div class="detail-info">
52+
<h3>Humidity</h3>
53+
<div class="value" id="humidity">--%</div>
54+
</div>
55+
</div>
56+
<div class="glass-card detail-card">
57+
<div class="detail-icon">💨</div>
58+
<div class="detail-info">
59+
<h3>Wind Speed</h3>
60+
<div class="value" id="windSpeed">-- m/s</div>
61+
</div>
62+
</div>
63+
<div class="glass-card detail-card">
64+
<div class="detail-icon">🎚️</div>
65+
<div class="detail-info">
66+
<h3>Pressure</h3>
67+
<div class="value" id="pressure">-- hPa</div>
68+
</div>
69+
</div>
70+
<div class="glass-card detail-card">
71+
<div class="detail-icon">👁️</div>
72+
<div class="detail-info">
73+
<h3>Visibility</h3>
74+
<div class="value" id="visibility">-- km</div>
75+
</div>
76+
</div>
77+
<div class="glass-card detail-card">
78+
<div class="detail-icon">☀️</div>
79+
<div class="detail-info">
80+
<h3>UV Index</h3>
81+
<div class="value" id="uvIndex">--</div>
82+
</div>
83+
</div>
2584
</div>
26-
<div class="details">
27-
<div class="row">
28-
<div>
29-
<div class="muted">Location</div>
30-
<div id="location" class="small">--</div>
31-
</div>
32-
<div>
33-
<div class="muted">Local Time</div>
34-
<div id="localtime" class="small">--</div>
35-
</div>
36-
</div>
37-
<div class="meta">
38-
<div class="m">
39-
<div class="muted">Humidity</div>
40-
<div id="humidity">--%</div>
41-
</div>
42-
<div class="m">
43-
<div class="muted">Wind</div>
44-
<div id="wind">-- kph</div>
45-
</div>
46-
<div class="m">
47-
<div class="muted">Feels Like</div>
48-
<div id="feelslike">--°C</div>
49-
</div>
50-
</div>
51-
<div id="extra" class="small muted">Data from WeatherAPI.com</div>
85+
86+
<!-- 5-Day Forecast -->
87+
<div class="glass-card forecast-section">
88+
<h2>5-Day Forecast</h2>
89+
<div class="forecast-container" id="forecastContainer">
90+
<!-- Forecast cards will be dynamically generated -->
91+
</div>
5292
</div>
53-
</div>
54-
<div id="loading" class="loader" style="display:none"><i></i></div>
55-
<div id="error" style="display:none"></div>
56-
</section>
57-
</main>
93+
</div>
5894

59-
<script src="script.js"></script>
95+
<script src="script.js"></script>
6096
</body>
6197
</html>

0 commit comments

Comments
 (0)