- Write a script in the
index.js
file that will use the information ininfo.js
to display products. info.js
contains two HTML templates that should be used for the products as well as a list of products.- The double brackets
{{...}}
should be replaced with the corresponding product attribute.- Ex:
{{prod_name}}
should be replaced withTop 2
.
- Ex:
- There should be two separate elements displayed. One using
htmlTemplate1
and the other usinghtmlTemplate2
(both found ininfo.js
).- Both elements should contain 4 products.
- Exclude any products with the
"is_in_stock": "0"
value. - The products should be randomized with every page load.
- The first element should display products with the "top" product type only.
- The second element should display products that do not have the "top" product type.
- Style the elements to make them look presentable - add any flare you want.
- This should be done entirely with vanilla JavaScript
- This should be done programmatically.
- If the HTML was different, HTML had a different layout, products were in a different order, or new product attributes were added, the script should still function the same.
- Doing
template.replace('{{prod_name}}', 'Top 2')
does not count as adding a new product attribute would not work.