Cool Visual Components

This repository acts as a gallery that stores visual components like loadbards, cursors etc. for everyone to use Feel free to contribute !

Here is the Gallery if you want to check what is already done.

Table of contents:

• Introduction
• Getting started
• Documentation
• Contributing
• Changelog
• License
• Thanks

Introduction :pizza:

All this comes from a school project. I needed an idea for an open source project so i did this repository.

It will serve as a gallery for visual components people may use later. Since it's a gallery you can also show how talented and creative you are !

Getting started :airplane:

Install cool-visual-components using your favorite package manager

# using npm
npm install cool-visual-components

# using Yarn
yarn add cool-visual-components

# using pnpm
pnpm add cool-visual-components

# using Bun
bun add cool-visual-components

Once done head to your main html file (probably index.html), and add this

<div id="yourID"></div></td>

Then require the package in your the js file you're using with your html

import { Circle } from "cool-visual-components"; //import the package
import "cool-visual-components/dist/lib/cool-visual-components.css"; //import the style

let myVar = new Circle(document.getElementById("yourID"));
myVar.draw();
myVar.changeLiquidColorOnPercentage(50);

And you're done !

You can also check the doc for other components here

Documentation :green_book:

As featured in the contributing file, the documentation will evolve with the components added to it. Check the doc here

Contributing :hammer:

Use Github issues for any requests.

Pull requests are welcomed, learn how to contribute.

Changelog :pager:

Changes are tracked as Github releases.

License :scroll:

This project is MIT-licensed.

Thanks :blue_heart:

Alban Crepel for the introduction to the Open Source world.

Jérémy Laurent for his support and ideas.

Benjamin Marques for his help during the coding phase

Contact :telephone_receiver:

Bruno Alves Carvalho - My Discord - [email protected]