This is a weather app project using Vanilla JS. It was the final project for SheCodes Plus, an eight-week course teaching HTML/CSS, JavaScript, and how to fetch live data from API. The requirements for this project was to create a weather forecast using live data.
- HTML/CSS
- JavaScript
- VS Code
- Netlify
- Axios
The project first opens to display the current temperature and weather conditions in the initial city (Brisbane, Australia). The date and time listed, however, is set to the user's current location.
The weather app displays a search bar at the top with a submit button. Underneath lists the city name, current date and time, and weather condition (e.g., sunny, broken clouds).
Below this info, the temperature in Celsius will be displayed for the specified city as well as an image showing the weather condition (in a specific color depending on whether it is night or day in the location) and a high/low temperature range, humidity percentage, and wind speed (in km/h). The current temperature can be changed between Celsius and Fahrenheit. However, the other information is set in metric.
At the bottom of the weather app will be a fove-day forecast with the high/low temperature range and weather conditions. This range will only display in Celsius.
I started by outlining the layout of the weather app. I wanted to challenge myself so I chose to code a different layout to the tutorial in the SheCodes online workshop.
After selecting a layout design, I coded the main HTML with the understanding that I would make adjustments as needed. Then I started to add my CSS into the project, making further adjustments for UX such as color schemes and accessibility.
After I was mostly happy with the design, I started to add JS to make it interactive and fetch live data. This was the biggest struggle for me in the project, as many of the teachings were new to me. I ended up starting from scratch during the final week of the course to give myself more opportunity to practice implementing the JS.
In this project, I learned many new things. In deciding on a different layout, I learned how to problem-solve and find other solutions because I didn't have a template file to reference and determine where mine differed.
I also learned just how powerful JS can be and how important it is to write clean/DRY code because the number of lines of code can add up very quickly and easily become confusing.
I also paid particular attention to UX design and feel I have a better understand of it after completing this project. More on this in the "Improvements" section.
These are some of the improvements I would like to work on next time:
- UX design - I would change the font family and size and the image size. I would also reduce the spacing between the sections to accommodate these changes.
- Comments - I would add comments throughout (particularly in JS) to make reviewing and laying out the code easier to read for myself and anyone else reading the code.
- As my skills grow, I would like to have the option of changing all temperature information to Fahrenheit. At the moment, only the current temperature can switch between Celsius and Fahrenheit.
Background image sourced from Eberhard Grossgasteiger.
Vanilla Weather App