diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5d075c2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+ Weather App
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..9a21507
--- /dev/null
+++ b/script.js
@@ -0,0 +1,76 @@
+const weatherApi = {
+ key: "abfe07c7242727ad21ec691df7ab63b7",
+ baseUrl: "https://api.openweathermap.org/data/2.5/weather"
+}
+
+const searchInputBox = document.getElementById('input-box');
+//event listner Function on Keypress
+searchInputBox.addEventListener('keypress', (event) => {
+
+ if (event.keyCode == 13) {
+ console.log(searchInputBox.value);
+ getWeatherReport(searchInputBox.value);
+ document.querySelector(".location-details").style.display = "block";
+ document.querySelector(".weather-status").style.display = "block";
+ document.querySelector(".temp").style.display = "block";
+ document.querySelector(".min-max").style.display = "block";
+ document.querySelector(".weather").style.display = "block";
+ }
+});
+//Get weather Report
+function getWeatherReport(city) {
+ fetch(`${weatherApi.baseUrl}?q=${city}&appid=${weatherApi.key}&units=metric`)
+ .then(weather => {
+ return weather.json();
+ }).then(showWeatherReport);
+}
+//show weather Report
+function showWeatherReport(weather) {
+ console.log(weather);
+
+ let city = document.getElementById('city');
+ city.innerText = `${weather.name} , ${weather.sys.country}`;
+
+ let temp = document.getElementById('temp');
+ temp.innerHTML = `${Math.round(weather.main.temp)}°C`;
+
+ let max = document.getElementById('min-max');
+ max.innerHTML = `${Math.floor(weather.main.temp_min)}°C(min) / ${Math.ceil(weather.main.temp_max)}°C(max)`;
+
+ let weatherType = document.getElementById('weather');
+ weatherType.innerText = `${weather.weather[0].main}`;
+
+ let date = document.getElementById('date');
+ let todatDate = new Date();
+ date.innerText = dateManage(todatDate);
+
+ if (weatherType.textContent == 'Clear') {
+ document.body.style.backgroundImage = "url('images/a.jpg')";
+ } else if (weatherType.textContent == 'Clouds') {
+ document.body.style.backgroundImage = "url('images/cloudy.jpg')";
+ } else if (weatherType.textContent == 'Rain') {
+ document.body.style.backgroundImage = "url('images/rainy.jpg')";
+ } else if (weatherType.textContent == 'Snow') {
+ document.body.style.backgroundImage = "url('images/snowy.jpg')";
+ } else if (weatherType.textContent == 'Thunderstrom') {
+ document.body.style.backgroundImage = "url('images/thunderstrom.jpg')";
+ } else if (weatherType.textContent == 'Haze') {
+ document.body.style.backgroundImage = "url('images/cloudy.jpg')";
+ }
+}
+
+//Date manage
+function dateManage(dateArg) {
+ let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+ let months = ["January", "Febraury", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+ let year = dateArg.getFullYear();
+ let month = months[dateArg.getMonth()];
+ let date = dateArg.getDate();
+ let day = days[dateArg.getDay()];
+
+ return `${date} ${month} (${day}), ${year}`;
+}
+
+//api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}
+
+//abfe07c7242727ad21ec691df7ab63b7
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..67dba73
--- /dev/null
+++ b/style.css
@@ -0,0 +1,83 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background-image: url('images/suny.jpg');
+ height: 100vh;
+ overflow: hidden;
+ background-repeat: no-repeat;
+ background-position: top center;
+ font-family: Arial, Helvetica, sans-serif;
+ background-size: cover;
+}
+
+.app-main {
+ width: 50vh;
+ margin: 100px auto;
+ background-color: rgba(240, 248, 255, 0.6);
+ padding: 20px;
+ text-align: center;
+}
+
+.app-main>* {
+ margin-bottom: 20px;
+}
+
+.input-box {
+ width: 100%;
+ background-color: rgba(255, 255, 255, 0.6);
+ border: none;
+ outline: none;
+ color: rgb(128, 33, 5);
+ font-size: 1.2rem;
+ height: 50px;
+ border-radius: 5px;
+ padding: 0 10px;
+ text-align: center;
+}
+
+.input-box:focus {
+ background-color: rgba(255, 255, 255);
+}
+
+.weather-body {
+ display: none;
+ color: #582233;
+ padding: 20px;
+ line-height: 2rem;
+ border-radius: 10px;
+ background-color: rgba(255, 255, 255, 0.6);
+ height: 50vh;
+}
+
+.location-details {
+ display: none;
+ color: rgb(85, 23, 4);
+ font-weight: bold;
+}
+
+.weather-status {
+ display: none;
+ color: rgb(77, 20, 3);
+ padding: 20px;
+}
+
+.temp {
+ display: none;
+ color: rgb(70, 17, 1);
+ font-size: 50pt;
+ font-weight: 700;
+ margin: 20px 0;
+ text-shadow: 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.min-max,
+.weather {
+ display: none;
+ margin: 20px 0;
+ font-size: 12pt;
+ font-weight: 600;
+}
\ No newline at end of file