Date
-City
- Temp
- Min and Max Temp
- Sunny
-
-
-
-
-
+
+ Weather App
+
+
+
+
+ ![Weather Icon]()
+
+
+
-
\ No newline at end of file
diff --git a/Weather Forecast Webapp/js/icons/clear.svg b/Weather Forecast Webapp/js/icons/clear.svg
new file mode 100644
index 00000000..371d7c38
--- /dev/null
+++ b/Weather Forecast Webapp/js/icons/clear.svg
@@ -0,0 +1,105 @@
+
+
+
diff --git a/Weather Forecast Webapp/js/icons/cloud.svg b/Weather Forecast Webapp/js/icons/cloud.svg
new file mode 100644
index 00000000..39616667
--- /dev/null
+++ b/Weather Forecast Webapp/js/icons/cloud.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Weather Forecast Webapp/js/icons/haze.svg b/Weather Forecast Webapp/js/icons/haze.svg
new file mode 100644
index 00000000..8f41e2c0
--- /dev/null
+++ b/Weather Forecast Webapp/js/icons/haze.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Weather Forecast Webapp/js/icons/rain.svg b/Weather Forecast Webapp/js/icons/rain.svg
new file mode 100644
index 00000000..b843ef96
--- /dev/null
+++ b/Weather Forecast Webapp/js/icons/rain.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Weather Forecast Webapp/js/icons/snow.svg b/Weather Forecast Webapp/js/icons/snow.svg
new file mode 100644
index 00000000..157e07eb
--- /dev/null
+++ b/Weather Forecast Webapp/js/icons/snow.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Weather Forecast Webapp/js/icons/storm.svg b/Weather Forecast Webapp/js/icons/storm.svg
new file mode 100644
index 00000000..64c19aef
--- /dev/null
+++ b/Weather Forecast Webapp/js/icons/storm.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Weather Forecast Webapp/js/script.js b/Weather Forecast Webapp/js/script.js
index 9cfc9612..a60848d6 100644
--- a/Weather Forecast Webapp/js/script.js
+++ b/Weather Forecast Webapp/js/script.js
@@ -1,59 +1,89 @@
-/*---------------------------------------API--------------------------------------------*/
-
-const api = {
- key: "", /* <=== ENTER YOU API KEY WITHIN THE QUOTES*/
- base: "https://api.openweathermap.org/data/2.5/weather?",
-}
-
-/*-------------------FUNCTION TO DISPLAY DATE AND TIME USING MOMENT.JS-------------------*/
-
-const date = moment();
-document.getElementById("date").innerHTML = date.format("Mo MMM YYYY dddd, h:mm:ss");
-
-
-/*-----------------------FUNCTION TO TAKE THE VALUES WHEN ENTERED------------------------*/
-
- const Input = document.getElementById('input');
-
- Input.addEventListener('keypress', (event) => {
-
- if(event.keyCode == 13) {
- getWeather(Input.value); //passing the input value to getWeather function
- document.querySelector('.main-weather').style.display = "block"; //used to show the details as intially the display is set as none
+const wrapper = document.querySelector(".wrapper"),
+inputPart = document.querySelector(".input-part"),
+infoTxt = inputPart.querySelector(".info-txt"),
+inputField = inputPart.querySelector("input"),
+locationBtn = inputPart.querySelector("button"),
+weatherPart = wrapper.querySelector(".weather-part"),
+wIcon = weatherPart.querySelector("img"),
+arrowBack = wrapper.querySelector("header i");
+
+let api;
+
+inputField.addEventListener("keyup", e =>{
+ if(e.key == "Enter" && inputField.value != ""){
+ requestApi(inputField.value);
}
});
-/*-------------------------------FUNCTION TO GET WEATHER--------------------------------*/
-
-
-function getWeather(city) {
- fetch(`${api.base}q=${city}&appid=${api.key}&units=metric`) // format for calling api is given on the web docs
- // units=metric used for celcius, if you remove it the temperature would be in Fahrenheit
- .then(details => {
- return details.json(); // Sending all details to showWeather function in form of json
+locationBtn.addEventListener("click", () =>{
+ if(navigator.geolocation){
+ navigator.geolocation.getCurrentPosition(onSuccess, onError);
+ }else{
+ alert("Your browser not support geolocation api");
+ }
+});
- }).then(showWeather);
+function requestApi(city){
+ api = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${'de1400a8c4500ee4e0ebe2e706f9d077'}`;
+ fetchData();
}
-/*-------------------------------FUNCTION TO SHOW WEATHER--------------------------------*/
-
-
-function showWeather(details){ //Taking the received values from API into this function
-
- // console.log(details);
-
- let city = document.getElementById('city');
- city.innerHTML = `${details.name}, ${details.sys.country}`;
-
- let temperature = document.getElementById('temp');
- temperature.innerHTML = `${Math.round(details.main.temp)}°C`; //Rounding off the temp using math function
+function onSuccess(position){
+ const {latitude, longitude} = position.coords;
+ api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${'de1400a8c4500ee4e0ebe2e706f9d077'}`;
+ fetchData();
+}
- let minMax = document.getElementById('min-max');
- minMax.innerHTML = `${Math.round(details.main.temp_min)}°C (Min) and ${Math.round(details.main.temp_max)}°C (Max) `; //Rounding off the temp using math function
+function onError(error){
+ infoTxt.innerText = error.message;
+ infoTxt.classList.add("error");
+}
- let weatherType = document.getElementById('weather-type');
- weatherType.innerHTML = `${details.weather[0].main}`;
+function fetchData(){
+ infoTxt.innerText = "Getting weather details...";
+ infoTxt.classList.add("pending");
+ fetch(api).then(res => res.json()).then(result => weatherDetails(result)).catch(() =>{
+ infoTxt.innerText = "Something went wrong";
+ infoTxt.classList.replace("pending", "error");
+ });
}
-/*----------------------------------------------------------------------------------------*/
+function weatherDetails(info){
+ if(info.cod == "404"){
+ infoTxt.classList.replace("pending", "error");
+ infoTxt.innerText = `${inputField.value} isn't a valid city name`;
+ }else{
+ const city = info.name;
+ const country = info.sys.country;
+ const {description, id} = info.weather[0];
+ const {temp, feels_like, humidity} = info.main;
+
+ if(id == 800){
+ wIcon.src = "icons/clear.svg";
+ }else if(id >= 200 && id <= 232){
+ wIcon.src = "icons/storm.svg";
+ }else if(id >= 600 && id <= 622){
+ wIcon.src = "icons/snow.svg";
+ }else if(id >= 701 && id <= 781){
+ wIcon.src = "icons/haze.svg";
+ }else if(id >= 801 && id <= 804){
+ wIcon.src = "icons/cloud.svg";
+ }else if((id >= 500 && id <= 531) || (id >= 300 && id <= 321)){
+ wIcon.src = "icons/rain.svg";
+ }
+
+ weatherPart.querySelector(".temp .numb").innerText = Math.floor(temp);
+ weatherPart.querySelector(".weather").innerText = description;
+ weatherPart.querySelector(".location span").innerText = `${city}, ${country}`;
+ weatherPart.querySelector(".temp .numb-2").innerText = Math.floor(feels_like);
+ weatherPart.querySelector(".humidity span").innerText = `${humidity}%`;
+ infoTxt.classList.remove("pending", "error");
+ infoTxt.innerText = "";
+ inputField.value = "";
+ wrapper.classList.add("active");
+ }
+}
+arrowBack.addEventListener("click", ()=>{
+ wrapper.classList.remove("active");
+});
\ No newline at end of file
+
+
+
+
+
+ _
+ °C
+
+ _ _
+
+
+ _, _
+
+
+
+
+
+
+
+
+
+ _
+ °C
+
+ Feels like
+
+
+
+
+ _
+
+ Humidity
+