DEV Community

Nkem
Nkem

Posted on • Originally published at nkem.hashnode.dev

Day 15-16 of 100 days of Code

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.

Image description

<!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>
Enter fullscreen mode Exit fullscreen mode

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%;
 }
Enter fullscreen mode Exit fullscreen mode

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}`;

}
}

Enter fullscreen mode Exit fullscreen mode

Top comments (0)