Horned Animals is a react application that displays images and information of various horned animals. Users will be able to filter the images based on the number of horns and select their favorite image.
Kyle Cordell
- View a collection of images and information of horned animals.
- Filter images based on the number of horns.
- Select and mark favorite images.
- JavaScript
- Vite
- React ##Installation
- Make sure you have Node.js installed on your system.
- Clone this repository to your local machine.
- Open the terminal and navigate to the project's directory.
- Run the following command to install the dependencies:
npm install
##Getting Started
- After the installation is complete, start the development server with the following command:
npm run dev - Open your web browser and navigate to http://localhost:5173 to access the application.
########################################################## Number and name of feature: Feature #1: Display Images
Estimate of time needed to complete: 1 hr
Start time: 6:30 pm
Finish time: 7:00 pm
Actual time needed to complete: 30 min ########################################################## Number and name of feature: Feature #2: Allow Users to Favorite Individual Beasts
Estimate of time needed to complete: 1.5hr
Start time: 7:00 pm
Finish time: 7:30 pm
Actual time needed to complete: 30 min ########################################################## Number and name of feature: Feature 3: Bootstrap
Estimate of time needed to complete: 2.5hr
Start time: 7:30 pm
Finish time: 8:50 pm
Actual time needed to complete: 1.8 hr
References: https://stackoverflow.com/questions/35868756/how-to-make-bootstrap-cards-the-same-height-in-card-columns ########################################################## Number and name of feature: Stretch Goal: Add Interaction
Estimate of time needed to complete: 1.5hr
Start time: 7:45 pm
Finish time: 8:45 pm
Actual time needed to complete: 1 hr ########################################################## Number and name of feature: Feature #1: Display a Modal
Estimate of time needed to complete: 1 hr
Start time: 1:00 pm
Finish time: 2:00 pm
Actual time needed to complete: 1 hr ########################################################## Number and name of feature: Stretch Goal: Fuzzy search
Estimate of time needed to complete: 1 hr
Start time: 2:15 pm
Finish time: 4:15 pm
Actual time needed to complete: 2 hr
References: Utilized ChatGPT & regexr.com to build the pattern for the fuzzySearchPattern variable, however, the implementation of the input and filter was done entirely by me