Quick Start
Using custom-belt-lib npm
Try it Online
Coming soon.
Installation
sh
npm install -D custom-belt-libUp and running
Example index.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>White Belt</title>
</head>
<body>
<div id="whiteBelt" />
// this is where the belt will be rendered
<script type="module" src="/src/main.ts"></script>
</body>
</html>Example main.js and main.ts
js
// main.js
import { CustomBelt, getCustomBeltInit, getBeltPropsSolid } from 'custom-belt-lib';
const whiteBelt = getBeltPropsSolid('Solid White Belt', '#FFFFFF');
const myDiv = document.getElementById('whiteBelt');
const customBeltInit = getCustomBeltInit([myDiv], whiteBelt);
new CustomBelt(customBeltInit);ts
// main.ts
import {
BeltProps,
CustomBeltInit,
CustomBelt,
getCustomBeltInit,
getBeltPropsSolid
} from 'custom-belt-lib';
const whiteBelt: BeltProps[] = getBeltPropsSolid('Solid White Belt', '#FFFFFF');
const myDiv: HTMLElement = document.getElementById('whiteBelt') as HTMLElement;
const customBeltInit: CustomBeltInit = getCustomBeltInit([myDiv], whiteBelt);
new CustomBelt(customBeltInit);Output
The above code will produce the image below.