add weather jquery function

Author: Daniel1000c

weatherApp/scripts/script.js

@@ -1,57 +1,84 @@
-//Create weather function
-$(document).ready(function() {
-    $("searchBtn").click(function() {
-        //Create city, api key, and url
-        let userCity = $("#inputBox").val();
-        let apiKey = "" //Create api from openweathermap
-        let url = "" //get url from openweathermap
-
-        //Create ajax function
-        $.ajax({
-            url: url,
-            method: "GET",
-            success: function(data) {
-                let weather = data.weather[0].main.tolowercase(); //Get Weather
-                let temperature = data.main.temp; //Get Temperature
-                let weatherDescription = data.weather[0].description; //Get Weather Description
-                let weatherHumidity = data.main.humidity; //Get Humidity
-                let statusIcon = 'images/error.png'; //Create default status img
-
-                //Create weather images
-                switch(weather) {
-                    case "clear":
-                        statusIcon = 'images/sunny.png';
-                        break;
-                    case "clouds":
-                        statusIcon = 'images/cloudy.png';
-                        break;
-                    case "rain":
-                        statusIcon = 'images/rainy.png';
-                        break;
-                    case "snow":
-                        statusIcon = 'images/snowy.png';
-                        break;
-                    case "storm":
-                        statusIcon = 'images/thunderstorm.png';
-                        break;
-                    case "light clouds":
-                        statusIcon = 'images/lightClouds.jpeg';
-                        break;
-                    case "windy":
-                        statusIcon = 'images/windy.png';
-                        break;
-                    default:
-                        statusIcon = 'images/error.png'; //Default to error message
-                }
+$(document).ready(function () {
+    $("#searchBtn").click(function () {
+        let cityName = $("#inputBox").val().trim();
+
+        if (cityName !== "") {
+            //Fetch weather data using wttr.in
+            let siteURL = `https://wttr.in/${cityName}?format=j1`;
+
+            $.getJSON(siteURL, function (data) {
+                
+                //Check first if weather data is valid
+                if (data && data.current_condition) {
+
+                    //extract weather data
+                    let city = data.nearest_area[0].areaName[0].value;
+                    let temp = data.current_condition[0].temp_C;
+                    let desc = data.current_condition[0].weatherDesc[0].value.toLowerCase();
+                    let humidity = data.current_condition[0].humidity;
 
-                //Update weather ui
+                    //Create weather icon path
+                    let imgPath = "images/error.png";
+
+                    switch(true) {
+                        case desc.includes("sunny") :
+                            imgPath = "images/sunny.png";
+                            break;
+                        case desc.includes("cloudy") :
+                            imgPath = "images/cloudy.png";
+                            break;
+                        case desc.includes("rain") :
+                            imgPath = "images/rainy.png";
+                            break;
+                        case desc.includes("snow") :
+                            imgPath = "images/snowman.png";
+                            break;
+                        case desc.includes("thunder") :
+                            imgPath = "images/thunderstorm.png";
+                            break;
+                        case desc.includes("wind") :
+                            imgPath = "images/windy.png";
+                            break;
+                        default:
+                            imgPath = "images/error.png";
+                            break;
+                    }
+
+                    //Update weather Container
+                    $("#cityName").text(city);
+                    $("#temp").text(`Temperature: ${temp} °C`); //Temperature
+                    $("#desc").text(`Description: ${desc}`); //Description
+                    $("#hum").text(`Humidity: ${humidity} %`); //Humidity
+
+                    //Link weather icon
+                    $("#weatherIcon").attr("src", imgPath);
+
+                    //Show weather container
+                    $(".weatherResult").fadeIn();
+                } else {
+                    //Create error message
+                    alert("Weather Data not Found!!!!");
+                    //Hide weather container
+                    $(".weatherResult").hide();
+                }
+            }).fail(function () {
 
-            },
-            //Create error function
-            error: function() {
+                //Create error message
+                alert("City not found!");
+                $("#inputBox").val("");
+                $("#inputBox").focus();
+                $("#inputBox").css("border", "2px solid red");
 
+                //Hide weather container
+                $(".weatherResult").hide();
+            });
+        } else {
+            alert("Please enter a city name!");
+            $("#inputBox").focus();
+            $("#inputBox").css("border", "2px solid red");
 
-            }
-        });
+            //Hide weather container
+            $(".weatherResult").hide();
+        }
     });
 });