Welcome folks today in this blog post we will be building a income expense or budget calculator in html5 css3 and javascript using localstorage. All the full source code of the application is given below.
Get Started
In order to get started you need to create an index.html file and copy paste the following code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]> <html class="no-js"> <!--<![endif]--> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>expense traker</title> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="style.css" /> </head> <body> <!--[if lt IE 7]> <p class="browsehappy"> You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience. </p> <![endif]--> <h2>Expense Tracker</h2> <div class="container"> <h4>Your balance</h4> <h1 id="balance">$0.0</h1> <div class="inc-exp-container"> <div> <h4>income</h4> <p id="money-plus" class="money plus">+$0.00</p> </div> <div> <h4>expense</h4> <p id="money-minus" class="money minus">-$0.00</p> </div> </div> <h3>History</h3> <ul id="list" class="list"> <!-- <li class="minus">cash<span>-$400</span><button class="delete-btn">x</button></li> --> </ul> <h3>add new transation</h3> <form action="" id="form"> <div class="form-control"> <label for="text">text</label> <input type="text" id="text" placeholder="please enter the text..." /> </div> <div class="form-control"> <label for="amount" >amount <br />(negtive=expense,positive=income)</label > <input type="number" id="amount" placeholder="please enter the amount..." /> </div> <button class="btn">Add transation</button> </form> </div> <script src="script.js" async defer></script> </body> </html> |
Now make a style.css file and copy paste the following code
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
@import url("https://fonts.googleapis.com/css2?family=Viaoda+Libre&display=swap"); :root { --bg: #463333; --text: #fff0f0; --line: #ebd4d4; --last: #835858; --box-shadow: 0 1px 5px rgba(250, 250, 250, 0.2), 0 1px 5px rgba(255, 255, 255, 0.3); } * { box-sizing: border-box; } body { font-family: "Viaoda Libre", cursive; background-color: var(--bg); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; min-height: 100vh; } .container { margin: 30px auto; width: 350px; } h1 { letter-spacing: 1px; margin: 0; } h3 { border-bottom: 1px solid var(--line); padding: 10px; margin: 40px 0 10px; } h4 { margin: 0; text-transform: uppercase; color: var(--last); } p { color: var(--bg); font-weight: bold; } .inc-exp-container { background-color: var(--line); padding: 20px; box-shadow: var(--box-shadow); display: flex; justify-content: space-between; margin: 20px 0; } .inc-exp-container > div { flex: 1; text-align: center; } .inc-exp-container > div:first-of-type { border-right: 1px solid var(--last); } .money { font-size: 20px; letter-spacing: 1px; margin: 5px 0; } .money.plus { color: forestgreen; } .money.minus { color: crimson; } label { display: inline-block; margin: 10px 0; font-size: large; font-weight: bold; text-decoration: underline; } input[type="text"], input[type="number"] { border: 1px solid var(--last); border-radius: 5px; display: block; font-size: 16px; padding: 10px; width: 100%; } .btn { cursor: pointer; background-color: var(--line); box-shadow: var(--box-shadow); color: var(--bg); display: block; font-size: 16px; font-weight: bold; margin: 10px 0 30px; padding: 10px; width: 100%; } .btn:focus, .delete-btn:focus { outline: none; } .list { list-style-type: none; padding: 0; margin-bottom: 40px; } .list li { background-color: var(--text); color: var(--bg); display: flex; justify-content: space-between; position: relative; padding: 10px; margin: 10px 0; } .list li.plus { border-right: 5px solid forestgreen; } .list li.minus { border-right: 5px solid crimson; } .delete-btn { cursor: pointer; background-color: var(--line); border: 0; font-size: 20px; line-height: 20px; padding: 2px 5px; position: absolute; top: 50%; left: 0; transform: translate(-100%, -50%); opacity: 0; transition: opacity 0.3s ease-in; } .list li:hover .delete-btn { opacity: 1; } |
Now make a script.js file and copy paste the following code
script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
const balance = document.getElementById("balance"); const money_plus = document.getElementById("money-plus"); const list = document.getElementById("list"); const form = document.getElementById("form"); const text = document.getElementById("text"); const amount = document.getElementById("amount"); const money_minus = document.getElementById("money-minus"); // const randomTransations=[ // {id:1,text:'salary',amount:400}, // {id:2,text:'books',amount:-50}, // {id:3,text:'paper',amount:-20}, // {id:4,text:'food',amount:-100}, // ] const localStorageTransations = JSON.parse(localStorage.getItem("transations")); let transations = localStorage.getItem("transations") !== null ? localStorageTransations : []; //add transation function addTransation(e) { e.preventDefault(); if (text.value.trim() === "" || amount.value.trim() === "") { text.placeholder = "please add a text"; text.style.backgroundColor = "#ccc"; amount.placeholder = "please add amount"; amount.style.backgroundColor = "#ccc"; } else { const transation = { id: genenrateID(), text: text.value, amount: +amount.value, }; transations.push(transation); addTransationDOM(transation); updateValues(); updateLocalStorage(); text.value = ""; amount.value = ""; } } //generate id function genenrateID() { return Math.floor(Math.random() * 100000000); } //add transations to dom list function addTransationDOM(transation) { //get sign const sign = transation.amount < 0 ? "-" : "+"; const item = document.createElement("li"); //add class based on value item.classList.add(transation.amount < 0 ? "minus" : "plus"); item.innerHTML = `${transation.text} <span>${sign}${Math.abs( transation.amount )}</span> <button class="delete-btn" onclick="removeTransation(${ transation.id })">x</button>`; list.appendChild(item); } //update the balance function updateValues() { const amounts = transations.map((transation) => transation.amount); const total = amounts.reduce((acc, item) => (acc += item), 0).toFixed(2); const income = amounts .filter((item) => item > 0) .reduce((acc, item) => (acc += item), 0) .toFixed(2); const expense = ( amounts.filter((item) => item < 0).reduce((acc, item) => (acc += item), 0) * -1 ).toFixed(2); balance.innerText = `$${total}`; money_plus.innerText = `$${income}`; money_minus.innerText = `$${expense}`; } //remove function removeTransation(id) { transations = transations.filter((transation) => transation.id !== id); updateLocalStorage(); init(); } //updatelocal storage function updateLocalStorage() { localStorage.setItem("transations", JSON.stringify(transations)); } //init function init() { list.innerHTML = ""; transations.forEach(addTransationDOM); updateValues(); } init(); form.addEventListener("submit", addTransation); |
Now if you open index.html file inside the browser you will see the following output
