The app consist of a carousel of products and 3 filters: search, price range and types. All the 3 filters can be applied in different combinations together.
When the user clicks to an item in the carousel, there is a pop-up with item details and a link to the product page.
For the large screens, there is also a navigation bar implemented, so that the user can go through the collection using navigation dots.
JavaScript, CSS, HTML, Webpack, Babel, Eslint, Autoprefixer, Stylelint.
- Mobile version
- tablet version
- Responsive
- Slider functionality
- Item pop up
- Filter functionality
- Error message
- Clone the repo in your code editor
git clone https://github.com/david-lorenzo-vargas/vanilla-js-carousel.git - Install NPM packages
npm install - View the project in the browser:
npm run start
The carousel is built dynamically using JavaScript. The user can navigate using the next and previous arrows and in the desktop view, they can also use navigation dots under the carousel. When the length of the array of items is smaller than the viewport, both the arrows and navigation dots are desactivated.
There are 3 available filters: search, price range and product type. The filters search for matching criteria as the user types, so that no additional action/button click is required to start the search. Once the filter is cleared, the search criteria goes back to inital settings.
All the 3 filters can work both individually and together. This way the user can filter items in many different ways at the same time.
In case there are no items matching search criteria, a message is rendered in the carousel body. The message informs the user about the result and suggests to re-adjust the search.
For types options (drop-down menu), the options are taken dynamically from the array of urls provided using JS reduce function.
When a product item is clicked, a popup shows up with item details and a link to the product page. The user can close the popup both by clicking on the "close" button and by clicking outside of pop-up item (available in bigger viewports).
Autoprefixer has been used to make sure all CSS and JavaScript features are supported in major browsers.
The task is built Mobile first. Media queries and responsive design techniques (%, relative length units em and rem, displays flex and grid, etc.) are applied to make sure the app adjusts to all view ports.
Plain CSS
New Look Favicon added
In addition to current code of the task, I believe the following implementations would be beneficial:
- The data with an array of products can be fetched from an API rather that from a mock file.
- Additional testing with Jest could be implemented in order to check the logic of the filters and other utilities.