Project 8: Weather Outlook Dashboard

Welcome to the Weather Outlook Dashboard! In this project, I have created a web application that allows users to view the weather forecast for cities of their choosing. I have made use of the OpenWeatherMap API to retrieve weather data for cities.

Table of Contents

• Introduction
• Technical Details
• Deployment
• Motivation and Learning
• Project Learning Objectives
• Resources
• Repository Quality

Introduction

Server APIs allow developers to access their data and functionality by making requests with specific parameters to a URL. This project builds a weather outlook dashboard that runs in the browser and features dynamically updated HTML and CSS. The dashboard will allow users to see the weather forecast for multiple cities, helping them plan their trips accordingly.

Technical Details

• The application uses the OpenWeatherMap API to retrieve weather data.
• LocalStorage is used to store persistent data.

Deployment

The Weather Dashboard Challenge is deployed at the following live URL:

Weather Outlook Dashboard Web Link

The GitHub repository for this project can be found at:

GitHub Repository

In order to use this webapp, you will need to

1. Create your own API key by visiting https://openweathermap.org/api
2. Create a config.js file in the asset/js folder
3. Save the API key in the below format

Example:

var config = {
	key: [YOUR_SECRET_API_KEY_GOES_HERE],
};

// ===== after placing your API key ===========
var config = {
	key: "14c5e5e260e3e3432d141deb7d150ec3",
};

Motivation and Learning

This project is an opportunity to apply the knowledge and skills acquired during week 8 of the course. It serves as a practical exercise to understand how to work with server APIs, retrieve and display data, and create a user-friendly web application. Additionally, this project encourages learning about data persistence using LocalStorage.

Project Learning Objectives

By the end of this project, I have been able to:

• Understand and utilize the concept and utility of APIs and JSON in web applications.
• Build endpoint URLs to a variety of APIs.
• Work with the OpenWeatherMap 5 Day Forecast API to retrieve weather data.
• Retrieve and process data from external APIs.
• Display current and future weather conditions for selected cities.
• Store and manage data using LocalStorage for a seamless user experience.
• Enhance my skills in front-end web development, including dynamic element generation and fetch calls.
• Create a real-world application that requires understanding different coding languages, concepts and functions.

Resources

• edX Boot Camps LLC (2022) Request-Response The Full Stack Blog
• Hillary Nyakundi (2021) How to Write a Good README File for Your GitHub Project
• Ondrej Polesny (2020) The Fetch API Cheatsheet: Nine of the Most Common API Requests
• Dillion Megida (2022) JavaScript Promises – The promise.then, promise.catch and promise.finally Methods Explained
• Dillion Megida (2020) Promises in Javascript
• Stephen James (2019) How to Hide your API keys from Github! (And why you should do it!)
• Pt. Prashant tripathi (2020) How to hide API KEY in GitHub repo
• Andrew Ayer (2023) git-crypt - transparent file encryption in git
• MDN Web Docs (n.d.) Glossary: Definitions of Web-related terms > Callback function
• MDN Web Docs (n.d.) References > JavaScript > Guide > Using promises -StackOverFlow (2018) Question: Using click events on dynamically added DOM elements
• StackOverFlow (2008) Event binding on dynamically created elements?
• jQuery (2023) Events > Understanding Event Delegation
• HTML5 data-* attributes
• jQuery .attr() method.
• Kingsley Ubah (2021) Fetch API – How to Make a GET Request and POST Request in JavaScript
• W3Schools (n.d.) jQuery References > jQuery HTML / CSS Methods > jQuery empty() Method
• Justin Gage (2023) What does Vercel do?
• JULIAN WALLIS (2022) What Is VERCEL? Is It The Right Platform For Front-End Developers?
• Technically (n.d.) LEARNING TRACKS: WORKING WITH DEVELOPERS
• jQuery (no date) Categories: Manipulation > DOM Removal > .empty() -JSON Formatter (2020) Parser, Formatter, Validator & Beautifier
• FadySamirSadek (2018) jQuery TodoMVC Example
• jQuery resource
• HTTP response status codes - HTTP | MDN
• How to avoid exposing your API key in your public front-end apps
• A better way to prepare for coding interviews.
• StackOverFlow (2011 modified 2021) Add line break to 'git commit -m' from the command line
• John Högberg (2023, revision June 12) Writing good commit messages
• OpenWeatherMap (n.d.) 5 day weather forecast
• OpenWeatherMap (n.d.) Geocoding API
• Shani Raja (2023) The Alchemy of Writing Podcast Episode 2: Blogging With Style in Toronto

Contributing

Coding and design completed by

Dairon Reijna 🎨💻

I welcome contributions from the community to enhance this Portfolio Project. By participating in this project, you will be contributing to a vibrant and inclusive environment. To ensure a positive experience the code of conduct we will adhere to is based on The Contributor Covenant. Please review and follow these guidelines when contributing.

Accessibility Testing

I aim to develop websites that are built mobile first, with accessibility in prime focus. I welcome feedback, and would ask that you test for accessibility. For further information please visit this page: Accessibility Testing and Inclusive Design.

License

This project is licensed under a MIT License.

---

© 2023 Dairon Reijna. Confidential and Proprietary. All Rights Reserved.