Weather widget for javascript applications
npm i jb-weather-widget
or
yarn add jb-weather-widget<!-- Import the module inside the document's body -->
<body>
<div id="app"></div>
<script type="module">
import { WeatherWidget } from "jb-weather-widget";
new WeatherWidget({
parentContainer: "app",
units: {
temperature: "celsius",
speed: "kmh",
},
remember: false,
refresh: 45,
});
</script>
</body>-
parentContaier (required)
Id of the parent container existing inside your DOM structure -
units
mesurement units, temperature (celsius - default, fahrenheit), speed (kmh - default, mph, kn, ms) -
remember
stores current choice inside local storage, default is false -
refresh
weather data refetch time in minutes, default is 60 -
defaultLocation
location data to load initially, defaults to a radom location from a fixed set of locations -
theme
custom theme to override the default one
const theme = {
color: {
font: {
main: "#fff",
timer: "#fff",
bottom: "#fff",
right: "#fff",
list: {
main: "#000",
hover: "#fff",
},
},
icon: {
main: "#e040fb",
right: "#e040fb",
bottom: "#e040fb",
},
},
bg: {
main: "#512da8",
right: "rgba(0,0,0,0.1)",
bottom: "rgba(0,0,0,0.1)",
list: {
main: "#FFF",
hover: "transparent",
border: "#ccc",
},
},
spacing: {
inner: "16px", // The width, height of gaps between inner elements
outer: "16px", // padding of the container's element
},
borderRadius: {
container: "8px", // you want 0 radius you have to put it explicitly, same below
element: "8px",
},
};