diff --git a/Domains/Frontend/MiniProjects/quickWeather/ReadMe.md b/Domains/Frontend/MiniProjects/quickWeather/ReadMe.md new file mode 100644 index 00000000..532e28f8 --- /dev/null +++ b/Domains/Frontend/MiniProjects/quickWeather/ReadMe.md @@ -0,0 +1,13 @@ +# QuickWeather +Contributor:Utkarsh-660 + +## Description +QuickWeather is a simple weather card web app built using **HTML, CSS, and JavaScript**. +It uses the **OpenWeatherMap API** to display live **temperature**, **humidity**, and **wind speed** for any city you search. + +## How to Run +1. Download or clone this repository to your computer. +2. Get your API key from [OpenWeatherMap](https://openweathermap.org/) +3. Open `script.js` and replace + ```js + const apiKey = "YOUR_API_KEY"; diff --git a/Domains/Frontend/MiniProjects/quickWeather/images/clear.png b/Domains/Frontend/MiniProjects/quickWeather/images/clear.png new file mode 100644 index 00000000..d2bc413b Binary files /dev/null and b/Domains/Frontend/MiniProjects/quickWeather/images/clear.png differ diff --git a/Domains/Frontend/MiniProjects/quickWeather/images/clouds.png b/Domains/Frontend/MiniProjects/quickWeather/images/clouds.png new file mode 100644 index 00000000..75ef0476 Binary files /dev/null and b/Domains/Frontend/MiniProjects/quickWeather/images/clouds.png differ diff --git a/Domains/Frontend/MiniProjects/quickWeather/images/drizzle.png b/Domains/Frontend/MiniProjects/quickWeather/images/drizzle.png new file mode 100644 index 00000000..01cd0e72 Binary files /dev/null and b/Domains/Frontend/MiniProjects/quickWeather/images/drizzle.png differ diff --git a/Domains/Frontend/MiniProjects/quickWeather/images/humidity.png b/Domains/Frontend/MiniProjects/quickWeather/images/humidity.png new file mode 100644 index 00000000..804ef0ce Binary files /dev/null and b/Domains/Frontend/MiniProjects/quickWeather/images/humidity.png differ diff --git a/Domains/Frontend/MiniProjects/quickWeather/images/mist.png b/Domains/Frontend/MiniProjects/quickWeather/images/mist.png new file mode 100644 index 00000000..15ee1fd7 Binary files /dev/null and b/Domains/Frontend/MiniProjects/quickWeather/images/mist.png differ diff --git a/Domains/Frontend/MiniProjects/quickWeather/images/rain.png b/Domains/Frontend/MiniProjects/quickWeather/images/rain.png new file mode 100644 index 00000000..5c436c85 Binary files /dev/null and b/Domains/Frontend/MiniProjects/quickWeather/images/rain.png differ diff --git a/Domains/Frontend/MiniProjects/quickWeather/images/search.png b/Domains/Frontend/MiniProjects/quickWeather/images/search.png new file mode 100644 index 00000000..95ec64e7 Binary files /dev/null and b/Domains/Frontend/MiniProjects/quickWeather/images/search.png differ diff --git a/Domains/Frontend/MiniProjects/quickWeather/images/snow.png b/Domains/Frontend/MiniProjects/quickWeather/images/snow.png new file mode 100644 index 00000000..e03778da Binary files /dev/null and b/Domains/Frontend/MiniProjects/quickWeather/images/snow.png differ diff --git a/Domains/Frontend/MiniProjects/quickWeather/images/wind.png b/Domains/Frontend/MiniProjects/quickWeather/images/wind.png new file mode 100644 index 00000000..b9811a63 Binary files /dev/null and b/Domains/Frontend/MiniProjects/quickWeather/images/wind.png differ diff --git a/Domains/Frontend/MiniProjects/quickWeather/index.html b/Domains/Frontend/MiniProjects/quickWeather/index.html new file mode 100644 index 00000000..cc02e907 --- /dev/null +++ b/Domains/Frontend/MiniProjects/quickWeather/index.html @@ -0,0 +1,42 @@ + + + + + + Weather App + + + +
+
+ + +
+
+ +

22°C

+

Kolkata

+
+
+
+ +
+

50%

+

Humidity

+
+
+
+ +
+

5.63km/h

+

Wind Speed

+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/quickWeather/script2.js b/Domains/Frontend/MiniProjects/quickWeather/script2.js new file mode 100644 index 00000000..5a9bab39 --- /dev/null +++ b/Domains/Frontend/MiniProjects/quickWeather/script2.js @@ -0,0 +1,60 @@ +const City=document.querySelector('.city'); +const Temp=document.querySelector('.temp'); +const Humidity=document.querySelector('.humidity'); +const Wind=document.querySelector(".wind"); +const Searchbox=document.querySelector('.search input') +const Searchbtn=document.querySelector('.search button') +const imagechange=document.querySelector('.weatherimg') + + +const apikey="a50203f62c5ba6a8f4b1dd5d3622cf41"; +const apiUrl="https://api.openweathermap.org/data/2.5/weather?&units=metric&q="; + + +async function checkWeather(city){ + const response=await fetch(apiUrl +city+`&appid=${apikey}`); + var data=await response.json();//it will contain all the data of the city + console.log(data); + City.innerHTML=data["name"]; + Temp.innerHTML=Math.round(data.main["temp"]) + "°C"; + Humidity.innerHTML=data.main["humidity"] +"%"; + Wind.innerHTML=data.wind["speed"] +"Km/h"; + const Weather=data.weather[0].main; + console.log(Weather); + switch (Weather) { + case "Clear": + imagechange.src="images/clear.png" + break; + case "Clouds": + imagechange.src="images/clouds.png" + break; + case "Drizzle": + imagechange.src="images/drizzle.png" + break; + case "Humidity": + imagechange.src="images/humidity.png" + break; + case "Mist": + imagechange.src="images/mist.png" + break; + case "Rain": + imagechange.src="images/rain.png" + break; + case "Snow": + imagechange.src="images/snow.png" + break; + case "Wind": + imagechange.src="images/wind.png" + break; + + + default: + break; + } + +} +Searchbtn.addEventListener('click',()=>{ + checkWeather(Searchbox.value); +}) + + diff --git a/Domains/Frontend/MiniProjects/quickWeather/styles.css b/Domains/Frontend/MiniProjects/quickWeather/styles.css new file mode 100644 index 00000000..14b722f0 --- /dev/null +++ b/Domains/Frontend/MiniProjects/quickWeather/styles.css @@ -0,0 +1,82 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + + +} +body{ + background-color: #222; + display: flex; + justify-content: center; + align-items: center; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} +.card{ + width:37vwvw; + background: linear-gradient(135deg,#00feba,#5b548a); + height:70vh; + color: #fff; + margin: 20px; + margin-top: 100px; + padding: 30px; + padding-top: 35px; + text-align: center; + border-radius: 20px; +} + +.search{ + width: 100%; + display: flex; + align-items: center; + gap: 20px; + +} +.search input{ + border: 0; +height: 60px; + color: grey; +padding: 10px 25px; + +border-radius: 30px; +flex: 1; +font-size: 15px; +} +.search button{ + border: 0; + border-radius: 50%; + width: 60px; + height: 60px; + cursor: pointer; + +} +.search button img{ + width: 16px; + +} +.weatherimg{ + width: 120px; + margin-top: 20px; +} +.temp{ + font-size: 50px; +} +.city{ + font-size: 50px; +} +.col{ + display: flex; + align-items: center; + justify-content: space-between; +margin-top: 20px; +} +.col img{ + width: 40px; + margin-right: 10px; +} +.humidity{ + font-size: 28px; +} +.wind{ + font-size: 28px; +} \ No newline at end of file