Forcast-js NPM

Features

A small weather app using data from the National Weather Service (NWS), OpenWeatherMap, and Weatherbit.

Description

Using Vue for data binding this app provides both current data, forecast predictions, and weather map for a ZIP code in the United States. For your application to work properly you will need to sign-up and get an API key for OpenWeatherMap and Weatherbit. For Both of these services the library relies on the free level of API use. If your app become popular and you are making more than the allowed calls per day you will need to pay for each of these services.

This library is markup agnostic and simply provides an object you can inject into your design.

Usage

Prerequisite

Before you begin there are a few things you need.

First (API Keys)

Create a file in the root of your application called keys.js this file should contain your API keys:

var Keys = {
    openweathermap: "--------------------------------",
    weatherbit: "--------------------------------"
}

Replace the ----------- with your key for each of the services. And make sure Keys is capitalized.

Second (Load JS)

Import the library into the head of your index.html file.

<script src="keys.js"></script>
<script src="https://unpkg.com/@warnick/forecast-js/js/forecast.min.js" defer></script>
<link rel="stylesheet" href="https://unpkg.com/@warnick/forecast-js/css/forecast.css">
<link rel="stylesheet" href="/style.css">

Third (HTML Necessities)

In the body of your HTML, everything should be within a <div class="results" id="app">

<body>
  <div class="results" id="app">
    
  </div>
</body>

Installing

Weather Object

Icons

The following icons are based on the codes and descriptions used by OpenWeatherMap.

Icon	Code	Description
	01n	clear sky
	02n	few clouds
	03n	scattered clouds
	04n	broken clouds
	09n	shower rain
	10n	rain
	11n	thunderstorm
	13n	snow
	50n	mist

Exemples

Download & Installation

Using NPM

Use the NPM package manager to install forecast-js.

npm install --save @warnick/forecast-js

Using UNPKG

Simply, include the CDN links in the head of your HTML

<script src="https://unpkg.com/@warnick/forecast-js/js/forecast.min.js" defer></script>
<link rel="stylesheet" href="https://unpkg.com/@warnick/forecast-js/css/forecast.css">