diff --git a/Weather App/Images/PartlyCloudy.jpg b/Weather App/Images/PartlyCloudy.jpg new file mode 100644 index 0000000..dece5e5 Binary files /dev/null and b/Weather App/Images/PartlyCloudy.jpg differ diff --git a/Weather App/Images/clear.jpg b/Weather App/Images/clear.jpg new file mode 100644 index 0000000..dcfed68 Binary files /dev/null and b/Weather App/Images/clear.jpg differ diff --git a/Weather App/Images/homePhoto.jpg b/Weather App/Images/homePhoto.jpg new file mode 100644 index 0000000..8f77a7c Binary files /dev/null and b/Weather App/Images/homePhoto.jpg differ diff --git a/Weather App/Images/mist.jpg b/Weather App/Images/mist.jpg new file mode 100644 index 0000000..e2ae9eb Binary files /dev/null and b/Weather App/Images/mist.jpg differ diff --git a/Weather App/Images/rain.jpg b/Weather App/Images/rain.jpg new file mode 100644 index 0000000..b192417 Binary files /dev/null and b/Weather App/Images/rain.jpg differ diff --git a/Weather App/Images/snow.jpg b/Weather App/Images/snow.jpg new file mode 100644 index 0000000..a98b018 Binary files /dev/null and b/Weather App/Images/snow.jpg differ diff --git a/Weather App/css/style.css b/Weather App/css/style.css index 4d95552..c57d918 100644 --- a/Weather App/css/style.css +++ b/Weather App/css/style.css @@ -1 +1,130 @@ -/* css k naam pe sirf * hai */ \ No newline at end of file +/* css k naam pe sirf * hai */ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + border: none; + outline: none; + font-family: sans-serif; +} + +body{ + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-repeat: no-repeat; + background-size: auto; + background: url('../Images/homePhoto.jpg') +} + +.container{ + width: 400px; + height: min-content; + background-color: #fff; + border-radius: 12px; + padding: 28px; + border:1px solid red; + opacity: .8; +} + +.search-box{ + width: 100%; + height: min-content; + display: flex; + justify-content: space-between; + align-items: center; +} + +.search-box input{ + width: 84%; + font-size: 20px; + text-transform: capitalize; + color: #000; + background-color: #e6f5fb; + padding: 12px 16px; + border-radius: 14px; +} + +.search-box input::placeholder{ + color: #000; +} + +.search-box button{ + width: 46px; + height: 46px; + background-color: #e6f5fb; + border-radius: 50%; + cursor: pointer; + font-size: 20px; +} + +.search-box button:hover{ + color: #fff; + background-color: #ababab; +} +.weather-box{ + margin-block: 20px; + text-align: center; +} + +.weather-box .temperature{ + font-size: 40px; + font-weight: 800; + position: relative; +} +.weather-details{ + width: 100%; + display: flex; + justify-content: space-between; + margin-top: 30px; +} + +.humidity, .wind1{ + display: flex; + align-items: center; +} + +.humidity{ + margin-left: 20px; +} + +.wind1{ + margin-right: 20px; +} + +.weather-details i{ + font-size: 36px; +} + +.weather-details .text{ + margin-left: 10px; + font-size: 16px; +} +.text span{ + font-size: 20px; + font-weight: 700; +} + + +.blank{ + height:5rem; + +} +.feel{ + margin-top:5rem; + font-size: 1.3rem; +} +.tem{ + margin-top:3rem; +} +.feels{ + font-weight: 700; +} +.cel{ + font-weight: 700; +} +.tcel{ + font-weight: 700; + font-size: 2rem; +} \ No newline at end of file diff --git a/Weather App/js/script.js b/Weather App/js/script.js index 30f41c1..479749c 100644 --- a/Weather App/js/script.js +++ b/Weather App/js/script.js @@ -3,6 +3,8 @@ const sbmt = document.querySelector('#searchbtn'); const temp = document.querySelector('.temperature'); const wind = document.querySelector('.wind'); const vis = document.querySelector('.vis'); +const feels=document.querySelector('.feels'); +const body=document.querySelector('body'); let city_name; sbmt.addEventListener('click', () => { city_name = document.querySelector('#cityname').value; @@ -19,9 +21,34 @@ sbmt.addEventListener('click', () => { console.log(apiInfo.current.temp_c); console.log(apiInfo.current.feelslike_c); vis.innerText = `${apiInfo.current.humidity}`; - wind.innerText = `Speed (${apiInfo.current.wind_kph}) kmph`; - temp.innerText = `Temperature (${apiInfo.current.temp_c}) feels like (${apiInfo.current.feelslike_c})`; + wind.innerText = `${apiInfo.current.wind_kph}`; + temp.innerText = `${apiInfo.current.temp_c} ` ; + feels.innerText=`${apiInfo.current.feelslike_c} `; + switch (apiInfo.current.condition.text) { + case 'Partly cloudy': + document.body.style.backgroundImage = 'url("/Weather App/Images/PartlyCloudy.jpg")'; + break; + case 'Clear': + document.body.style.backgroundImage = 'url("/Weather App/Images/clear.jpg")'; + break; + case 'Rain': + document.body.style.backgroundImage = 'url("/Weather App/Images/rain.jpg")'; + break; + case 'Mist': + document.body.style.backgroundImage = 'url("/Weather App/Images/mist.jpg")'; + break; + case 'Snow': + document.body.style.backgroundImage = 'url("/Weather App/Images/snow.jpg")'; + break; + default: + document.body.style.backgroundImage = 'url("/Weather App/Images/PartlyCloudy.jpg")'; + break; + + } + + + } } weatherXhr.send(); -}) \ No newline at end of file +}) diff --git a/Weather App/weatherapp.html b/Weather App/weatherapp.html index 624a481..2328f65 100644 --- a/Weather App/weatherapp.html +++ b/Weather App/weatherapp.html @@ -5,25 +5,47 @@ Weather - + + +
+
+
- + +
+
+
- Temperature: +
°C
+
feels-like: °C
+ +
+
+
-
- Wind: -
-
- Humidity: -
-
+
+
+ +
+ --% +

Humidity

+
+
+
+ +
+ --Km/H +

Wind Speed

+
+
+ +
- \ No newline at end of file +