48 lines
1.3 KiB
HTML
48 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Invoice Total Calculator</title>
|
|
<link rel="stylesheet" href="invoice.css">
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<h1>Invoice Total Calculator</h1>
|
|
<p>Enter the two values that follow and click "Calculate".</p>
|
|
|
|
<div>
|
|
<label for="type">Customer Type:</label>
|
|
<select id="type">
|
|
<option value="reg">Regular</option>
|
|
<option value="loyal">Loyalty Program</option>
|
|
<option value="honored">Honored Citizen</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="subtotal">Invoice Subtotal:</label>
|
|
<input type="text" id="subtotal">
|
|
</div>
|
|
<hr>
|
|
<div>
|
|
<label for="percent">Discount Percent:</label>
|
|
<input type="text" id="percent" disabled>%
|
|
</div>
|
|
<div>
|
|
<label for="discount">Discount Amount:</label>
|
|
<input type="text" id="discount" disabled>
|
|
</div>
|
|
<div>
|
|
<label for="total">Invoice Total:</label>
|
|
<input type="text" id="total" disabled><br>
|
|
</div>
|
|
<div>
|
|
<label> </label>
|
|
<input type="button" id="calculate" value="Calculate">
|
|
</div>
|
|
</main>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
|
|
<script src="invoice.js"></script>
|
|
</body>
|
|
</html> |