Paste either snippet into your page — a Custom HTML block on WordPress, Shopify, or Squarespace works too. Both snippets update live as you customize, so what you copy is exactly what you configured.
<!-- Free Weather Widget widget by haynes lab — https://hayneslab.dev/tools/widgets/weather-widget -->
<script data-hl-lat="35.2271" data-hl-lon="-80.8431" data-hl-label="Charlotte, NC">
/*!
* haynes lab — Weather Widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/weather-widget
*/
(function () {
'use strict';
var PREFIX = 'hlw-weather-widget';
var STYLE_ID = 'hlw-weather-widget-styles';
var API_URL = 'https://api.open-meteo.com/v1/forecast';
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/weather-widget.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { position: relative; max-width: 320px; margin: 0 auto; padding: 20px 22px 26px;' +
' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
' font-size: 16px; line-height: 1.5; color: #1f2937; background: #ffffff;' +
' border: 1px solid #e5e7eb; border-radius: 12px; }' +
'.' + PREFIX + '__label { font-size: 14px; font-weight: 600; color: #6b7280; margin-bottom: 6px; }' +
'.' + PREFIX + '__main { display: flex; align-items: center; gap: 14px; }' +
'.' + PREFIX + '__emoji { font-size: 44px; line-height: 1; }' +
'.' + PREFIX + '__temp { font-size: 40px; font-weight: 700; line-height: 1; color: #111827; }' +
'.' + PREFIX + '__condition { font-size: 15px; color: #374151; margin-top: 8px; }' +
'.' + PREFIX + '__meta { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px;' +
' border-top: 1px solid #f3f4f6; font-size: 13px; color: #6b7280; }' +
'.' + PREFIX + '__status { padding: 8px 0; font-size: 14px; color: #6b7280; text-align: center; }' +
'.' + PREFIX + '__status--error { color: #b91c1c; }' +
'.' + PREFIX + '__credit { position: absolute; right: 10px; bottom: 6px; font-size: 11px;' +
' display: inline-flex; align-items: center; gap: 4px; color: #9ca3af; text-decoration: none; }' +
'.' + PREFIX + '__credit svg { display: block; }' +
'.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
function el(tag, className, text) {
var node = document.createElement(tag);
if (className) node.className = className;
if (text != null) node.textContent = text;
return node;
}
function logoSvg() {
var svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 32 32');
svg.setAttribute('width', '13');
svg.setAttribute('height', '13');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
function circle(cx, cy, r, attrs) {
var c = document.createElementNS(svgNS, 'circle');
c.setAttribute('cx', cx);
c.setAttribute('cy', cy);
c.setAttribute('r', r);
for (var key in attrs) c.setAttribute(key, attrs[key]);
svg.appendChild(c);
}
circle(16, 16, 16, { fill: '#0f0a0a' });
circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
circle(16, 16, 3, { fill: '#06b6d4' });
circle(24.5, 7.5, 2, { fill: '#f97316' });
circle(7, 16, 1.8, { fill: '#f97316' });
circle(20, 20, 1.5, { fill: '#f97316' });
return svg;
}
// WMO weather interpretation codes -> [text, emoji]
var CONDITIONS = {
0: ['Clear sky', '☀️'],
1: ['Mainly clear', '🌤️'],
2: ['Partly cloudy', '⛅'],
3: ['Overcast', '☁️'],
45: ['Fog', '🌫️'],
48: ['Rime fog', '🌫️'],
51: ['Light drizzle', '🌦️'],
53: ['Drizzle', '🌦️'],
55: ['Heavy drizzle', '🌧️'],
56: ['Freezing drizzle', '🌧️'],
57: ['Freezing drizzle', '🌧️'],
61: ['Light rain', '🌦️'],
63: ['Rain', '🌧️'],
65: ['Heavy rain', '🌧️'],
66: ['Freezing rain', '🌧️'],
67: ['Freezing rain', '🌧️'],
71: ['Light snow', '🌨️'],
73: ['Snow', '❄️'],
75: ['Heavy snow', '❄️'],
77: ['Snow grains', '❄️'],
80: ['Light showers', '🌦️'],
81: ['Showers', '🌧️'],
82: ['Heavy showers', '🌧️'],
85: ['Snow showers', '🌨️'],
86: ['Snow showers', '🌨️'],
95: ['Thunderstorm', '⛈️'],
96: ['Thunderstorm, hail', '⛈️'],
99: ['Thunderstorm, hail', '⛈️']
};
function conditionFor(code) {
return CONDITIONS[code] || ['Unknown', '🌡️'];
}
function build(script) {
var lat = script.getAttribute('data-hl-lat');
var lon = script.getAttribute('data-hl-lon');
injectStyles();
var root = el('div', PREFIX);
root.setAttribute('role', 'region');
root.setAttribute('aria-label', 'Current weather');
var status = el('div', PREFIX + '__status');
root.appendChild(status);
function showError(message) {
status.className = PREFIX + '__status ' + PREFIX + '__status--error';
status.textContent = message;
root.setAttribute('aria-label', 'Weather unavailable');
}
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/weather-widget';
credit.target = '_blank';
credit.rel = 'noopener';
root.appendChild(credit);
if (script.parentNode && script.parentNode.nodeName !== 'HEAD') {
script.insertAdjacentElement('afterend', root);
} else {
document.body.appendChild(root);
}
if (!lat || !lon || isNaN(parseFloat(lat)) || isNaN(parseFloat(lon))) {
console.warn('[haynes lab weather-widget] data-hl-lat and data-hl-lon (numbers) are required.');
showError('Location not configured.');
return;
}
var units = script.getAttribute('data-hl-units') === 'metric' ? 'metric' : 'imperial';
var label = script.getAttribute('data-hl-label') || '';
var tempUnit = units === 'metric' ? 'celsius' : 'fahrenheit';
var windUnit = units === 'metric' ? 'kmh' : 'mph';
status.textContent = 'Loading weather…';
var url = API_URL +
'?latitude=' + encodeURIComponent(lat) +
'&longitude=' + encodeURIComponent(lon) +
'¤t=temperature_2m,weather_code,wind_speed_10m' +
'&temperature_unit=' + tempUnit +
'&wind_speed_unit=' + windUnit;
fetch(url).then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.json();
}).then(function (data) {
var cur = data && data.current;
if (!cur || typeof cur.temperature_2m !== 'number') {
throw new Error('Unexpected API response');
}
var cond = conditionFor(cur.weather_code);
var tempSuffix = units === 'metric' ? '°C' : '°F';
var windSuffix = units === 'metric' ? 'km/h' : 'mph';
root.removeChild(status);
if (label) root.appendChild(el('div', PREFIX + '__label', label));
var main = el('div', PREFIX + '__main');
var emoji = el('span', PREFIX + '__emoji', cond[1]);
emoji.setAttribute('aria-hidden', 'true');
main.appendChild(emoji);
main.appendChild(el('div', PREFIX + '__temp',
Math.round(cur.temperature_2m) + tempSuffix));
root.appendChild(main);
root.appendChild(el('div', PREFIX + '__condition', cond[0]));
var meta = el('div', PREFIX + '__meta');
if (typeof cur.wind_speed_10m === 'number') {
meta.appendChild(el('span', null,
'💨 Wind ' + Math.round(cur.wind_speed_10m) + ' ' + windSuffix));
}
root.appendChild(meta);
root.setAttribute('aria-label',
'Current weather' + (label ? ' in ' + label : '') + ': ' +
Math.round(cur.temperature_2m) + tempSuffix + ', ' + cond[0]);
}).catch(function (err) {
console.warn('[haynes lab weather-widget] Could not load weather data.', err);
showError('Weather unavailable right now.');
});
}
function init() {
var script = findScript();
if (!script) {
console.warn('[haynes lab weather-widget] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>