DEV Community

CourtneyKerr
CourtneyKerr

Posted on • Updated on

Single Page Weather App

These past two months have been very fun and challenging as I navigated through phase 1 of Flatiron's Software Engineering Program, and I believe I've come a long way on my path to becoming a developer.

To wrap up the beginning phase, we were tasked with developing a single page application using JavaScript, HTML, and CSS. Using either a public API or a db.json file, our application needed to have at least five objects with each object having at least three attributes. The app, of course, must run on a single page and only contain a single html file, as well as have at least three distinct event listeners and at least one instance of array iteration.

There were many ideas I found interesting, like creating a Pokedex or a mini game application, but I decided I felt most comfortable with the idea of making a weather app that gives the user a detailed description of the weather using their location.

The core features of this weather application would be the

The most difficult challenge for me personally, was finding a working API for my application. After scourging the internet and changing my idea for then a few times, I decided to use OpenWeatherMap's free public API for this project as they offered multiple reliable keys as soon as you make an account.

After some tedious planning, I knew what features I wanted to incorporate into this application.

For the three event listeners, I thought it would be most practical to implement simple features such as a search bar, an input option for the user to type the name of their location, as well as a button to click to provide further details.

Overall, the most challenging part of this project for me was definitely implementing the API as it was the most unfamiliar to me.

I'm thankful I got to practice more with CSS. Seeing the pictures and colors of the website change along the way and being able to design the page how I saw fit was where I had the most fun in this project.

Top comments (0)