hebamak / makeup-store-api-app

Makeup store, API project

Makeup store app

• app demo on github: https://hebamak.github.io/Makeup-store-API-app/

• This app is a single page application has one index.html file, style.css file and many js files connected together to update the dom using DOM manipulation.

App Screenshots:

---

• This app interact with this API "https://makeup-api.herokuapp.com/api/v1/products.json"

and grab the data from it using fetch async and await

• The app has a loading img & message while data loading and error handling message if the API has an error, this interaction with the API showed to the user not just a console.log.

Loading msg:

Error msg:

• The products created in the Dom and distributed in pages of the pagination, each page will have 50 product like that:

• User can grab some data from API like product details brand , price, description, image ..etc like that:

• User can filter out the products fetched from API according to the product type, category and brand by clicking on each item of those in navbar, which also grabbed from API dynamically:

Results remove carousel and some ads and update the pagination to see the results in many pages as well like that:

• User also can search for a specific product by using the search input field and results remove carousel, some ads and update the pagination like that:

• User can get an error message when enters a name that data don't have, and also can go bach to the Home page

• When user clear the search field, the app reload and back to homepage again.

• The app is responsive for all screens.

• Bootstrap navbar and carousel are used.

• Ticker is a ready carousel uses jquery.

• Font-awesome are use as well.

• The app link on Netlify: https://makeup-store.netlify.app/

• I copied the app design from ICI PARIS XL store site https://www.iciparisxl.nl/?brd=&gclid=CjwKCAiA9qKbBhAzEiwAS4yeDXL0Tbc0XiJLCp9GwV2w79jIvO29VXYSSUgQmN4EuyzQnvNgNCBTWBoCGPEQAvD_BwE