Merge pull request #87 from codedex-io/add-local-weather-app

Initial commit for Local Weather App tutorial
codedex-io · Jul 21, 2023 · dc37a94 · dc37a94
2 parents 9fa4514 + 6e50eac
commit dc37a94
Show file tree

Hide file tree

Showing 14 changed files with 780 additions and 0 deletions.
diff --git a/projects/view-weather-with-html-css-js/finished_weather_app.gif b/projects/view-weather-with-html-css-js/finished_weather_app.gif
diff --git a/projects/view-weather-with-html-css-js/header.png b/projects/view-weather-with-html-css-js/header.png
diff --git a/projects/view-weather-with-html-css-js/new_open_weather_account_form.png b/projects/view-weather-with-html-css-js/new_open_weather_account_form.png
diff --git a/projects/view-weather-with-html-css-js/open_weather_account_prompt.png b/projects/view-weather-with-html-css-js/open_weather_account_prompt.png
diff --git a/projects/view-weather-with-html-css-js/open_weather_api_key.gif b/projects/view-weather-with-html-css-js/open_weather_api_key.gif
diff --git a/projects/view-weather-with-html-css-js/rendered_weather_app_html_only.png b/projects/view-weather-with-html-css-js/rendered_weather_app_html_only.png
diff --git a/projects/view-weather-with-html-css-js/rendered_weather_app_with_css_1.png b/projects/view-weather-with-html-css-js/rendered_weather_app_with_css_1.png
diff --git a/projects/view-weather-with-html-css-js/rendered_weather_app_with_css_2.png b/projects/view-weather-with-html-css-js/rendered_weather_app_with_css_2.png
diff --git a/projects/view-weather-with-html-css-js/rendered_weather_app_with_css_3.png b/projects/view-weather-with-html-css-js/rendered_weather_app_with_css_3.png
diff --git a/projects/view-weather-with-html-css-js/rendered_weather_app_with_css_4.png b/projects/view-weather-with-html-css-js/rendered_weather_app_with_css_4.png
diff --git a/projects/view-weather-with-html-css-js/view-weather-with-html-css-js.mdx b/projects/view-weather-with-html-css-js/view-weather-with-html-css-js.mdx
diff --git a/projects/view-weather-with-html-css-js/weather-app/index.html b/projects/view-weather-with-html-css-js/weather-app/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="styles.css" rel="stylesheet" />
+  <title>Weather App</title>
+</head>
+<body>
+  <main>
+    <section id="weather-wrapper">
+      <h1>Weather App</h2>
+      <div id="weather-search">
+        <input id="search" type="text" placeholder="Search by city" />
+        <input id="submit" type="submit" onclick="fetchWeather()" value="Search" />
+      </div>
+      <div id="weather-data" style="display: none;"></div>
+    </section>
+  </main>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/projects/view-weather-with-html-css-js/weather-app/script.js b/projects/view-weather-with-html-css-js/weather-app/script.js
@@ -0,0 +1,69 @@
+async function fetchWeather() {
+  // Step a. Create global variables and start inner functions
+  let searchInput = document.getElementById('search').value;
+  const weatherDataSection = document.getElementById("weather-data");
+  weatherDataSection.style.display = "block";
+
+  const apiKey = '26571981230f1dd6b72e6b2c6548535f'
+  // const apiKey = "REPLACE WITH YOUR API KEY"
+
+
+  if(searchInput == "") {
+    weatherDataSection.innerHTML = `
+    <div>
+    <h2>Empty Input!</h2>
+    <p>Please try again with a valid <u>city name</u>.</p>
+    </div>
+    `;
+    return;
+  }
+
+  // Step b. Get lat and lon coordinates via Geocoding API
+  async function getLonAndLat() {
+    const countryCode = 1
+    geocodeURL = `http://api.openweathermap.org/geo/1.0/direct?q=${searchInput.replace(" ", "%20")},${countryCode}&limit=1&appid=${apiKey}`
+
+    const response = await fetch(geocodeURL);
+    if(!response.ok) {
+      console.log("Bad response! ", response.status);
+      return;
+    }
+
+    const data = await response.json();
+    if(data.length == 0) {
+      console.log("Something went wrong here.");
+      weatherDataSection.innerHTML = `
+      <div>
+      <h2>Invalid Input: "${searchInput}"</h2>
+      <p>Please try again with a valid <u>city name</u>.</p>
+      </div>
+      `;
+      return;
+    } else {
+      return data[0];
+    }
+  }
+
+  async function getWeatherData(lon, lat) {
+    // Step c. Get weather information via Current Weather API
+    const weatherURL = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}`
+    const response = await fetch(weatherURL);
+
+    // Step d. Display the weather data
+    const data = await response.json();
+    weatherDataSection.style.display = "flex";
+    weatherDataSection.innerHTML = `
+    <img src="https://openweathermap.org/img/wn/${data.weather[0].icon}.png" alt="${data.weather[0].description}" width="100" />
+    <div>
+      <h2>${data.name}</h2>
+      <p><strong>Temperature:</strong> ${Math.round(data.main.temp - 273.15)}°C</p>
+      <p><strong>Description:</strong> ${data.weather[0].description}</p>
+    </div>
+    `
+  }
+
+  // These are part of Step d.
+  document.getElementById("search").value = "";
+  const geocodeData = await getLonAndLat();
+  getWeatherData(geocodeData.lon, geocodeData.lat);
+}
diff --git a/projects/view-weather-with-html-css-js/weather-app/styles.css b/projects/view-weather-with-html-css-js/weather-app/styles.css
@@ -0,0 +1,82 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+
+body {
+  background-image: url(https://www.travellens.co/content/images/size/w2000/format/webp/2022/06/Dumbo-NYC.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  height: 100vh;
+}
+
+
+main {
+  background-color: rgba(227, 193, 173, 0.85);
+  position: relative;
+  top: 30%;
+  border: 1px solid;
+  border-radius: 5px;
+  width: 45%;
+  margin: auto;
+  padding: 2em;
+}
+
+
+h1 {
+  margin-bottom: 20px;
+}
+
+
+#search {
+  border-radius: 5px 0 0 5px;
+  border: none;
+  padding: 10px;
+  font-size: 16px;
+  width: 70%;
+  height: 48px;
+}
+
+
+#submit {
+  border-radius: 0 5px 5px 0;
+  padding: 10px;
+  font-size: 16px;
+  width: 5em;
+  cursor: pointer;
+}
+
+#weather-wrapper {
+  display: flex;
+  flex-direction: column;
+  place-items: center;
+  height: 250px;
+}
+
+#weather-search {
+  display: flex;
+  width: 50%;
+  gap: 5px;
+}
+
+
+/* #weather-data {
+  background-color: rgba(255, 255, 255, 0.85);
+  border-radius: 5px;
+  padding: 1.5em;
+  margin-top: 20px;
+
+
+  text-align: center;
+  align-items: center;
+  gap: 12px;
+}
+
+
+#weather-data > img {
+  border-radius: 50%;
+  background-color: lightskyblue;
+}*/