diff --git a/style.css b/style.css index dc1968f..6983bde 100644 --- a/style.css +++ b/style.css @@ -1,63 +1,88 @@ -.grid-container { - - display: grid; - grid-template-columns: 50% 50%; - background-color: white; - padding: 5px; - height: 100%; - } - .grid-item1{ - - background-color: royalblue; - display: grid; - } - .grid-item{ - - background-color: lightgrey; - display: grid; - } - h1, h3{ - color: white; - font-weight: bolder; - margin-top: 25%; - } - span{ - color: black; - font-weight: bolder; - } - p{ - color: white; - - } - li{ - color: white; - - } - .bdy{ - margin-left: 20%; - } - .dd{ - margin-left: 25%; - margin-top: 10%; - } - #pp{ - color: black; - } - #show{ - color: black; - font-size: xx-large; - } - #show1,#show3{ - color: black; - font-size: medium; - } - #show2{ - color: black; - font-size: xx-large; - } - #tt{ - margin-left: 20%; - margin-top: 20%; - } - - \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital@1&display=swap'); +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Source Sans Pro', sans-serif; + +} +body{ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background: #222; + background-image: url('https://source.unsplash.com/1600x900/?landscape'); + font-size: 128%; +} +.card{ + background: #000000d0; + color: white; + padding: 2rem; + border-radius: 30px; + width: 100%; + max-width: 420px; + margin: 1rem; + +} + +.search{ + + display: flex; + align-items: center; + justify-content: center; +} +button{ + margin: 0.5rem; + border-radius: 50%; + border: none; + height: 2.2rem; + width: 2.2rem; + font-size: large; + color: white; + outline: none; + background: #7c7c7c2b; + cursor: pointer; + transition: 0.2s ease-in-out; +} +button:hover{ + background:#7c7c7c6b; +} +input { + border: none; + outline: none; + padding: 0.5rem 1rem; + border-radius: 24px; + background: #7c7c7c2b; + color: white; + font-size: 100%; + width: calc(100% - 100px); +} +h1.temp{ + margin: 0; + margin-bottom: 0.5rem; +} + +.flex{ + display: flex; + align-items: center; + +} +.description{ + text-transform: capitalize; + margin-left: 8px; +} +.weather.loading{ + visibility: hidden; + max-height: 20px; + position: relative; +} +.weather.loading:after{ + visibility: visible; + content: "loaing...."; + color: white; + position: absolute; + top: 0; + left: 20px; +} \ No newline at end of file diff --git a/weather.html b/weather.html index bb2d461..87f7e64 100644 --- a/weather.html +++ b/weather.html @@ -1,30 +1,36 @@ - - - - - Weather app - - - -
-
- -
-
-
-
-
-
-
-
°c
-
-
°c / °c
-
-
-
- - - + + + + + Weather app + + + + +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/weather.js b/weather.js index c5e0068..d566551 100644 --- a/weather.js +++ b/weather.js @@ -1 +1,27 @@ //Complete the Weather API Backend part using openweathermap api +let day = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; +let month = ['January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'Octomber', 'November', 'December']; + + + +document.querySelector('.search').addEventListener('click', () => { + let input = document.querySelector('.search-box').value; + if (input === "") { + alert("Please enter the city!"); + return; + } + fetch(`https://api.openweathermap.org/data/2.5/weather?q=${input}&appid=563ab618a11ed790dbc9970f64fa4f81`) + .then((response) => response.json()) + .then((data) => { + console.log(data); + document.querySelector('.city').textContent = `${data.name}, ${data.sys.country}`; + let date = new Date(); + document.querySelector('.date').textContent = `${day[date.getDay()]} ${date.getDate()} ${month[date.getMonth()]} ${date.getFullYear()}`; + document.querySelector('.temp').textContent = `${parseInt(data.main.temp-273.15)}°c`; + document.querySelector('.weather').textContent = `${data.weather[0].main}`; + document.querySelector('.high-low').textContent = `${parseInt(data.main.temp_min-273.15)}°c / ${parseInt(data.main.temp_max-273.15)}°c`; + }) + .catch(() => { + alert("The city you entered is incorrect!"); + }) +}); \ No newline at end of file