A multi-select dropdown with search and autosuggestions that filter through project cards.
Project-filter was originally made to showcase portfolio projects. It uses a simple search bar/multi-select dropdown to filter relevant projects using tags. The multi-select function is not mutually exclusive (projects must contain all selected tags in order to be displayed).
Website demo: jasmineirada.com/project-filter
This project was generated with Angular CLI version 11.0.5, and styled with Bootstrap version 4.5.2.
Follow this link for instructions on how to install Angular. Angular is required to run and build this project.
There are two Angular components: filter and project-preview. CSS Files can be edited to suit user's preferred design.
Filter: Handles the searching and selection, and displays the selected tags and dropdown
options.
Project-preview: Displays project information such as tags and title. Links to project website in
another tab.
App: Contains both filter and project components. Receives event trigger to display
projects based on filtered skill tags.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
- Free to use, open-source, fully customizable
- Mobile-first responsive design, working across multiple browsers and devices
- Simple and user-friendly interface
- Allows for multiple (non-mutually exclusive) selection
- Gives auto-suggestions with each key-press
- Can use keyboard keys:
- arrow keys to navigate options
- backspace to delete last selected tag
- enter/return key to submit search input
- Alert message animation for searched items not found
- Clear All button
To be added:
- Auto-complete
- Option to minimize all tags (only showing first X number of tags when there are several selections.)
- More subtle feedback animations
- Themes (different color palettes)
To do:
- Publish project as an NPM package
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
- Jasmine Irada - Initial work - airada
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details