Need advice on single-page data interaction

Need advice on single-page data interaction
0
#1

I am making a a single-page to place restaurant orders: To the left I have a menu. On each menu item there is an “add to order”, in the center you’ll see the order populated with every click. (order will also have a total )’ and to the right a send order button.

I am able to make the menu just fine, but I am thinking of how to populate the order.

On a high level. How would I best do that? I am coding in vanilla JavaScript and I am making this page since a web agency I contacted earlier sent me a coding challenge.

I have googled and found answers about AJAX and submitting forms, but they all seem to be guides on how to interact with a server. What I imagine is the page interacting with just itself when going from click on menu to populate order. I Imagine the order itself being a form that then is submitted. with the “send order” button.

#2

I think angualarjs would be perfect for your goal.

#3

Hi Michael and thanks for your reply.

Angular is probably perfect for this purpose, but I’ve decided on vanilla JavaScript. I am a beginner and this is mostly my attempt at understanding what goes into making a somewhat dynamic a webpage.

Before joining freeCodeCamp I spent some time trying to learn React.js. I now realized that was a mistake without having a solid foundation of JavaScript. I feel more or less the same with jQuery. Frameworks are definitely useful for the experienced, but for the uninitiated I don’t need the shorthand, I need it spelled out and JavaScript alone does that.

#5

Very basic attempt (no styling, just HTML/JS):

#6

Excellent: Two very good answers.

@P1xt Thanks for the link to Netninja. I have come across Netninja before but I didn’t know that the course really goes int DOM manipulation with pure JavaScript, which is really what I looked for. I will go through the excises one by one tomorrow.

@jenovs Thnaks for the codepen. That definitely helps. Glad to see that not much code was needed. I will have to dig really deep into every part of what you have built. Since the challenge I am working with can lead to an internship, and maybe a job even, I want to be conscientious about only using code I understand and be transparent with the company that sent me the challenge.