diff --git a/style.css b/style.css index dc1968f..478eae8 100644 --- a/style.css +++ b/style.css @@ -1,63 +1,87 @@ -.grid-container { - - display: grid; - grid-template-columns: 50% 50%; - background-color: white; - padding: 5px; - height: 100%; +* { + padding: 0; + margin: 0; } - .grid-item1{ - background-color: royalblue; - display: grid; + .app-wrap { + background: linear-gradient(180deg, #7802ae, #460166); + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } - .grid-item{ - background-color: lightgrey; - display: grid; + .search-box { + height: 61px; + width: 217px; + border-top-left-radius: 30px; + border: none; + border-bottom-right-radius: 30px; + border-bottom: 4px solid #d5820c; + background: #9d4ec2; + outline: none; + padding: 0 5%; + font-size: larger; + color: #000000a6; + transition: 0.5s ease; } - h1, h3{ - color: white; - font-weight: bolder; - margin-top: 25%; - } - span{ - color: black; - font-weight: bolder; - } - p{ - color: white; - - } - li{ - color: white; - + + .search-box::placeholder { + color: #000000a6; + transition: 0.5s ease; } - .bdy{ - margin-left: 20%; + + .search-box:focus::placeholder { + color: #9d4ec2; } - .dd{ - margin-left: 25%; - margin-top: 10%; + + header { + display: flex; + flex-direction: column; + align-items: center; } - #pp{ - color: black; + + .search { + height: 6vh; + width: 7vw; + border: none; + border-top-right-radius: 25px; + border-bottom-left-radius: 25px; + margin: 10% 0; + font-size: medium; + box-shadow: 0px 0px 12px 1px rgb(0 0 0 / 48%); + transition: 0.5s ease-out; + background: aliceblue; } - #show{ - color: black; - font-size: xx-large; + + :is(.location, .current) { + display: flex; + flex-direction: column; + align-items: center; + color: aliceblue; } - #show1,#show3{ - color: black; - font-size: medium; + + .city { + font-size: x-large; } - #show2{ - color: black; - font-size: xx-large; + + .temp { + font-size: 6em; + margin: 20% 0; + text-shadow: 0px 8px 1px rgb(0 0 0); + font-weight: bold; } - #tt{ - margin-left: 20%; - margin-top: 20%; + + .weather { + font-size: xx-large; + font-style: italic; + font-weight: 600; + text-shadow: 0px 1px 5px black; } - - \ No newline at end of file + + .hi-low { + font-size: xx-large; + font-weight: 100; + text-shadow: 0px 1px 5px black; + } \ No newline at end of file diff --git a/weather.html b/weather.html index bb2d461..0921df3 100644 --- a/weather.html +++ b/weather.html @@ -1,30 +1,34 @@ - - - - - Weather app - - - -
-
- -
-
-
-
-
-
-
-
°c
-
-
°c / °c
-
-
-
- - - + + + + + Weather app + + + +
+
+ +
+
+
+
+
+
+
+
°c
+
+
°c / °c
+
+
+
+ + + \ No newline at end of file diff --git a/weather.js b/weather.js index c5e0068..5ecb01d 100644 --- a/weather.js +++ b/weather.js @@ -1 +1,52 @@ //Complete the Weather API Backend part using openweathermap api +//Complete the Weather API Backend part using openweathermap api +document.querySelector(".search-box").addEventListener("input", async (e) => { + const days = [ + "sunday", + "monday", + "tuesday", + "wednesday", + "thursday", + "friday", + "saturday", + ] + const months = [ + "january", + "february", + "march", + "april", + "may", + "june", + "july", + "august", + "september", + "october", + "november", + "december", + ] + const today = new Date() + const search_city = e.target.value + console.log(search_city) + const url = `https://api.openweathermap.org/data/2.5/weather?q=${search_city}&units=metric&appid=01525b1923322486597bf9c18edb85a3` + try { + const res = await fetch(url) + const output = await res.json() + console.log(output) + document.querySelector(".city").innerHTML = + output.name + " , " + output.sys.country + document.querySelector(".date").innerHTML = + days[today.getDay()] + + " " + + today.getDate() + + " " + + months[today.getMonth()] + + " " + + today.getFullYear() + document.querySelector(".temp").innerHTML = output.main.temp + "°c" + document.querySelector(".weather").innerHTML = output.weather[0].main + document.querySelector(".hi-low").innerHTML = + output.main.temp_min + "°c / " + output.main.temp_max + "°c" + } catch (e) { + console.log(e.message) + } + }) \ No newline at end of file