Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
58 lines (54 sloc) 2.34 KB
<!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 href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body class="blue darken-3">
<div class="card z-depth-2">
<div class="card-image">
<img src="images/claudia-crespo-ewOrvEa87j4-unsplash.jpg">
<span class="card-title">Tip Calculator</span>
</div>
<div class="card-content">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field">
<i class="material-icons prefix">attach_money</i>
<input type="number" id="total" value="100.00" min="1"></input>
<label for="total">Bill Total</label>
</div>
<div class="input-field">
<i class="material-icons prefix">pie_chart</i>
<input type="number" id="tip" value="15" min="0"></input>
<label for="tip">Tip Percentage</label>
</div>
<div class="input-field">
<i class="material-icons prefix">group_add</i>
<input type="number" id="people" value="1" min="1"></input>
<label for="people">Number of People</label>
</div>
</div>
</form>
</div>
</div>
<div class="card-action">
<div class="row">
<div class="col s6">
Tip (per person): $<span class="tipOutput"></span>
</div>
<div class="col s6">
Total (per person): $<span class="totalOutput"></span>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
You can’t perform that action at this time.