Skip to content

Instantly share code, notes, and snippets.

@tilhom

tilhom/gist:351f0f14c86bbff56d305b87140aab20

Last active December 16, 2018 06:15
Show Gist options
  • Save tilhom/351f0f14c86bbff56d305b87140aab20 to your computer and use it in GitHub Desktop.
Save tilhom/351f0f14c86bbff56d305b87140aab20 to your computer and use it in GitHub Desktop.
Download ZIP
js invoice maker
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>L2-4</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style type="text/css">table thead {
text-align:center;
}
textarea {
border: 0;
overflow: hidden;
resize: none;
/*margin-left: 1rem;*/
}
textarea.right {
text-align: right;
}
textarea:hover {
background-color: yellow;
}
table thead {
text-align:center;
}
textarea {
border: 0;
overflow: hidden;
resize: none;
/*margin-left: 1rem;*/
}
textarea.right {
text-align: right;
}
textarea:hover {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container w-75">
<h1 class="d-flex justify-content-center align-items-center">
Invoice N# <textarea cols="4" rows="1"></textarea></h1>
<hr>
<p class="d-flex justify-content-end align-items-center">Date: <textarea cols="8" rows="1"></textarea></p>
<table class="table table-bordered">
<thead>
<tr class="d-flex">
<th class="col-sm-1">#</th>
<th class="col-sm-3">Item</th>
<th class="col-sm-4">Description</th>
<th class="col-sm-1">Cost</th>
<th class="col-sm-1">Q-ty</th>
<th class="col-sm-2">Price</th>
</tr>
</thead>
<tbody>
<!-- <tr class="d-flex item-row">
<td class="col-sm-1"><button class="btn btn-danger delete"><i class="fa fa-trash-o"></i></button></td>
<td class="col-sm-3">
<textarea cols="15" rows="1"></textarea>
</td>
<td class="col-sm-4">
<textarea cols="20" rows="1"></textarea>
</td>
<td class="col-sm-1">
<textarea cols="4" rows="1" class="cost"></textarea>
</td>
<td class="col-sm-1">
<textarea cols="4" rows="1" class="quantity"></textarea>
</td>
<td class="col-sm-2">
<textarea cols="8" rows="1" class="price"></textarea>
</td>
</tr> -->
</tbody>
<tfoot>
<tr class="d-flex">
<td colspan="5" class="col-sm-10">
<button class="btn btn-primary addrow"><i class="fa fa-cart-plus"></i></button>
</td>
<td class="col-sm-2"></td>
</tr>
<tr class="d-flex">
<td colspan="5" class="col-sm-10 text-right" >Sub Total</td>
<td class="col-sm-2 text-right" id="subtotal"> 180.00</td>
</tr>
<tr class="d-flex">
<td colspan="5" class="col-sm-10 text-right" > Total</td>
<td class="col-sm-2 text-right" id="total"> 180.00</td>
</tr>
</tfoot>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script type="text/javascript">
console.log('Hi');
$(document).ready(function(){
$('body').on('click','.delete',function(){
$(this).parents('.item-row').remove();
update_total();
});
function addRow(){
$('tbody').append(
`
<tr class="d-flex item-row">
<td class="col-sm-1"><button class="btn btn-danger delete"><i class="fa fa-trash-o"></i></button></td>
<td class="col-sm-3">
<textarea cols="21" rows="1" class="focus"></textarea>
</td>
<td class="col-sm-4">
<textarea cols="30" rows="1"></textarea>
</td>
<td class="col-sm-1">
<textarea cols="4" rows="1" class="cost right"></textarea>
</td>
<td class="col-sm-1">
<textarea cols="4" rows="1" class="quantity right"></textarea>
</td>
<td class="col-sm-2 text-right">
<span class="price">0.00</span>
</td>
</tr>
`
);
var f = $('tbody:last').find('.focus');
f.focus();
bind();
}
addRow();
$('.addrow').click(addRow);
function bind(){
$('.cost').blur(update_price);
$('.quantity').blur(update_price);
}
function update_price(){
var row = $(this).parents('.item-row');
var cost = row.find('.cost').val();
var qty = row.find('.quantity').val();
row.find('.price').html(Number(qty) * Number(cost) );
update_total()
}
function update_total(){
var total = 0 ;
$('.price').each(function(i){
price = $(this).html();
if(price > 0){
total += Number(price);
}
})
$('#subtotal').html(total);
$('#total').html(total);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment