🎨 Color Palette Generator

The Color Palette Generator is a visually appealing and interactive web application that allows users to generate random color palettes with a single click. It provides a seamless experience for users to explore and copy the generated color codes to their clipboard.

🌟 Features

• Random Color Generation: Users can click the "Generate" button to create a new set of four random colors.
• Hex Code Display: Hovering over any of the generated colors displays the corresponding hexadecimal color code.
• Clipboard Integration: Clicking on the hexadecimal color code copies it to the user's clipboard, accompanied by a "Copied to Clipboard" toast notification.
• Responsive Design: The application is designed to work seamlessly on both desktop and mobile devices.

🚀 Live Demo

Check out the live demo: Color Palette Generator

📸 Screenshots

🛠️ Technologies Used

• HTML5: Provides the structure and content of the web page.
• Tailwind CSS: A utility-first CSS framework used for rapid UI development and styling.
• JavaScript (ES6+): Modern JavaScript for handling the logic and interactivity of the application.
• Clipboard API: A built-in JavaScript API used for copying text to the clipboard.
• Toastify.js: A lightweight and customizable toast notification library.

📚 Learnings

During the development of this project, I learned about the Clipboard API, a built-in JavaScript library that provides an easy way to copy text to the user's clipboard. The writeText() method of the Clipboard API was particularly useful for implementing the "Copy to Clipboard" functionality in this application.

📋 Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Node.js and npm (for local development)
• Basic understanding of HTML, CSS, and JavaScript

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository.
2. Clone the forked repository in your local machine.
3. Create your feature/bug branch (git checkout -b feature/AmazingFeature)
4. Add and commit your changes (git commit -m 'Add some AmazingFeature')
5. Push changes to the branch of your forked repository (git push origin feature/AmazingFeature)
6. Open a Pull Request in the main repository.

🐛 Bug Reporting

Found a bug? Please open an issue with a clear description and steps to reproduce. Your input helps make this project better for everyone!

⚙️ Code Architecture

project-root/
├── src                # Contains source code
    ├── index.html     # Main HTML structure
    ├── app.js         # Core JavaScript functionality
    ├── style.css      # Tailwind CSS styling
└── README.md          # Project documentation

🎯 Getting Started

1. Clone the repository:

   git clone https://github.com/VinayNoogler000/Color-Palette-Generator.git

2. Navigate to project directory:

   cd Color-Palette-Generator

3. Install all the Project's Dependencies:

   npm install

4. Start the Tailwind's build process to Build the CSS file:

   npx tailwindcss -i src/style.css -o dist/output.css --watch

5. Open index.html in your preferred browser & see the project working live.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Tailwind CSS for the styling framework.
• Toastify JS for the notification system, in the form of toast.

💼 Open for Career Opportunities

I'm currently open to new career opportunities, specifically in frontend web development roles. If you're interested in collaborating or have any job openings, please feel free to connect with me on LinkedIn, or Send an Email.

🗓️ What My Daily Life Looks Like?

As of now (latest version of this README file), I'm building Projects using Frontend Web Devleopment technologies to strengthen my fundamentals, also, learning Backend Web Development. This project/website is my 6th JavaScript project, more four projects are left (means, total 10 projects), in JS. After, that I will be building atleast 3-5 major Projects using React.js framework with Redux.js library, while learning Backend Web Development. At last, after Completing Frontend Development Projects, and Learning Backend Development, I'll be making atleast 3 Major Full-Stack Projects, using MERN tech-stack.

📞 Contact Developer & Owner

Vinay Tambey

• Email: Send Email to Vinay
• LinkedIn: Vinay Tambey
• GitHub: @VinayNoogler000
• Twitter/X: @VinayNoogler000

For any queries or suggestions, feel free to reach out through above mentioned links.

📊 Project Status

This project is, currently, not in development by the Owner, but we're always looking to add new features and improvements!

💼 Support

Give a ⭐️ if this project helped you!

---

Made with ❤️ by Vinay Tambey