Skip to content

Improve location-not-found error message with icon and field highlighting (#212) #272

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

Open
dikshajangra12918-oss wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve location-not-found error message with icon and field highlighting (#212) #272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 7 additions & 0 deletions Frontend/Analysis/analysis.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -554,6 +554,10 @@ body::before {
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.14);
transform: translateY(-1px);
}
.input-group input.input-error {
border-color: rgba(239, 68, 68, 0.75);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
}

button {
width: 100%;
Expand Down Expand Up @@ -607,6 +611,9 @@ button:hover {
background: rgba(34, 197, 94, 0.12);
color: #bbf7d0;
}
.message-icon {
margin-right: 8px;
}

.results-card {
display: block;
Expand Down
34 changes: 28 additions & 6 deletions Frontend/Analysis/analysis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,12 @@ const descriptions = {

const cityInput = document.getElementById("city");
const suggestionsBox = document.getElementById("city-suggestions");
// Clear the error highlight as soon as the user starts correcting the field.
if (cityInput) {
cityInput.addEventListener("input", () => {
cityInput.classList.remove("input-error");
});
}

if (cityInput && suggestionsBox) {
cityInput.addEventListener("input", async () => {
Expand Down Expand Up @@ -176,7 +182,7 @@ function generateRecommendations(risks) {


async function getWeatherData() {
const city = document.getElementById("city").value.trim();
const city = cityInput.value.trim();
const state = document.getElementById("state").value.trim();
const country = document.getElementById("country").value.trim();
const loading = document.getElementById("loading");
Expand All @@ -190,22 +196,34 @@ async function getWeatherData() {
const demoIndicator = document.getElementById("demo-mode-indicator");
const dispatchLogsBox = document.getElementById("dispatch-logs-box");

const showMessage = (message, tone) => {
messageBox.textContent = message;
const showMessage = (message, tone, highlightCity = false) => {
messageBox.innerHTML = "";
if (tone === "is-error") {
const icon = document.createElement("span");
icon.className = "message-icon";
icon.setAttribute("aria-hidden", "true");
icon.textContent = "⚠️";
messageBox.appendChild(icon);
}
const text = document.createElement("span");
text.textContent = message;
messageBox.appendChild(text);
messageBox.classList.remove("hidden", "is-error", "is-success");
if (tone) {
messageBox.classList.add(tone);
}
cityInput.classList.toggle("input-error", tone === "is-error" && highlightCity);
};

const hideMessage = () => {
messageBox.textContent = "";
messageBox.classList.add("hidden");
messageBox.classList.remove("is-error", "is-success");
cityInput.classList.remove("input-error");
};

if (!city || !state || !country) {
showMessage("Please fill all fields.", "is-error");
showMessage("Please fill all fields.", "is-error", true);
return;
}

Expand Down Expand Up @@ -234,8 +252,12 @@ async function getWeatherData() {
analyzeBtn.innerText = "Analyze Climate Risk";

if (!data.success) {
showMessage(data.message || "Location not found.", "is-error");
return;
showMessage(
data.message ||
"We couldn't find this location. Please check your city, state, or country spelling.",
"is-error",
true
);
}

hideMessage();
Expand Down