Weather

commit 86ecf964f422f29a7d170b2cedc0c16f7221b459 Author: NRJ YDV <88180887+NeeRaj-2401@users.noreply.github.com> Date: Tue Jun 13 15:04:53 2023 +0530 Add files via upload diff --git a/icons/clear.svg b/icons/clear.svg new file mode 100644 index 0000000..d6bd631 --- /dev/null +++ b/icons/clear.svg @@ -0,0 +1,105 @@ + + + diff --git a/icons/cloud.svg b/icons/cloud.svg new file mode 100644 index 0000000..3961666 --- /dev/null +++ b/icons/cloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/haze.svg b/icons/haze.svg new file mode 100644 index 0000000..8f41e2c --- /dev/null +++ b/icons/haze.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/rain.svg b/icons/rain.svg new file mode 100644 index 0000000..b843ef9 --- /dev/null +++ b/icons/rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/snow.svg b/icons/snow.svg new file mode 100644 index 0000000..157e07e --- /dev/null +++ b/icons/snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/storm.svg b/icons/storm.svg new file mode 100644 index 0000000..64c19ae --- /dev/null +++ b/icons/storm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..51ffbb3 --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + + Weather + + + + + + + + +

Weather App

+ +

+ _ + °C +

_ _

+ + _, _ +

+ +

+ _ + °C +

Feels like

+ +

+ _ +

Humidity

+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..4866e77 --- /dev/null +++ b/script.js @@ -0,0 +1,92 @@ +const wrapper = document.querySelector(".wrapper"), + inputPart = wrapper.querySelector(".input-part"), + infoTxt = inputPart.querySelector(".info-txt"), + inputField = inputPart.querySelector("input"), + locationBtn = inputPart.querySelector("button"), + wIcon = wrapper.querySelector(".weather-part img"), + arrowBack = wrapper.querySelector("header i"); + +const apiKey = "c97161f5ff5a992afb41796b30adc57f"; +let api; + +inputField.addEventListener("keyup", (e) => { + if (e.key == "Enter" && inputField.value != "") { + requestApi(inputField.value); + } +}); + +locationBtn.addEventListener("click", () => { + if (navigator.geolocation) { + //if browser supports geolocation + navigator.geolocation.getCurrentPosition(onSuccess, onError); + } else { + alert("your browser does not support geolocation api"); + } +}); + +function onSuccess(position) { + const { latitude, longitude } = position.coords; //getting latitue and longitude of use device from coords obj + api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${apiKey}`; + fecthData(); +} +function onError(error) { + infoTxt.innerText = error.message; + infoTxt.classList.add("error"); +} + +function requestApi(city) { + api = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`; + fecthData(); +} + +function fecthData() { + infoTxt.innerText = "Getting Weather details...."; + infoTxt.classList.add("pending"); + // getting api response and returning it with parsing into js obj and in another + // then function calling weatherDetails() with passing api result as an argument + fetch(api) + .then((response) => response.json()) + .then((result) => weatherDetails(result)); +} + +function weatherDetails(info) { + if (info.cod == "404") { + infoTxt.innerText = `${inputField.value} isn't a valid city name`; + infoTxt.classList.replace("pending", "error"); + } else { + // lets gets + const city = info.name; + const country = info.sys.country; + const { description, id } = info.weather[0]; + const { feels_like, humidity, temp } = 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"; + } + + // lets pass thes values to partivular html element + wrapper.querySelector(".temp .numb").innerText = Math.floor(temp); + wrapper.querySelector(".weather").innerText = description; + wrapper.querySelector(".location span").innerText = `${city}, ${country}`; + wrapper.querySelector(".temp .numb-2").innerText = Math.floor(feels_like); + wrapper.querySelector(".humidity span").innerText = `${humidity}%`; + + infoTxt.classList.remove("pending", "error"); + wrapper.classList.add("active"); + console.log("info", info); + } +} + +arrowBack.addEventListener("click", () => { + wrapper.classList.remove("active"); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..b7ad270 --- /dev/null +++ b/style.css @@ -0,0 +1,197 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body{ + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: linear-gradient(to right, #000428, #004e92); +} +::selection{ + color: #fff; + background: #43AFFC; +} +.wrapper{ + width: 400px; + background: #fff; + border-radius: 7px; + box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05); +} +.wrapper header{ + display: flex; + font-size: 21px; + font-weight: 500; + color: #000428; + padding: 16px 15px; + align-items: center; + border-bottom: 1px solid #ccc; +} +header i{ + font-size: 0em; + cursor: pointer; + margin-right: 8px; +} +.wrapper.active header i{ + margin-left: 5px; + font-size: 30px; +} +.wrapper .input-part{ + margin: 20px 25px 30px; +} +.wrapper.active .input-part{ + display: none; +} +.input-part .info-txt{ + display: none; + font-size: 17px; + text-align: center; + padding: 12px 10px; + border-radius: 7px; + margin-bottom: 15px; +} +.input-part .info-txt.error{ + color: #721c24; + display: block; + background: #f8d7da; + border: 1px solid #f5c6cb; +} +.input-part .info-txt.pending{ + color: #0c5460; + display: block; + background: #d1ecf1; + border: 1px solid #bee5eb; +} +.input-part :where(input, button){ + width: 100%; + height: 55px; + border: none; + outline: none; + font-size: 18px; + border-radius: 7px; +} +.input-part input{ + text-align: center; + padding: 0 15px; + border: 1px solid #ccc; +} +.input-part input:is(:focus, :valid){ + border: 2px solid #000428; +} +.input-part input::placeholder{ + color: #bfbfbf; +} +.input-part .separator{ + height: 1px; + width: 100%; + margin: 25px 0; + background: #ccc; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} +.separator::before{ + content: "or"; + color: #b3b3b3; + font-size: 19px; + padding: 0 15px; + background: #fff; +} +.input-part button{ + color: #fff; + cursor: pointer; + background: linear-gradient(to left, #000428, #004e92); + transition: 0.3s ease; +} +.input-part button:hover{ + background: #000428; +} + +.wrapper .weather-part{ + display: none; + margin: 30px 0 0; + align-items: center; + justify-content: center; + flex-direction: column; +} +.wrapper.active .weather-part{ + display: flex; +} +.weather-part img{ + max-width: 125px; +} +.weather-part .temp{ + display: flex; + font-weight: 500; + font-size: 72px; +} +.weather-part .temp .numb{ + font-weight: 600; +} +.weather-part .temp .deg{ + font-size: 40px; + display: block; + margin: 10px 5px 0 0; +} +.weather-part .weather{ + font-size: 21px; + text-align: center; + margin: -5px 20px 15px; +} +.weather-part .location{ + display: flex; + font-size: 19px; + padding: 0 20px; + text-align: center; + margin-bottom: 30px; + align-items: flex-start; +} +.location i{ + font-size: 22px; + margin: 4px 5px 0 0; +} +.weather-part .bottom-details{ + display: flex; + width: 100%; + justify-content: space-between; + border-top: 1px solid #ccc; +} +.bottom-details .column{ + display: flex; + width: 100%; + padding: 15px 0; + align-items: center; + justify-content: center; +} +.column i{ + color: #000428; + font-size: 40px; +} +.column.humidity{ + border-left: 1px solid #ccc; +} +.column .details{ + margin-left: 3px; +} +.details .temp, .humidity span{ + font-size: 18px; + font-weight: 500; + margin-top: -3px; +} +.details .temp .deg{ + margin: 0; + font-size: 17px; + padding: 0 2px 0 1px; +} +.column .details p{ + font-size: 14px; + margin-top: -6px; +} +.humidity i{ + font-size: 37px; +} \ No newline at end of file