Giter VIP home page Giter VIP logo

weather-api-ts's Introduction

weather-api

GitHub language count GitHub top language GitHub commit activity

For FEW 2.1 (Advanced Javascript) at Make School. Assignment #3.

https://www.npmjs.com/package/weather-api-lib

Welcome

This WeatherAPI Project is a Neumorphic Dark-Mode Weather Website.

Built in Javascript ES6 and HTML, this repo operates with Open Weather Map API.

v1.1.4

Weather Library

scripts.js contains a library that could be used by anyone who wanted to use the OpenWeatherMap API in any project they might create. There are 3 functions built into this file. You are expected to provide your own API key from openweathermap.org. index.js and index.html are included for an example of operation. The variable apiKey can be inserted in line #19 of scripts.js or imported through a config.js which was not included and should be added into your .gitignore to prevent unauthorized access.

  1. getWeatherByZip() allows searching by zip code.
  • (params) are:
    • zip: A 5 digit USA based zip code
    • apiKey: You will need to input your own API Key for your project.
    • units: No entry will default to 'imperial', but options are 'metric' or 'kelvin')
  1. getWeatherByCity() allows searching by city name.
  • params are:
    • city: City Name
    • apiKey: Your API Key
    • units
  1. getWeatherByGeo() allows searching with Latitude & Longitude.
  • params are:
    • lat: Latitude
    • lon: Longitude
    • apiKey: Your API Key
    • units

All functions take input through a single input field and resolve to a promise that returns temperature, a short weather description, what the local weather feels like and the daily minimum and maximum temperature into HTML elements. The input field can differentiate between USA Zip code, City Name or Latitude/Longitude geo coordinates.

scripts.js is a self contained library for API calls.

index.js contains the scripts that allow index.html to function which is part of this repo but not necessary for your library.

Operation

fetch() resolves promises to set the temperature, description on elements in the DOM. The getWeatherX() functions are handled by a callback. A Promise simplifies and streamline the asynchronous code. async and await keywords are used with Promise to streamline the code. Additionally, the script.js file streamlines the 'openweatherorg' API's JSON data for better organization.

The getWeatherbyX() functions are automatically chosen within the catchAllWeather() function and resolved with If statements. This is done in a separate index.js file as the scripts.js library file only contains code for reusable API calls.

Run

$ Open project in live server to run in your browser.

$ npm install for dependencies.

Updates

  1. Moved scripts from HTML into a scripts.js file.
  2. Linted with ESLINT according to Airbnb's guidelines.
  3. Added README.md

Incoming Updates

  1. Automated geoLocation through browser.
  2. More methods for getWeatherByX()

weather-api-ts's People

Contributors

chrismlee26 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.