need help with restaurant project

[buoyant turret]

hello, i need help!

https://scrimba.com/scrim/cBB3rQuW

1. my code is not rendering very well on the preview browser on scrimba, here is the link above
2. i cant seem to make my order items render on separate lines
3. my if conditional is not working. it is meant to only display item not included in a the order if included then it should multiply price.
4. why only map function worked for my btns, i wasn't able to do it with filter/forEach methods that i was taught. perhaps there is another way to do it? with the mentioned methods
   forEach returns an error while filter returns {object object}

any help is welcomed. thanks

[buoyant turret]

need help with restaurant project

[deep pendant]

I haven't worked on all your questions, but the first one can be quickly fixed:

• Instead of:

window.addEventListener('DOMContentLoaded', function(e){
    displayMenu()
    functionalBtns()   
})

At the end of the JS file simply put functionalBtns() to call that function (which in turn calls the displayMenu() function)

This will allow the HTML to render

For #2 in CSS there is:

.menu-items-container, #sum, #order-summary-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid black;
}

Since you want ordered items to be in a column simply add this after the above code:

#order-summary-inner {
    flex-direction: column;
}

Note: This is a quick and dirty way to do it, it would be best to not give #order-summary-inner flex-direction: row then change it to column, but that could be fixed when refactoring

[buoyant turret]

thank you for 1. it worked!

thank you for two too. i figured it out using css too lol

any help adding the remove btn? i cant seem to take control of it in js,

[buoyant turret]

i didnt need to call the function in vs code for it to work... have u any idea why i need to do it here?

[deep pendant]

Not at the moment, but I do see that there are many elements with the same html ID, for instance here in displayMenu():

<div id="item-inner"  id="${item.id}">
  <h4 id="${item.id}">${item.name}</h4>
  <p id="${item.id}">${item.ingredients}</p>
  <p id="${item.id}">$${item.price}</p>
</div>

Each item in menuArray gets rendered and the div, h4, and both p tags end up with the same id which can cause problems for HTML semantics, screen readers, and more. If the item needs an id, using data-id="${item.id}" should work.