ToolSet is a collection of online web development tools implemented using vanilla JavaScript, CSS, HTML, and powered by Vite. This repository serves as a comprehensive toolkit for developers, offering a range of handy utilities to streamline various aspects of web development.
- JavaScript: The core logic of each tool is implemented using plain JavaScript, ensuring simplicity and performance.
- CSS: Styling is crafted with CSS to provide a clean and visually appealing interface for users.
- HTML: The structure of each tool is built using HTML, promoting accessibility and ease of use.
- Vite: ToolSet is powered by Vite, a fast and efficient web development build tool that enhances the development experience.
- CSS Background Image Generator: Simplifies the process of creating customized background images for websites by providing a user-friendly interface to adjust settings and generate corresponding CSS code.
- HTML Button Generator: Creates custom buttons visually. You can pick styles, colors, and sizes, and the tool generates the HTML and CSS code for easy use in web projects.
- CSS Box Shadow Generator: Lets you visually design and customize box shadows for webpage elements. It provides options to adjust shadow properties like color, size, and position, instantly generating the necessary CSS code for easy copy-pasting into your website.
- CSS Gradient Generator: Simplifies creating color blends for web design. You can visually select colors, style (linear or radial), direction, and other parameters.
- HTML Table Generator: Simplifies the creation of HTML tables by offering a user-friendly interface for designing tables visually.
- HTML Input Generator: Simplifies the creation of input elements for web forms. You can customize attributes like type, name, and placeholder, and the tool instantly generates the corresponding HTML code.
- CSS Flexbox Generator: A tool that visually creates flexible layouts. You can adjust settings like flex direction and alignment, and the tool generates corresponding CSS code for easy implementation in web projects.
- Code Image Generator: Converts programming code into image files, like PNG or JPEG, making it easier to share visually in documentation or presentations. You can customize aspects such as syntax highlighting and formatting for better aesthetics.
- Chart Generator: A web tool that quickly creates charts and graphs from user-inputted data. It offers customization options and you can download or share the generated charts for presentations or reports.
- Resume Builder: A user-friendly web tool that helps create professional resumes quickly. Users can choose templates, customize sections, and the tool auto-formats content for a polished look.
To run ToolSet locally, follow these steps:
-
Clone the repository:
git clone https://github.com/diaskalana/ToolSet.git
-
Navigate to the project directory:
cd ToolSet
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
If you have additional tools or improvements to existing ones, feel free to contribute! Fork the repository, make your changes, and submit a pull request. Your contributions are highly valued.