<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tip Calculator</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="form-group">
<label for="bill">How much was the bill?</label>
<input type="text" id="bill" placeholder="Bill value" />
</div>
<div class="form-group">
<label for="percentage1">How did you like the service?</label>
<select id="percentage1">
<option value="0">Dissatisfied (0%)</option>
<option value="5">It was okay (5%)</option>
<option value="10">It was good (10%)</option>
<option value="20">Absolutely amazing! (20%)</option>
</select>
</div>
<div class="form-group">
<label for="percentage2">How did your friend like the service?</label>
<select id="percentage2">
<option value="0">Dissatisfied (0%)</option>
<option value="5">It was okay (5%)</option>
<option value="10">It was good (10%)</option>
<option value="20">Absolutely amazing! (20%)</option>
</select>
</div>
<h3 id="output" style="display: none;"></h3>
<button id="resetButton" style="display: none;">Reset</button>
</div>
<script src="script.js"></script>
</body>
</html>
