+
+Let's get started!
+
+## Step 1: Project Setup
+
+First, we'll need to create the folders and files that will hold the code for our project. Let's begin by opening a terminal and creating a new folder named **weather-app** using the `mkdir` command. Then, go into this folder by using the `cd` command:
+
+```
+mkdir weather-app
+cd weather-app
+touch index.html styles.css index.js
+```
+
+This will create the following files in the **weather-app** folder:
+
+- An **index.html** file to render the application.
+- A **styles.css** file for customizing the appearance of our application.
+- An **index.js** file where we will fetch our weather data.
+
+We will return to these files later on. But for now, let's head over to OpenWeather!
+
+## Step 2: Get API Key From OpenWeather
+
+OpenWeather provides several APIs (or application programming interfaces) that feature interesting weather-related data.
+
+If you haven't already, you must create an OpenWeather account with a username, email, and password:
+
+
+
+**Note:** You'll be sent a verification email; make sure to answer it!
+
+Next, you'll be prompted to state what you want to do with OpenWeather's API.
+
+
+
+I recommend choosing “Education/Science" or “Other".
+
+You should now be ready to view your API key! After creating a new account, a new key should be generated for you. Near the top right, select your username, followed by “My API keys" in the dropdown:
+
+
+
+After confirming you have an active API key, let's move on to the next step!
+
+## Step 3: Write HTML
+
+It's time to start writing some code!
+
+Let's return to our code editor and re-open the **index.html** file.
+
+Add the following HTML to start:
+
+```html
+
+
+
+
+
+
+ `;
+ 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 = `
+ Empty Input!
+Please try again with a valid city name.
+
+
+ `;
+ 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 = `
+ Invalid Input: "${searchInput}"
+Please try again with a valid city name.
+![${data.weather[0].description}](https://openweathermap.org/img/wn/${data.weather[0].icon}.png)
+
+
+ `
+ }
+
+ // 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
new file mode 100644
index 00000000..354f827c
--- /dev/null
+++ 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;
+}*/
${data.name}
+Temperature: ${Math.round(data.main.temp - 273.15)}°C
+Description: ${data.weather[0].description}
+