I have been a lot slower than I wanted. I will do better. I created the invoice creator app with HTML, Javascript and CSS.
The invoice creator app adds tasks such as washing car, mowing lawn and pullling weeds with its price attached to the button as you click it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="invoice.css" rel="stylesheet">
<title>Invoice Creator App</title>
</head>
<body>
<header>
<h2>Invoice Creator</h2>
<p class="heading">Thanks for choosing Dynax Solutions, LLC!</p>
</header>
<section>
<div class ="invoicebtns ">
<button class="button" id="billwash">Wash Car: $10</button>
<button class="button" id ="mow">Mow Lawn: $20</button>
<button class="button" id ="billpull">Pull Weeds: $30</button>
</div>
</section>
<section>
<div class="task">
<p>TASK</p>
<p>TOTAL</p>
</div>
<div class ="bill">
<p id ="washCar"></p>
<p id ="washCarPrice"></p>
</div>
<div class ="bill">
<p id ="mowLawn"></p>
<p id ="mowLawnPrice"></p>
</div>
<div class ="bill">
<p id ="pullWeeds"></p>
<p id ="pullWeedsPrice"></p>
</div>
<div class ="bar"></div>
<div class="task">
<p>NOTES</p>
<p>TOTAL AMOUNT</p>
</div>
<div class="task">
<p id ="typeofcollection"></p>
<p id="totalamount"><b>$0</b></p>
</div>
<button class="sendbtn"><i class="fa fa-envelope" aria-hidden="true"></i> Send Invoice</button>
</section>
<script src ="invoice.js"></script>
</body>
</html>
CSS snippet
html,
body {
margin: 0;
padding: 0;
color: black;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
}
header{
background-color:#D5D4D8 ;
text-align: center;
}
h2{
margin-top:0;
margin-bottom:1%;
font-size: 50px;
padding:50px 0 10px 0;
}
.heading
{
font-size: 30px;
padding-bottom:20px;
}
.invoicebtns
{ margin-top:12%;
display:flex;
flex-direction: row;
justify-content: space-between;
}
.button {
background-color: #FFFFFF; /* white */
border: 1px solid #D5D4D8;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
border-radius:12px;
}
.button:hover {
background-color: #D5D4D8;
}
section{
margin-left: 10%;
width:80%;
}
.task{
margin-top: 2%;
display:flex;
color:darkgrey;
justify-content: space-between;
font-size: larger;
}
.bill
{
margin-top:1%;
display:flex;
color:black;
justify-content: space-between;
font-weight: bold;
}
.bar{
border-top: 1px solid #D5D4D8;
}
.sendbtn{
background-color: #3770ED; /* blue*/
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
margin-bottom: 4%;
width:90%;
}
Javascript Snippet
// This is for the object creation of the invoice
let invoice =[
{
task:"Wash Car",
bill: 10
},
{
task: "Mow Lawn",
bill: 20
},
{
task: "Pull Weeds",
bill:30
}
]
let totalbill =[]
//fetching the value from the buton using addeventlistener
const carBtn = document.getElementById('billwash')
let mowBtn = document.getElementById('mow')
const pullBtn = document.getElementById('billpull')
let washCar =document.getElementById('washCar')
let washCarPrice =document.getElementById('washCarPrice')
let mowLawn =document.getElementById('mowLawn')
let mowLawnPrice =document.getElementById('mowLawnPrice')
let totalamount =document.getElementById('totalamount')
let pullWeeds=document.getElementById('pullWeeds')
let pullWeedsPrice =document.getElementById('pullWeedsPrice')
carBtn.addEventListener("click",function(){
totalbill.push(invoice[0].bill)
washCar.innerHTML =invoice[0].task
washCarPrice.innerHTML =`$${invoice[0].bill}`
carBtn.disabled =true
totalnotes()
})
mowBtn.addEventListener("click", function(){
totalbill.push(invoice[1].bill)
mowLawn.innerHTML =invoice[1].task
mowLawnPrice.innerHTML =`$${invoice[1].bill}`
mowBtn.disabled=true
totalnotes()
})
pullBtn .addEventListener("click",function(){
totalbill.push(invoice[2].bill)
pullWeeds.innerHTML =invoice[2].task
pullWeedsPrice.innerHTML =`$${invoice[2].bill}`
pullBtn.disabled =true
totalnotes()
})
function totalnotes(){
let sum = 0;
for (let i = 0; i < totalbill.length; i++) {
sum += totalbill[i];
totalamount.textContent=`$${sum}`;
}
}
Top comments (0)