index.html

<!DOCTYPE html> 

<html> 
<head> 
    <meta charset="utf-8">
	<meta name="description" content="Tip Calculator">
	<meta name="keywords" content="tip calculator,money,calculator ">

	<title> Tip Calculator </title>

	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
<div id="container">
  <h1>Tip Calculator</h1>
  <div id="calculator">


    <form>
      <p>Enter your bill
        <p>
          $ <input id="billamt" type="text" placeholder="Bill Amount">

          <p>Enter service quality
            <p>
              <select id="serviceQual">
            <option disabled selected value="0">-- Choose an Option --</option>
            <option value="0.3">30&#37; &#45; Outstanding</option>
            <option value="0.2">20&#37; &#45; Good</option>
            <option value="0.15">15&#37; &#45; Okay</option>
            <option value="0.1">10&#37; &#45; Bad</option>
            <option value="0.05">5&#37; &#45; Terrible</option>
        </select>

    </form>
    <p>How many people are sharing the bill?</p>
    <input id="peopleamt" type="text" placeholder="Number of People"> people
    <button type="button" id="calculate">Calculate</button>

  </div>
  <!--calculator end-->
  <div id="totalTip">
    <sup>$</sup><span id="tip">0.00</span>
    <small id="each">each</small>
  </div>
  <!--totalTip end-->

</div>
<!--container end-->

<script type="text/javascript" src="tipcalculator.js"></script>
<body>
<html> 