Elements not showing up as inline

Made some good progress with this little project. I have two methods for checking each input to see if the value is 0. If they are zero when the button is clicked then the functions create a span element and display the error. I set the paragraph to inline so the span will be on the same line as “Number of people” and “Bill”. For some reason though the Number of people span does not want to sit inline with the Number of people text. However, my bill span sits perfectly inline. I tried messing with the spacing, but it does not want to move.

You have a <div> wrapper around two elements <p> (which actually should be <label>) and <input> and they’re displayed in a column (default for div). Then you’re adding a <span> and now you want for elements to show in 2 dimensions. You could achieve it by adding some specific padding/margin values, but that wouldn’t be the best approach because your layout will break easily.

I would change layout with <span> being already there and only changing it’s text content (or visibility).

<div>
  <div>
    <p>Bill</p><span id="err-message-bill">Error message</span>
  <div>
  <input>
</div>

I did think about that. Using innerHTML like I do with the total/per person and tip/per person. I guess it would be a better way to go, because right now im checking to see if a span exists and if it does not then it creates that span. That would let me get rid of the checks, and clean up the js a little

Some general observations:

  • Querying elements by class name is not a good idea. Use ids. Classes are for styling.
  • calculateTotal probably should be called something like init and contain also code from resetInput.
  • Doing reset by just removing all <span> elements is a very bad idea.
  • You should split calculating logic and DOM update logic.
  • Don’t create variables that you’re only using immediately once (const numPeople = people.value;. It’s ok if it helps readability, but here it’s useless.
  • Use <form> as a wrapper - it’s more semantically correct, also you get submit functionality for free.

Why would this be bad?

Of course here it doesn’t matter, but:

  • on any reasonably sized page there will be many <span>s and by clicking “Reset” you’ll remove all of them;
  • you need to think about future devs (even if that future dev is you) - no one will expect such a “neat” feature.