Overview

This application was built as an assignment for my advanced web development course at Oregon State University. It is built using React and uses the OpenWeather API to allow the user to search for cities and display the weather forecast based on their query. Additionally, there is a dark mode and light mode feature that the user can toggle between.

View Site

WeatherApp

My Roles

Web Development

Technology

React

CSS

JavaScript

Roles and Responsibilites

I completed this project on my own. I was responsible for collecting the user’s query, connecting to the API, displaying the response of that API, and displaying all this information in a clean, intuitive, user friendly way.

Tools Used

This application was developed using react from create-react-app. The site is styled using emotion. The weather information displayed comes from the OpenWeather API.

Learning Outcomes

The main objectives of this assignment were to be able to fetch data from an API, and to practice professional grade styling using emotion in React. Through this project I learned the most efficient ways to collect data from a user, query API, then use that response in a meaningful way. Additionally, I was able to learn a lot about styling in React. The “dark mode” and “light mode” toggle allowed me to practice conditional rendering of styling depending on the props applied to that component.