Need help on table

JavaScript
1

Here is the link to codepen https://codepen.io/gigahood/pen/vvxbJq?editors=1010

As you can see if i going to have more and more entries, my js code will be very long and they seem to similar to each other. Is there a way to simplify this?

The Price section will be a constant (Different for each food), i cant think of a way to select it beside using ID…

2

yes there are plenty of choices for you.
The first one that comes to my mind would be to generate your list of products in your javascript file.

This way, you’ll be able to iterate much more easily with a simple “for” loop.

for example

let food = [
	{
		name:'Kong Pow Chicken',
		price:12.00
	},
	{
		name: 'steam Chicken',
		price:12.00
	}
];

const foodGeneration = `<div><h1> ${food[0].name} </h1></div>`;
document.getElementById('test').innerHTML = foodGeneration;

‘test’ is the id of the div where I want to generate my html. Put that in a for loop, tweak things a little, and that should do the trick ^^

Sorry this post is a bit messy, but I just woke up and I am writing this in my underwear with a hot cup of coffee to wake me up ^^

Good luck, hope that helps :wink:

3

thanks For the help :slight_smile: get the things done!