https://github.com/gangadhararaoande/Marmeto-Assignment.git
<marmeto-assignment-delta.vercel.app>
You can pick and submit any one of the below assignments. Don't use any libraries or frameworks like React, Tailwind, Bootstrap, or jQuery. Use only HTML, CSS and Javascript to complete the assignment. Publish/Deploy the task and provide us the published URL. Make a 5-minute video explaining the features you added to the assignment. You can use Loom to record it or record directly with a phone camera and upload it to Google Drive. Share the video link with public access. Submit the assignment & video using the below form: https://forms.ccbp.in/Marmeto_Assignment_Submission_Form
Create a product listing page
2 hours
Make an API call to a given API to fetch a list of products. Create two layouts, one for list view another one for grid view make use of flex and grid to switch between view on click of button. On input of search bar variants matching to the search key should get highlighted Implement media queries to adjust the layout for different screen sizes. Utilize async/await for asynchronous operations while handling API.
Assess the given figma design to understand requirements clearly
Use the Fetch API to make an API call to retrieve a list of product. Handle the asynchronous operation using async/await to fetch the data. API ENDPOINT(URL) : https://mocki.io/v1/0934df88-6bf7-41fd-9e59-4fb7b8758093
Create both product cards as per given design (Grid card and list card) That includes product title , image , badge , variants.
On input of the search bar anything that matches the key will be highlighted. Partial search should work.
Layout switch buttons will change the layout between grid and list
Do a testing for search and layout switch button
Clean up the code, refactor if necessary, and optimize performance.
APl - https://mocki.io/v1/0934df88-6bf7-41fd-9e59-4fb7b8758093
(or)
When we click on the categories below, the card will be shown based on the category name. Product badge are dynamic and coming from api response Product card image should come from API response product image. We need to show Product title, Vendor name, Price, Compare at price, then calculated discount in % off. Add to cart button is just a dummy button.
- Font family - Inter - https://fonts.google.com/specimen/Inter
- Product data API : https://cdn.shopify.com/s/files/1/0564/3685/0790/files/multiProduct.json
Note: This image is just for reference and also it is not cross.
- Create a tab switching layout.
- Create product card with following data Image Badge Product title Vendor Price Compare at price Calculate % off using JS. Create Add to cart button (Just a visual button)
When the user clicks on the "Men", "Women", or "Kids" tab, show the respective product cards and hide the others. Implement a mechanism to toggle between the tabs, updating the displayed product cards accordingly.
Use HTML, CSS, and JavaScript only to build the design Don't use any libraries or frameworks like React, Tailwind, Bootstrap, or jQuery. The webpage should be responsive across the devices.
