Learn-WebDevelopment.com home page Learn-WebDevelopment.com

Creating The UI With HTML

Section Overview

This project is a tip-calculator build using HTML, CSS, and JavaScript. It will include controls for the user to interact with, and the values will update dynamically.

In this lesson, you'll learn how to build a clean, interactive UI for our quick tip project. This will include user inputs for the total bill, the tip amount, and the number of people to split the bill between.

UI using only HTML, we will break down the process into clear, manageable steps, explaining the code at each stage. By the end, you'll have a solid understanding of how to structure a real-world user interface.

Setting up the HTML boilerplate

Every HTML page starts with a basic structure to ensures your page is valid and works across browsers.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Quick Tip</title>
  </head>
  <body>
    <!-- Content will go here -->
  </body>
</html>
  • <!DOCTYPE html> tells the browser to use the latest HTML standard.
  • <html lang="en"> sets the page language for accessibility and SEO.
  • The <head> contains page metadata and title.
  • The <body> is where the content to show in the browser will go (text, images etc).

Creating the main container

We'll use a <main> element with an ID to wrap our UI. This helps with styling and accessibility:

<main id="container">
  <h1>Quick Tip</h1>
  <!-- UI sections will go here -->
</main>
  • <main> this is a semantic/descriptive element to group the main/central page content.
  • The id attribute is added to target this section with CSS or JavaScript later.
  • <h1> is the main page title. Only one level 1 heading should be used on each page.

The bill input section

Let's add a section for the user to enter their bill amount inside the <main> container:

<main id="container">
  <section>
    <div>
      <label for="yourBill">Bill</label>
      <input type="number" placeholder="Your bill" id="yourBill" />
    </div>
    <!-- More inputs will be added here -->
  </section>
  • <section> is a semantic HTML element to represent a standalone section of a page.
  • <label for="yourBill"> a label element to add text to the input, this is linked to the input for accessibility.
  • <input type="number"> allows user input and ensures only numbers can be entered.
  • The placeholder adds a text 'hint' the user.

Adding the tip selection

Now, let's let users choose a tip percentage using a slider.

  <!-- add below previous div, still within the section wrapper -->
  <div>
    <div>
      <label for="tipInput">Select tip</label>
      <span id="tipPercent"></span>
    </div>
    <input type="range" value="0" id="tipInput" />
  </div>
</section>
  • The inner <div> groups the label and a span to show the selected tip percent.
  • <input type="range"> creates a slider for tip selection.
  • The id attribute will help us select/update these values with JavaScript later.

Displaying the tip and total amount

This section will be used to display the tip value and also the total bill once the tip is added. Add the following still within the <section> element:

<!-- add below previous div, still within the section wrapper -->
<div>
  <span>Tip</span>
  <span id="tipValue"></span>
</div>
<hr />
<div>
  <span>Total</span>
  <span id="totalWithTip"></span>
</div>
  • Each <div> displays a label and a value. They are currently empty and will be set later using JavaScript.
  • <hr /> adds a horizontal rule to separate the sections.

Creating the bill split section

This section will wllow users to split the bill between multiple people:

</section> <!-- previous section closing tag -->

<section>
  <div>
    <div>
      <label for="splitInput">Split</label>
      <span id="splitValue"></span>
    </div>
    <input
      type="range"
      min="1"
      max="10"
      value="1"
      id="splitInput"
    />
  </div>
  <!-- Per-person calculations will go here -->
</section>
  • This <section> groups the split controls and calculations per person.
  • The slider is used to choose how many ways to split the bill (1-10).
  • The <span> shows the number of people to split between (e.g. 2 people).

Displaying per-person values

Within this same <section> element, add the following code to display how much each person should pay for the bill and tip:

<div>
  <span>Bill each</span>
  <span id="billEach"></span>
</div>
<div>
  <span>Tip each</span>
  <span id="tipEach"></span>
</div>
  • These <div> sections show the total bill per-person and the tip amounts.
  • The spans will be updated dynamically using JavaScript in a later section.

Final code

Here's the complete HTML for the Quick Tip UI:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Quick Tip</title>
  </head>
  <body>
    <main id="container">
      <h1>Quick Tip</h1>
      <section>
        <div>
          <label for="yourBill">Bill</label>
          <input type="number" placeholder="Your bill" id="yourBill" />
        </div>
        <div>
          <div>
            <label for="tipInput">Select tip</label>
            <span id="tipPercent"></span>
          </div>
          <input type="range" value="0" id="tipInput" />
        </div>
        <div>
          <span>Tip</span>
          <span id="tipValue"></span>
        </div>
        <hr />
        <div>
          <span>Total</span>
          <span id="totalWithTip"></span>
        </div>
      </section>
      <section>
        <div>
          <div>
            <label for="splitInput">Split</label>
            <span id="splitValue"></span>
          </div>
          <input
            type="range"
            min="1"
            max="10"
            value="1"
            id="splitInput"
          />
        </div>
        <div>
          <span>Bill each</span>
          <span id="billEach"></span>
        </div>
        <div>
          <span>Tip each</span>
          <span id="tipEach"></span>
        </div>
      </section>
    </main>
  </body>
</html>