canriquez/my-weather-app

Weather Data Site using a weather API on Vanilla JavaScript

My Weather App

Dynamic Weather App. Built with JavaScript HTML/CSS and API services.

Project Details

The app uses information from the following main APIs:

• Openweathermap.org API for worldwide city weather information. You will need to create an account and generate a private API key.
• Cloudflare for Fetching client's current public IP.
• FreeGeoIp.app for Public IP to City & Country name service API. Initially I have used ipstack service, but since the free tier does not offer secure session connectivity, http fetch calls created 'mixed content' problems, and browsers would block this source. With FreeGEoIp I have fixed this issue.
• Unsplash for great weather images service API. You will need to create an account and generate a private API key.

live demo

live app @Netlify

Key design information

• The app uses myCity factory function to store key weather information and basic methods used to manage app logic sequences.
• All API services are managed using function collections hosted in specific files (components), exposed using the module pattern.
• applogic.js contains the main functions organizing the initial session weather search. #initSessionWeather() method would organize the module methods to get the user's IP (IPv6 / IPv4), coordinates, and a final query to the open weather map API to get the initial nearby city for the first weather readout. initCityQueryWeather() would organize an Adhoc query for a specific city.
• DisplayController module contains all functions to handle the screen renders.
• The Barometer Arrow uses a set of formulas to "translate" the weather description id openweathermap.org weather conditions codes into correspondent degrees used by the CSS transform property "rotate", to point to the right weather description icon.

            case (id >= 800 && id <= 804):
                return ((-8.249289925 * id * id) + (13208.61119 * id) - 5287208.395);
            case (id >= 701 && id <= 781):
                return ((-1.57282646E-3 * id * id) + (1.82322848 * id) - 465.3239501);
            case (id >= 200 && id <= 232):
                return ((2.079436717E-2 * id * id) + (-10.08168264 * id) + 1121.535281);
            case (id >= 300 && id <= 321):
                return ((-5.028726802E-2 * id * id) + (30.48646455 * id) - 4632.223787);
            case (id >= 500 && id <= 531):
                return ((1.112129237E-2 * id * id) + (-12.52634698 * id) + 3454.698266);
            case (id >= 600 && id <= 622):
                return ((-5.678032989E-2 * id * id) + (68.48273427 * id) - 20770.321);

• The details for these equations and the data source used for the calculations are hosted in the /src/docs folder.

User Story

• The user accesses the live link, and immediately the app fetches the current user IP and queries estimated nearby city weather. This initial information gets displayed on the weather dashboard from the start.

• The user can change the city by clicking/touching the city name displayed on the dashboard.

• If the new city name is found, the dashboard will render the current weather information.

• The barometer arrow (simil analogic arrow) and the wind arrow icon will turn pointing to the current weather description after a new city is searched and found.

• Temperature and Wind units will toggle between metric and imperial system, by clicking / touching the icon . The temperature units will toggle between Centigrades and Faranhaid on each click of the icon. The same will ocurr for wid speed between km/h and mph units.

Dashboard design inspiration:

• The User Interface design was inspired by Piotr Sliwa "Weather widget original design.

Background photography credits (Unsplash)

• The app sources random background pictures using the 'weather description' as a keyword for the picture theme.
• Each image is properly credited dynamically. Picture's creator username and portfolio link display at the bottom of the main app screen.

Built With

• HTML/CSS, Javascript, Webpack, NPM, yarn.
• ESlint, Stylelint
• VSCode

Getting Started

To get a local copy up and running, follow these simple example steps.

Prerequisites

• To install the app in your system, make sure you have node/npm installed. get npm

Setup

• Clone the repository in your system by using:

git clone

• The app uses the library "dotenv-webpack" to handle all secrets and API keys for every used service.
• After cloning the repo, create a file .env to include all the necesary api keys. Create the accounts in each service and complete the .env file as follows:

WEATHER_API_KEY =<add your API key>
UNS_API=<add your API key>

Install

• Next step is to CD into the local repository and run:

• npm install

• npm run build

Author

👤 Carlos Anriquez

• Github: @canriquez
• Twitter: @cranriquez
• Linkedin: linkedin
• Portfolio: carlosanriquez.com

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• Family, always my family.
• @Torres-ssf helping me out troubleshoot IPv6 Edge cases from Curitiba / Brasil! Thanks Sergio!
• The Beagles!

📝 License

This project is MIT licensed.

my-weather-app's Issues

Feedback from Beagles

We like the application.
Clifton: The best feature is the barometer arrow and the algorithmic solution.

• Add the C to F switch.
• Feature: Add the feature to query weather API using city ID (reworking cities Json File).
• Feature: Add additional AI to check random Unsplash image so dash contrast does not get messed up and is still visible.