Skip to content

Instantly share code, notes, and snippets.

@matgargano

matgargano/index.html

Created December 6, 2019 01:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matgargano/b74a3d6773746494cabbf0c28148e4aa to your computer and use it in GitHub Desktop.
Save matgargano/b74a3d6773746494cabbf0c28148e4aa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
.backdrop {
position:fixed;
top:25px;
height:100%;
width:100%;
background:rgba(0,0,0,0.5);
display:none;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<button class="btn btn-primary" id="toggle">CLICK ME</button>
<div class="backdrop"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="js/script.js">
</script>
</body>
</html>
Raw
script.js
jQuery(document).ready(function($){
var $backdrop = $('.backdrop');
$('#toggle').on('click', function(){
$backdrop.toggle();
// $('.backdrop').show();
// $('.backdrop').css('display', 'block');
});
$backdrop.on('click', function(){
// $('.backdrop').on('click', function(){
$backdrop.toggle();
// $('.backdrop').css('display', 'none');
})
});
Raw
tip.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">$</span>
</div>
<input id="total-bill" type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon2">%</span>
</div>
<select id="tip-percentage">
<option value="0">0</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
</select>
</div>
<p class="btn btn-secondary" id="calculate">Calculate</p>
<p class="total-amount" style="display:none;"></p>
<p class="tip-message" style="display:none;"></p>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="js/tip.js"></script>
</body>
</html>
Raw
tip.js
jQuery(document).ready(function($){
function setMessage(message){
var $totalMessage = $('.total-amount');
$totalMessage.css('display', 'block');
$totalMessage.html(message);
}
function setTipMessage(message){
var $tipMessage = $('.tip-message');
$tipMessage.css('display', 'block');
$tipMessage.html(message);
}
function initalizeApp(){
var $tipMessage = $('.tip-message');
var $totalMessage = $('.total-message');
// $tipMessage.html('');
// $totalMessage.html('');
$tipMessage.css('display', 'none');
$totalMessage.css('display', 'none');
}
$('#calculate').on('click', function(){
initalizeApp();
//get the amount in $('#total-bill')
var totalBill = $('#total-bill').val();
//get what user selected on $('#tip-percentage')
var tipPercentage = $('#tip-percentage').val();
// alert(totalBill);
var totalBillNumber = parseFloat(totalBill);
var tipPercentageNumber = parseFloat(tipPercentage);
if(isNaN(tipPercentageNumber)){
return setMessage('Tip percentage is not a number');
}
if(isNaN(totalBillNumber)){
return setMessage('Total Bill Number is not a number');
}
var totalBillWithTip = totalBillNumber + (totalBillNumber * (tipPercentageNumber/100));
setMessage('Your total is $' + totalBillWithTip.toFixed(2));
var tipMessage = 'Terrible tip!';
if (tipPercentageNumber > 15) {
tipMessage = 'Tip is OK, you could do better';
}
setTipMessage(tipMessage);
//on click of $('#calculate') calculate tip
// validate that a number was entered into the bill
// if true output a message
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment