This project involves creating a user-friendly interface that displays weather information of a selected city, including location, temperature, and wind speed. You&#x27;ll employ HTML to structure your content, CSS for styling to ensure an engaging user experience, and JavaScript to add interactivity, handling user inputs and updating data without needing to refresh the page.
This project is an excellent opportunity to solidify your understanding of web technologies fetch data from a production-ready API and produce a tool that can be used in everyday life. This project is a great chance to get hands-on, pulling data from a ready-to-use API, and creating something useful for daily life.

An interactive weather app that displays temperature, wind speed, and humidity

Welcome! In this exciting project, we&#x27;ll be creating a dynamic and interactive weather application using the trifecta of web development technologies: HTML, CSS, and vanilla JavaScript. This project will not only enhance your understanding of these languages but also provide you with a real-world application of your skills.
<h3>Project Overview:</h3>
Objective: Build a user-friendly weather app that fetches real-time weather data and presents it in a visually appealing and interactive manner.
<h3>Key Features:</h3>
<ol>
<li>User Input: Allow users to input the location for which they want to check the weather.</li>
<li>Real-Time Data: Utilize a weather API to fetch current weather information.</li>
<li>Visual Display: Present the weather information in a clear and visually pleasing format.</li>
<li>Interactive Design: Make the app interactive, allowing users to easily navigate and explore weather details.</li>
</ol>
<h3>Technology Stack</h3>
<ol>
<li>HTML: Structure the content and create a form for user input.</li>
<li>CSS: Style the app for a polished and professional appearance.</li>
<li>JavaScript: Implement the logic for fetching weather data, handling user input, and dynamically updating the UI.</li>
</ol>
<h4>Final Thoughts:</h4>
By the end of this project, you&#x27;ll have a fully functional weather app that not only showcases your web development skills but also serves as a valuable addition to your portfolio. Get ready to explore the world of web-based weather forecasting with hands-on coding and creative design!

Getting Started

Greetings, fellow coders!
In this step, your task is to craft the HTML and CSS for a weather app. Mastery of these foundational technologies is essential, as you&#x27;ll be showcasing your prowess in designing webpages. Take a moment to thoroughly understand the challenges presented before diving into implementation.
For your inspiration, we&#x27;ve provided a prototype that you can refer to:
<a href="https://65c84f135b0470de4c9f05b6--jazzy-paletas-910082.netlify.app/" target="_blank" rel="noopener nofollow noreferrer" class="text-blue-500 hover:underline">Weather App Prototype</a>
<blockquote>
Please note that the app does not work, as it lacks the API key to fetch the data from the API. You would be building this in the next steps of the project
</blockquote>
All the images required to build this app are present in <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">images</code> directory
Your mission is to bring the design of this website to life. Good luck, and may your coding journey be both enjoyable and rewarding!
Make sure to read the challenges tab of the project before diving into code, to clearly understand the required structure

Designing the app

We are going to use OpenWeather for getting weather updates. For this, you have to follow a few steps:
Step 1: Begin by creating your account or logging in on <a href="https://openweathermap.org/current" target="_blank" rel="noopener nofollow noreferrer" class="text-blue-500 hover:underline">OpenWeather</a>.
Step 2: Once you&#x27;re in, claim your API key from <a href="https://home.openweathermap.org/api_keys" target="_blank" rel="noopener nofollow noreferrer" class="text-blue-500 hover:underline">API Key</a>. This key will be your ticket to fetching data from the OpenWeather endpoints in future challenges.
Step 3: Take a peek at <a href="https://openweathermap.org/current" target="_blank" rel="noopener nofollow noreferrer" class="text-blue-500 hover:underline">API docs</a>. If it feels overwhelming, fear not! We&#x27;ll unravel the mysteries together in the challenges to come.
Step 4: Update the .env file in the root folder of your project with you weather API key. This step is important as this API key will be used for running tests on your project in following challenges.
Consider this challenge a friendly initiation into the realm of APIs, setting the stage for exciting projects ahead.
May your coding journey be as dynamic as the weather updates you&#x27;ll soon be mastering!

Setting up weather API

Fetching Data

Welcome to the last challenge of weather app. In this challenge, we will update the weather-icon based on the weather conditions of the city. All the required images are present in <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">images</code> directory.
Follow the following instructions:-
<ol>
<li>
Notice the json object we got in the last challenge. There is a property <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">data.weather[0].main</code> that represents the weather conditions of that city.
</li>
<li>
Initialize a variable named weatherImageSrc with the value <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&quot;./images/clouds.png&quot;</code>. This will serve as the default image.
</li>
<li>
Now, let&#x27;s add some conditional statements. If <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">data.weather[0].main</code> equals &quot;Clear,&quot; update <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">weatherImageSrc</code> to <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&quot;./images/clear.png&quot;</code>. You&#x27;ll do the same for &quot;Rain,&quot; &quot;Drizzle,&quot; and &quot;Mist.&quot;
</li>
<li>
Implement the conditions for each weather type. Change <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">weatherImageSrc</code> accordingly to match the specific weather conditions.
</li>
<li>
Finally, update the src attribute of your weather icon with the content of weatherImageSrc. This will dynamically change the icon based on the weather conditions.
</li>
</ol>
Congrats on reaching this point! 🌟 You&#x27;ve successfully tackled all the challenges in this project. I&#x27;m confident you&#x27;ll nail this one too. Best of luck, and I look forward to seeing you in the next exciting project!
Happy coding! 👩‍💻🚀

Weather App

Project Description

Get involved with the community

Ready? Start Building

Milestones