Onlne Color Palette

Easily find the color Palette you're looking for.

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size.
• See hover states for all interactive elements on the page.
• Create your own color palette

Links

• Project homepage
• GitHub repository
• Issues
• Pull requests
• My other projects

My process

Built with:

• Semantic HTML
• Tailwind CSS - Styling
• Vue.js - JavaScript framework

I learned how to:

• How to fully customize a scrollbar with scroll up/down arrows.
• How to filter a list of items based on the searched keywords.
• How to make a dynamic layout when the height of non-sibling, non-statically-positioned elements changes, using the useElementSize utility function from VueUse library.
• How to leverage AutoAnimate for implementing animations.
• How to use the datalist element to create a select list.
• How to work with the Setup Syntax in a Pinia store.

Development setup

1. First, you need to clone the project:

git clone https://github.com/zahrahasti/palette.git

Alternatively, you can copy the source of the project directly to your local environment using Degit:

pnpm i -g degit

degit https://github.com/zahrahasti/palette new-project-folder

2. Then, install required packages:

pnpm i

3. Finally, run the dev script to start the dev server and locally preview the project in development mode:

pnpm run dev

Deployment and production

Before deploying the project or creating a new pull request, run the following commands and make sure there are no errors:

pnpm run format

pnpm run build

Also, to ensure that everything is as expected, you can run the preview command to locally preview the project in production mode:

pnpm run preview

Style Guide

If you want to develop this project, please stick to these rules:

Contribution

Your contribution is always welcome, please follow these steps:

back to top ⬆️