LIGHTNESS

Unleash vibrant colors, ignite your creativity effortlessly.

Built with the tools and technologies:

📄 Table of Contents

• Overview
• Getting Started
  • Prerequisites
  • Installation
  • Usage

✨ Overview

Why Lightness?

Color palette to explore the use of Vite, npm, and Netlify with JS modules. This project was developed using several external libraries, including color-convert and notyf.

• 🎨 Dynamic Color Generation: Transform hexadecimal inputs into HSL variations for a vibrant color palette.
• 🛠️ Efficient Project Setup: Simplified project management with a well-defined package.json and Vite integration.
• 📋 Clipboard Functionality: Easily copy color values to streamline your workflow and enhance productivity.
• 🌈 Interactive User Interface: A responsive UI that allows users to input color codes and visualize results instantly.
• ✨ Utility Functions: Built-in functions for color manipulation, making customization a breeze.

📑 Project Index

LIGHTNESS/

__root__

⦿ __root__

File Name	Summary
package.json	- Defines the project configuration and dependencies for the challenge17_lightness application, facilitating the development and build processes - It integrates essential tools like Vite for efficient asset bundling and includes dependencies for color conversion and notifications - This setup streamlines project management, ensuring a smooth workflow for developers while providing a foundation for building and previewing the application.
LICENSE	- MIT License grants users the freedom to use, copy, modify, and distribute the software, ensuring that the project remains open and accessible - It establishes the legal framework that protects both the author and users, promoting collaboration and innovation within the codebase - This license underpins the projects commitment to transparency and community engagement, allowing for broad adoption and contribution.
vite.config.js	- Configures the Vite build tool for the project, establishing the source directory and defining the output settings - By setting the root to src and specifying the output directory as dist, it ensures a streamlined build process that targets modern JavaScript standards - Additionally, it maintains a clean output environment by emptying the directory before each build, enhancing overall project organization and efficiency.

src

⦿ src

File Name	Summary
index.html	- Serves as the foundational HTML structure for the Challenge 17-Color Generator project, establishing a user interface that allows users to input color codes - It integrates essential metadata for responsiveness and compatibility, links to a stylesheet for visual styling, and defers the loading of a JavaScript module to enhance functionality - This setup facilitates an interactive experience centered around color generation.
app.js	- Transforms hexadecimal color inputs into HSL variations, enabling users to generate and visualize a color palette - It validates user input, displays the corresponding colors dynamically, and updates the background with a gradient based on the generated palette - Additionally, it facilitates copying color values to the clipboard while providing user feedback through notifications, enhancing the overall user experience within the application.

modules

⦿ src.modules

File Name	Summary
utils.js	- Provides utility functions for color manipulation within the project - It transforms hexadecimal color values into HSL arrays with varying luminosity, enabling dynamic color adjustments - Additionally, it facilitates the customization of shadow colors in the application by applying HSL values directly to CSS variables, enhancing the visual design and user experience across the codebase.
color.js	- Color module facilitates the creation and display of color elements based on HSL values - It converts HSL to hexadecimal format, generates a visual representation with appropriate text color for readability, and appends the color element to a specified parent element - This enhances the user interface by dynamically showcasing colors while minimizing the header for a cleaner layout.

🚀 Getting Started

📋 Prerequisites

This project requires the following dependencies:

• Programming Language: JavaScript
• Package Manager: Npm

⚙️ Installation

Build lightness from the source and intsall dependencies:

1. Clone the repository:

   ❯ git clone https://github.com/d-vale/lightness

2. Navigate to the project directory:

   ❯ cd lightness

3. Install the dependencies:

Using npm:

❯ npm install

💻 Usage

Run the project with:

Using npm:

npm run dev

⬆ Return