Merge pull request #20 from panvicka/master

weather app resolve issue #8
MicroClub-USTHB · Oct 23, 2020 · a0bc3cc · a0bc3cc
2 parents 1f02978 + 2ff0278
commit a0bc3cc
Show file tree

Hide file tree

Showing 4 changed files with 322 additions and 0 deletions.
diff --git a/projects/weather-app/README.md b/projects/weather-app/README.md
@@ -0,0 +1,8 @@
+A simple weather app 
+
+Building and Executing
+--------------
+open index.html with live server of your choice 
+
+![screenshot](https://i.imgur.com/bFHblXo.png)
+
diff --git a/projects/weather-app/index.css b/projects/weather-app/index.css
@@ -0,0 +1,132 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Inconsolata", monospace;
+  background-color: #ebebeb;
+}
+
+.wrapper {
+   background-color: #ebebeb;
+
+  border-radius: 12px;
+  margin-top: 3em;
+  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.281);
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+img {
+  transform: scale(0.9);
+}
+
+button {
+  background-color: rgb(90, 90, 114);
+  padding: 0.8em 0.5em;
+}
+
+.city-search {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid blue;
+  justify-content: center;
+}
+
+input {
+  font-size: 2rem;
+  display: flex;
+
+  margin-right: 0px;
+  background-color: transparent;
+  border: 0px;
+  border-bottom: 3px solid rgba(0, 0, 0, 0.8);
+  width: 90%;
+  text-align: center;
+}
+
+i {
+  background: transparent;
+}
+
+input:focus {
+  outline: none;
+
+}
+
+.city {
+  background-color: transparent;
+  font-size: 2rem;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  margin: 0.3em;
+  padding: 0.5em;
+}
+
+.item {
+  background-color: #f5a15db6;
+  border-radius: 12px;
+  min-width: 350px;
+  margin: 1em;
+  padding: 0.5em;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  transition: transform 0.2s ease-in-out;
+}
+
+.item:hover {
+  transform: scale(1.05);
+}
+
+.item span {
+  font-size: 2rem;
+  text-align: left;
+}
+
+.text {
+  width: 40%;
+  color: black;
+}
+
+.hidden {
+  display: hidden;
+}
+
+button {
+  background-color: transparent;
+  border: none;
+  font-size: 1em;
+  color: rgba(0, 0, 0, 0.7);
+  transition: none;
+}
+
+button:hover {
+  color: rgba(0, 0, 0, 1);
+
+}
+
+button:focus {
+  outline: none;
+}
+
+footer {
+  width: 60%;
+  padding-top: 1em;
+
+  margin: 0 auto;
+}
+
+footer a {
+  color: rgba(0, 0, 0, 0.7);
+  text-decoration: none; 
+
+}
diff --git a/projects/weather-app/index.html b/projects/weather-app/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="index.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/loadingio/[email protected]/dist/ldbtn.min.css" />
+    <link rel="stylesheet" type="text/css"
+        href="https://cdn.jsdelivr.net/gh/loadingio/[email protected]/dist/loading.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
+
+    <title>Weather app</title>
+</head>
+
+<body>
+
+    <div class="container">
+        <div class=wrapper>
+            <div class="city">
+
+
+                <input type="text" id="city-input" />
+                <button id="search" class="ld ld-over-full"><i class="fas fa-play"></i>
+
+                </button>
+            </div class="city-search">
+
+            <div class="item">
+                <img src="https://img.icons8.com/dotty/80/000000/thermometer.png" />
+                <div class="text"><span class="variable" id="temperature"></span></div>
+            </div>
+
+            <div class="item">
+                <img src="https://img.icons8.com/dotty/80/000000/hygrometer.png" />
+                <div class="text"><span class="variable" id="humidity"></span>
+                </div>
+
+            </div>
+
+            <div class="item">
+                <img src="https://img.icons8.com/dotty/80/000000/partly-cloudy-day.png">
+                <div class="text"><span class="variable" id="cloads"></span></div>
+
+            </div>
+
+            <div class="item">
+                <img src="https://img.icons8.com/dotty/80/000000/sunrise.png" />
+                <div class="text"> <span class="variable" id="sunrise"></span></div>
+
+            </div>
+
+            <div class="item">
+                <img src="https://img.icons8.com/dotty/80/000000/sunset.png" />
+                <div class="text"><span class="variable" id="sundown"></span></div>
+
+            </div>
+
+            <div class="item">
+                <img src="https://img.icons8.com/dotty/80/000000/windsock.png" />
+                <div class="text"><span class="variable" id="wind"></span></div>
+
+            </div>
+
+        </div>
+
+    </div>
+    <footer>
+        <p>icons </p>
+        <p><a href="https://icons8.com/icon/77681/hygrometer">Hygrometer icon by Icons8</a>,
+            <a href="https://icons8.com/icon/77680/thermometer">Thermometer icon by Icons8</a>,
+            <a href="https://icons8.com/icon/43459/partly-cloudy-day">Partly Cloudy Day icon by Icons8</a>,
+            <a href="https://icons8.com/icon/101849/sunrise">Sunrise icon by Icons8</a>,
+            <a href="https://icons8.com/icon/101845/sunset">Sunset icon by Icons8</a>,
+            <a href="https://icons8.com/icon/F-XaEritKPx-/windsock">Windsock icon by Icons8</a>,
+        </p>
+
+        <p>Weather API: 
+        <a href="https://fcc-weather-api.glitch.me">Free Code Camp Weather API Pass-through
+        </a> 
+    </p>
+    </footer>
+
+
+    <script src="index.js"></script>
+
+</body>
+
+</html>
diff --git a/projects/weather-app/index.js b/projects/weather-app/index.js
@@ -0,0 +1,92 @@
+window.navigator.geolocation
+.getCurrentPosition(locationSucces, locationFail);
+
+function locationFail(data) {
+console.log("blocked");
+fetchWeatherData(50, 50);
+}
+
+function locationSucces(data) {
+fetchWeatherData(data.coords.longitude, data.coords.latitude);
+}
+
+function unixTimeStampToTime(unix_timestamp) {
+const date = new Date(unix_timestamp * 1000);
+const hours = date.getHours();
+const minutes = "0" + date.getMinutes();
+return hours + ':' + minutes.substr(-2);
+
+}
+
+function displayWeather(data) {
+document.querySelector("#temperature").textContent = data.main.temp + "°C";
+document.querySelector("#humidity").textContent = data.main.humidity + "%";
+document.querySelector("#cloads").textContent = data.weather[0].description;
+document.querySelector("#wind").textContent = data.wind.speed + " m/s";
+document.querySelector("#city-input").value = `${data.name}  (${data.sys.country})`;
+
+console.log(document.querySelector("#cloads"));
+document.querySelector("#sunrise").textContent = unixTimeStampToTime(data.sys.sunrise);
+document.querySelector("#sundown").textContent = unixTimeStampToTime(data.sys.sunset);
+// document.querySelector(".city").textContent = data.name;
+
+
+
+
+
+}
+
+function fetchWeatherData(long, latt) {
+
+
+const queryWeather = `https://fcc-weather-api.glitch.me/api/current?lat=${latt}&lon=${long}`;
+
+fetch(queryWeather).then(response => response.json()).then(data => {
+
+    if (data.name != "Shuzenji") {
+        displayWeather(data);
+        document.querySelector("button").classList.remove("running");
+    } else {
+        fetchWeatherData(long, latt);
+        document.querySelector("button").classList.remove("running");
+    }
+
+
+})
+
+
+
+}
+
+function searchCity() {
+document.querySelector("button").classList.add("running");
+document.querySelector("i").classList.add("hidden");
+const query = `https://geocode.xyz/${document.querySelector("#city-input").value}?json=1`;
+
+
+fetch(query)
+    .then(response => response.json())
+    .catch(error => console.log(error))
+    .then(data => {
+        if (data != undefined) {
+
+
+            if (data.longt != 0 && data.latt != 0) {
+                if (data.success == false) {
+                    alert("try again later")
+                } else {
+                    fetchWeatherData(data.longt, data.latt);
+                }
+
+
+            } else {
+                document.querySelector("button").classList.remove("running");
+                alert("no city like this found")
+            }
+
+        }
+    }).catch(error => console.log(error));
+}
+
+document.querySelector("#search").addEventListener('click', searchCity);
+