Reflections: Javascript Portfolio Project

Why did I choose to develop a weather app?

The learning objectives of my first Javascript project were:

• Design and architect features across frontend and backend
• Communicate and collaborate in a technical environment
• Integrate JavaScript and 3rd Party APIs
• Debug issues in small- to medium-sized projects
• Build and iterate on a project MVP

I chose to create a web app to predict the weather live from the user’s current location as well as have a search feature to query other cities around the world. I chose to build this app as it will likely be relatable and useful to most people.

Why did I use the OpenWeather API?

I chose the OpenWeather API to integrate my app with for the following key reasons:

• The third party API is one of the leading weather APPs and used by millions of developers.
• It claims to be the most accurate for over 200,000 cities.
• It provides comprehensive API documentation and a moderate amount of developer support on internet forums.
• Data is available in JSON format, which has become the most popular data format over XML for Javascript.
• Free of charge for project and learning purposes.

Design

I strived to keep the design and features of the weather app minimalistic and easy to use to enhance user experience. To improve functionality, I integrated city search functionality adjacent to the dropdown menu with pre-set popular cities.

HTML

From a HTML layout perspective, I incorporated a vanilla HTML structured in a way of the majority of simple websites. I added a simple navigator bar so users are able to learn more about me, as well as directly contact me via email.

Uniquely, I used the in-built HTML Geolocation API to locate the user’s geographic location that can be enabled by popular browsers. The API specifically retrieves the longitude and latitude co-ordinates in real-time. It is important to note that to protect the user’s privacy, the position is not available unless the user approves it.

CSS

I used Grid CSS tools to create a simple 3 column grid layout, to enhance the visual alignment of the containers used in the app.

I incorporated CSS code from using Glassmorphism CSS Generator to create the “frosted class” aesthetic. The effect is based on manipulating background blur and transparency.

In addition, I used the CSS Gradient Generator to generate code for a gradient background on the initial landing page, where there is no background image for the user’s retrieved location. The main reason for this is it will be technically very challenging to retrieve the appropriate background image for the user’s city, given that the API has over 200,000. Hence, city background images were also incorporated with pre-set popular cities.

To improve the user experience, I added a hover feature over the navigator bar.

Javascript

The key skills required for the Javascript code for this weather app included:

• Using the in-built fetch() API to asynchronously retrieve JSON formatted data from the third party API.
• Using Javascript’s built-in Date methods to work with dates and days for current temperature and 7 day forecasting. It is important to note that the first day of the week (0) means “Sunday”, even though most people would consider it as Sunday.
• Manipulating DOM and using Event Listeners to handle user events. Event listeners were used for keys pressed and change in the dropdown menu.
• Conditional statements in particular if and else, as well as a switch statement. A switch statement was used to improve readability of the syntax due to multiple city conditions.
• Manipulating more complicated arrays within JSON formatted data from the third party API to retrieve specific weather data required for the app.
• Functions were frequently used to define blocks of code associated with specific tasks as well as to minimise code replication.

Challenges

As with all software development projects, there were various technical problems to make the app work. These notably included:

• Text alignment and spacing issues associated with the 7 day weather forecasting. Various methods were considered and experimented with including the CSS Grid module and table formats. However I discovered that the most efficient workaround to make it visually appropriate was simply using the “word-spacing” CSS property.
• There was a strange glitch in retrieving classes using JavaScript’s Document method from the HTML file, which remains continually unexplainable. The workaround was incorporating a section id to resolve this issue.
• Understanding the third party API documentation and calling the API’s arrays to retrieve specific data was challenging. It required applying console logging skills to eventually establish how to access the correct values using the correct index number.
• Retrieving days of the week for 7 day forecast was also considerably challenging task applying Javascript’s in-built date method. It was eventually resolved with a long-winded workaround and it apparently, there is a more eloquent way of solving this problem with more sophisticated algorithms. I will explore this in the future as my Javascript coding skills further improve.
• Adapting the geolocation feature from W3Schools example to make it work in my weather app as rather challenging. It required further research and understanding of call-back functions, where the function is passed as an argument to another function, and only executed after the other function has finished executing.

View the completed project here on GitHub: https://barrynguyen8.github.io/bn-repository/JS-Project/Beta/