diff --git a/JavaScript/Weather App/images/bg.jpg b/JavaScript/Weather App/images/bg.jpg
new file mode 100644
index 0000000..4589f56
Binary files /dev/null and b/JavaScript/Weather App/images/bg.jpg differ
diff --git a/JavaScript/Weather App/index.html b/JavaScript/Weather App/index.html
new file mode 100644
index 0000000..9f90cfe
--- /dev/null
+++ b/JavaScript/Weather App/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+ Weather App
+
+
+
+ Weather in Celsius
+ Search your location!
+
+
+
+
+
+
+
+
+
+
diff --git a/JavaScript/Weather App/index.js b/JavaScript/Weather App/index.js
new file mode 100644
index 0000000..ee558b1
--- /dev/null
+++ b/JavaScript/Weather App/index.js
@@ -0,0 +1,38 @@
+const form = document.getElementById("form");
+
+form.addEventListener("submit", (e) => {
+ e.preventDefault();
+ const location = document.getElementById("location").value;
+
+ getWeatherData(location);
+
+})
+
+
+async function getWeatherData(city) {
+ const response = await fetch(displayCityWeather(city));
+ const data = await response.json();
+
+ const cityName = document.getElementById("city");
+ const temp = document.getElementById("temp");
+ const humidity = document.getElementById("humidity");
+ const weatherDescription = document.getElementById("weather-description");
+ const country = document.getElementById("country");
+
+
+ cityName.innerHTML = `${data.name}, `;
+ country.innerHTML = data.sys.country;
+ temp.innerHTML = data.main.temp + "°" + "C";
+ humidity.innerHTML = `Humidity: ${data.main.humidity}%`;
+
+
+ const capitalStr = data.weather[0].description.replace(/\b\w/g, c => c.toUpperCase());
+ weatherDescription.innerHTML = capitalStr;
+
+}
+getWeatherData("Athens");
+
+
+function displayCityWeather(location) {
+ return `http://api.openweathermap.org/data/2.5/weather?q=${location}&units=metric&APPID=3da58929e45b1d77b5f8aaf11691b250`
+}
diff --git a/JavaScript/Weather App/styles.css b/JavaScript/Weather App/styles.css
new file mode 100644
index 0000000..19aaf35
--- /dev/null
+++ b/JavaScript/Weather App/styles.css
@@ -0,0 +1,73 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+ text-align: center;
+ height: 100vh;
+ display: grid;
+ place-content: center;
+ background-color:indianred;
+ color: white;
+ /* text-shadow: 2px 2px 1px black; */
+}
+
+
+input {
+ margin: 0.5em 0;
+ padding: 0.5em;
+ font-size: 1rem;
+}
+
+input:valid:required {
+ background-color: lightgreen;
+}
+
+/* input:invalid {
+ box-shadow: 0 0 5px 1px red;
+} */
+
+
+header {
+ margin-bottom: 3.5em;
+}
+
+h1 {
+ font-size: 3.5rem;
+}
+h2 {
+ font-size: 2.2rem;
+}
+
+form {
+ margin-bottom: 2em;
+}
+
+input {
+ width: 300px;
+}
+
+#btn {
+ padding: 0.5em 0.8em;
+ font-size: .8rem;
+}
+
+.location-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 2rem;
+}
+
+.flex-container {
+ display: flex;
+ flex-direction: column;
+ font-size: 1.9rem;
+}
+
+.flex-item {
+ margin-bottom: 0.2em;
+}