@warnick/forecast-js
Advanced tools
A small weather app using data from the National Weather Service (NWS)
Using Vue for data binding this app provides both current data, forecast predictions, and weather map for a ZIP code in the United States. The data is obtained from the National Weather Service (NWS) which is supported through federal taxes dollars. This library is markup agnostic and simply provides an object you can inject into your design.
Use the NPM package manager to install forecast-js. For ----
npm install --save @warnick/forecast-js
Simply, include the CDN links in the head of your HTML. (See above for typical use).
<script
src="https://unpkg.com/@warnick/forecast-js/dist/js/forecast.min.js"
defer
></script>
<link
rel="stylesheet"
href="https://unpkg.com/@warnick/forecast-js/dist/css/forecast.css"
/>
Before you begin there are a few things you need.
Import the library into the head of your index.html file.
<script
src="https://unpkg.com/@warnick/forecast-js/dist/js/forecast.min.js"
defer
></script>
<link
rel="stylesheet"
href="https://unpkg.com/@warnick/forecast-js/dist/css/forecast.css"
/>
<link rel="stylesheet" href="/style.css" />
In the body of your HTML, everything should be within a <div class="results" id="app">
<body>
<div class="results" id="app" data-default-zip="90210"></div>
</body>
Additionally, you can set the default zip here with the data attribute 'data-default-zip'.
To trigger the fetching of data you will need to use the input for ZIP code.
<input
placeholder="Enter Your ZIP Code"
v-on:input="zip_trigger"
name="name"
id="zip"
/>
There are six main categories of information: location, time, alerts, current, hourly, and forecast. Within each of these there are a myriad of pieces of data you can implement into your application.
This is based on the Zip Code entered in the input or retrieved from a browser cookie. This object contains:
| Icon | Code | Description |
|---|---|---|
 | skc | Clear Sky |
 | few | Few Clouds |
 | sct | Scattered Clouds |
 | bkn | Broken Clouds |
 | rain_showers | Rain Showers |
 | rain | Rain |
 | tsra | Thunderstorm |
 | snow | Snow |
 | fog | Fog, Haze, Smoke, Dust |
| Icon Code | Description |
|---|---|
| skc | Fair/clear |
| wind_skc | Fair/clear and windy |
| hot | Hot |
| Icon Code | Description |
|---|---|
| few | A few clouds |
| sct | Partly cloudy |
| bkn | Mostly cloudy |
| ovc | Overcast |
| wind_few | A few clouds and windy |
| wind_sct | Partly cloudy and windy |
| wind_bkn | Mostly cloudy and windy |
| wind_ovc | Overcast and windy |
| Icon Code | Description |
|---|---|
| rain | Rain |
| rain_showers_hi | Rain showers (high cloud cover) |
| rain_showers | Rain showers (low cloud cover) |
| Icon Code | Description |
|---|---|
| tsra | Thunderstorm (high cloud cover) |
| tsra_sct | Thunderstorm (medium cloud cover) |
| tsra_hi | Thunderstorm (low cloud cover) |
| tornado | Tornado |
| hurricane | Hurricane conditions |
| tropical_storm | Tropical storm conditions |
| Icon Code | Description |
|---|---|
| snow | Snow |
| rain_snow | Rain/snow |
| rain_sleet | Rain/sleet |
| snow_sleet | Snow/sleet |
| fzra | Freezing rain |
| rain_fzra | Rain/freezing rain |
| snow_fzra | Freezing rain/snow |
| sleet | Sleet |
| blizzard | Blizzard |
| cold | Cold |
| Icon Code | Description |
|---|---|
| fog | Fog/mist |
| haze | Haze |
| smoke | Smoke |
| dust | Dust |
Mixed Content Fetch in Hourly and Forecast
ZIP code look up is now handled with openstreemaps
Issue with ZIP codes starting with 0
Added the city under the location object
Set default ZIP code with a data attribute:
<body>
<div class="results" id="app" data-default-zip="90210"></div>
</body>
Added Air Quality object under Current.
{
"name": "PM2.5",
"aqi": 50,
"range": 1,
"discription": "Good",
"details": [
{
"name": "PM2.5",
"aqi": 50,
"range": 1,
"discription": "Good"
},
{
"name": "O3",
"aqi": 35,
"range": 1,
"discription": "Good"
}
]
}
removed the city variable replaced with location.city
Moon has changed from .moon to be an object .moon.class is slug (i.e. "waxing-crescent-moon") and .moon.name is human readable (i.e. "Waxing Crescent Moon") this breaks past uses of moon
Update js-cookie to 3.0.1 Update rollup to 2.56.3 Update rollup-plugin-terser to 7.0.2 Update vue to 2.6.14 Update sunrise-sunset-js to 2.2.1
Expired dependancies: Removed @rollup/plugin-replace Removed dual-publish
Fetch for zip api now used {mode:'cors'}
weather.current.uv - UV index from the EPA's Envirofacts Data Service API
weather.current.air_quality - Air quality information from EPA's airnow.gov
Shifted all data to NWS
OpenWeatherMap and Weatherbit data
Removed map and moved it to version 3
current.uv [Hopefully will return in v3]
cuurrent.air_quality [Hopefully will return in v3]
forecast[i].wind_cdir_full
forecast[i].dewpt
forecast[i].vis
forecast[i].pop
forecast[i].precip
forecast[i].snow
forecast[i].pres
Time is now localized to the time at the zip code
Updated Readme
Fixed Mixed content (http/https)
Working map using OpenLayers
Expired dependancies
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
This project is licensed under the MIT License
FAQs
Weather data using vue.js
The npm package @warnick/forecast-js receives a total of 1 weekly downloads. As such, @warnick/forecast-js popularity was classified as not popular.
We found that @warnick/forecast-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.