Skip to content

Complete Weather Dashboard functionality and improve responsiveness #314

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
komalharshita merged 4 commits into from
May 19, 2026
Merged

Complete Weather Dashboard functionality and improve responsiveness #314

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1daa64d
escape literal liquid tags in architecture doc
Smrithi-krishna May 18, 2026
39bdfae
Fix formatting issues in architecture.md
Smrithi-krishna May 18, 2026
9b2f008
Merge branch 'komalharshita:main' into main
Smrithi-krishna May 19, 2026
9ac62f8
feat: implement weather dashboard functionality and responsiveness
Smrithi-krishna May 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 174 additions & 8 deletions starter_code/weather_dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,11 +221,47 @@
}
.detail-sub { font-size: 0.78rem; color: #9ca3af; margin-top: 2px; }

/* ---- Responsive ---- */
@media (max-width: 480px) {
.card { padding: 26px 20px; }
.temp-value { font-size: 2.8rem; }
}
.card,
.detail-card,
button,
input {
transition: all 0.25s ease;
}

/*responsive*/
@media (max-width: 600px) {

.search-row {
flex-direction: column;
}

.search-btn {
width: 100%;
}

.temp-row {
flex-direction: column;
align-items: flex-start;
}

.details-grid {
grid-template-columns: 1fr;
}

.city-header {
flex-direction: column;
gap: 8px;
}

.weather-icon {
width: 60px;
height: 60px;
}

.card {
padding: 24px 18px;
}
}
</style>
</head>
<body>
Expand Down Expand Up @@ -331,6 +367,28 @@ <h1>Weather Dashboard</h1>
// ---------------------------------------------------------------------------
function searchWeather() {
// --- Write your code here ---
var city = document.getElementById("city-input").value.trim();

if (city === "") {
showError("Please enter a city name.");
return;
}

var statusMsg = document.getElementById("status-msg");
statusMsg.textContent = "Searching for " + city + "...";
statusMsg.className = "message info";

document.getElementById("search-btn").disabled = true;

var url =
API_BASE +
"?q=" +
encodeURIComponent(city) +
"&appid=" +
API_KEY +
"&units=metric";

fetchWeather(url);

}

Expand All @@ -348,8 +406,23 @@ <h1>Weather Dashboard</h1>
// 5. On network error (.catch): call showError("Network error. Check your connection.").
// 6. Always re-enable the search button when done (success or error).
// ---------------------------------------------------------------------------
function fetchWeather(url) {
async function fetchWeather(url) {
// --- Write your code here ---
try {
var response = await fetch(url);
var data = await response.json();

if (data.cod !== 200) {
showError(data.message);
return;
}

displayWeather(data);
} catch (error) {
showError("Network error. Check your connection.");
} finally {
document.getElementById("search-btn").disabled = false;
}

}

Expand Down Expand Up @@ -390,6 +463,54 @@ <h1>Weather Dashboard</h1>
// ---------------------------------------------------------------------------
function displayWeather(data) {
// --- Write your code here ---
currentTempC = data.main.temp;
currentFeelsLikeC = data.main.feels_like;
currentUnit = "C";

document.getElementById("city-name").textContent = data.name;

document.getElementById("city-date").textContent =
new Date().toLocaleDateString();

document.getElementById("temp-value").textContent =
Math.round(currentTempC);

document.getElementById("temp-unit").textContent = "C";

document.getElementById("weather-icon").src =
"https://openweathermap.org/img/wn/" +
data.weather[0].icon +
"@2x.png";

document.getElementById("weather-desc").textContent =
data.weather[0].description;

document.getElementById("feels-like").textContent =
Math.round(data.main.feels_like) + " C";

document.getElementById("humidity").textContent =
data.main.humidity + "%";

document.getElementById("wind-speed").textContent =
data.wind.speed + " m/s";

document.getElementById("wind-direction").textContent =
getWindDirection(data.wind.deg);

document.getElementById("conditions-main").textContent =
data.weather[0].main;

document.getElementById("conditions-desc").textContent =
data.weather[0].description;

document.getElementById("toggle-btn").textContent =
"Switch to Fahrenheit";

document.getElementById("weather-result").style.display = "block";

document.getElementById("status-msg").textContent = "";

document.getElementById("weather-icon").alt =data.weather[0].description;

}

Expand Down Expand Up @@ -419,6 +540,34 @@ <h1>Weather Dashboard</h1>
// ---------------------------------------------------------------------------
function toggleUnit() {
// --- Write your code here ---
if (currentTempC === null) return;

var tempValue = document.getElementById("temp-value");
var tempUnit = document.getElementById("temp-unit");
var feelsLike = document.getElementById("feels-like");
var toggleBtn = document.getElementById("toggle-btn");

if (currentUnit === "C") {
var tempF = (currentTempC * 9/5) + 32;
var feelsF = (currentFeelsLikeC * 9/5) + 32;

tempValue.textContent = Math.round(tempF);
tempUnit.textContent = "F";
feelsLike.textContent = Math.round(feelsF) + " F";

toggleBtn.textContent = "Switch to Celsius";

currentUnit = "F";
} else {
tempValue.textContent = Math.round(currentTempC);
tempUnit.textContent = "C";
feelsLike.textContent =
Math.round(currentFeelsLikeC) + " C";

toggleBtn.textContent = "Switch to Fahrenheit";

currentUnit = "C";
}

}

Expand All @@ -441,8 +590,24 @@ <h1>Weather Dashboard</h1>
// ---------------------------------------------------------------------------
function getWindDirection(degrees) {
// --- Write your code here ---

return degrees + " deg"; // Replace this line with the real implementation
if (degrees >= 337.5 || degrees < 22.5) {
return "North";
} else if (degrees < 67.5) {
return "Northeast";
} else if (degrees < 112.5) {
return "East";
} else if (degrees < 157.5) {
return "Southeast";
} else if (degrees < 202.5) {
return "South";
} else if (degrees < 247.5) {
return "Southwest";
} else if (degrees < 292.5) {
return "West";
} else {
return "Northwest";
}

}


Expand All @@ -464,3 +629,4 @@ <h1>Weather Dashboard</h1>
</script>
</body>
</html>

Loading