diff --git a/Frontend/index.html b/Frontend/index.html
index 01f3eb9..c0c007e 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -455,6 +455,23 @@
Environmental Intelligence
+
+
+
+
+
+
diff --git a/Frontend/script.js b/Frontend/script.js
index 1c044ca..ec1f178 100644
--- a/Frontend/script.js
+++ b/Frontend/script.js
@@ -263,3 +263,45 @@ if (scrollTopBtn) {
});
});
}
+
+
+const form = document.getElementById("weatherForm");
+const errorsEl = document.getElementById("formErrors");
+
+form.addEventListener("submit", async (e) => {
+ e.preventDefault();
+ errorsEl.textContent = ""; // clear old errors
+
+ const city = document.getElementById("city").value.trim();
+ const state = document.getElementById("state").value.trim();
+ const country = document.getElementById("country").value.trim();
+
+ // Regex: only letters, spaces, hyphens allowed
+ const nameRegex = /^[a-zA-Z\s-]+$/;
+ let errors = [];
+
+ if (!city || !nameRegex.test(city)) {
+ errors.push("City must contain only letters.");
+ }
+ if (!state || !nameRegex.test(state)) {
+ errors.push("State must contain only letters.");
+ }
+ if (!country || !nameRegex.test(country)) {
+ errors.push("Country must contain only letters.");
+ }
+
+ if (errors.length > 0) {
+ errorsEl.innerHTML = errors.join("
");
+ return; // stop before API call
+ }
+
+ // If validation passes, proceed with API call
+ try {
+ const response = await fetch(`/weather?city=${city}&state=${state}&country=${country}`);
+ const data = await response.json();
+ console.log(data);
+ // TODO: update UI with weather data
+ } catch (error) {
+ console.error("Error fetching weather:", error);
+ }
+});