Jeelex · Jeelex · May 19, 2021 · May 19, 2021 · May 19, 2021 · May 19, 2021
diff --git a/JavaScript/Weather App/images/bg.jpg b/JavaScript/Weather App/images/bg.jpg
diff --git a/JavaScript/Weather App/index.html b/JavaScript/Weather App/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="description" content="Weather App for Social Hackers Academy" />
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<!-- <link rel="icon" type="image" href=""> -->
+		<title>Weather App</title>
+	</head>
+	<body>
+		<header>
+			<h1>Weather in Celsius</h1>
+			<h2>Search your location!</h2>
+		</header>
+
+    <form id="form">
+      <div>
+        <input type="text" id="location" placeholder="Location" minlength="2" required aria-required="true" />
+      </div>
+
+      <button id="btn" type="submit">Submit</button>
+    </form>
+
+    <main>
+			<div class="flex-container">
+				<div class="location-container">
+					<h3 class="flex-item" id="city"></h3>
+					<h3 class="flex-item" id="country"></h3>
+				</div>
+
+				<div class="flex-item" id="temp"></div>
+				<div class="flex-item" id="weather-description"></div>
+				<div class="flex-item" id="humidity"></div>
+			</div>
+		</main>
+		<script src="./index.js"></script>
+	</body>
+</html>
diff --git a/JavaScript/Weather App/index.js 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 + "&deg;" + "C";
+  humidity.innerHTML = `Humidity: ${data.main.humidity}&percnt;`;
+
+
+  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
@@ -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;
+}