Make a list of food items that look like this
Images and styling are all provided for you. You only need to add the HTML with the right class names or ids and the appropriate Javascript.
- A
<ul>
element with the id#food-list
- Import the items from
food.js
- Loop through the food items and create an
<li>
element for each item - Each
<li>
element should have the following:- An
<img>
pointing to the asociated image in the assets folder (the path for the image is in theimg
attribute of the food item) - A span with the class
food-name
containing thename
attribute of the food item
<li class="food-item"> <img src="./assets/apple.png"> <span class="food-name">apple</span> </li>
- An
- Loading the data and displaying the list should happen on load -- no specific events to listen for