Building a simple Budget Calculator using Vanilla javascript

Enrolling in scrimba.com's Frontend Development Career path is one of the best decisions I have made this year. Their course content is not only rich but created by experts in various areas of Frontend Development. The weekly challenges are one of the highlights of the Bootcamp; this week came with the challenge of building a Budget App which I attempted and decided to share with the community too.

Prerequisites

Basic knowledge of HTML and CSS.

Basic knowledge of JavaScript syntax and datatypes.

Basic knowledge of working with the DOM.

Basic knowledge of persisting data to Local Storage.

Getting Started

The task is to wire up a budget calculator and style it in any way I like. A design was given as a guide to follow. budget tool.png

After much thought, I came up with my own design.

budget image.png Not much difference you'd say except for the styling.

Create the project structure

First, create the project folder called budgit.

Second, under the budgit project, create CSS and JavaScript files accordingly.

Third, create a main.css file inside the root folder and a javaScript file called main.js, still under the root folder.

Finally, create the index.html file in the project root folder.

The final project folder structure will look like this:

file system.png

HTML STRUCTURE

Edit the index.html file and place the CSS and JavaScript files appropraitely in the index.html file as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Budgit</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="budget_container">
    <h1>Budget Calculator</h1>
    <h2>How much 💸 is in the fund?</h2>
    <div id='budget'></div>
    <div class="input_container">
      <div>
        <h2>How much 💸 is the item?</h1>
          <input id='expense'></input>
      </div>
      <div>
        <h2>How much 💸 is your savings?</h1>
          <input id='income'></input>
      </div>
    </div>
    <div id="message"></div>
    <button id='advise'>Give it to me straight!</button>
  </div>
  <script src="main.js"></script>
</body>
</html>

The Structure is such that the main div with a class of budget_container contains other children elements that provide heading, input, and button for the call to action.

CSS STYLING

So I decided to use a combination of Flexbox and CSS Grid for my layout. Specifically, I used Flexbox to style the Budget container and used Grid as a layout for the input container. Here is the full code below.

html,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-color: #222;
}

.budget_container {
  display: flex;
  color: #fff;
  position: absolute;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #023023;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%)
}

.input_container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  margin-left: 10px;
  margin-right: 10px
}

#advise {
  margin-top: 10px;
  color: #03368b;
  border-radius: 2em;
  padding: .2rem;
  font-weight: 300;
  text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
  text-align: center
}

#budget {
  font-size: 1.8rem;
  color: #fff;
  font-weight: 400;
  font-family: sans-serif
}

#message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: bold;
  margin-top: 10px;
  margin-left: 1rem;
  margin-right: 0.5rem;
  color: antiquewhite;
}

Now, over to the "life" of the app itself; Javascript.

Javascript Part

There are quite a few things I'd like to bring in here which include;

getElementById() – select an element by id.
textContent – get and set the text content of a node. First, select the various elements of concern as shown below using the getElementById() method:

selected variables.png

Next, we create a function called 'calcResult' to provide the logic for calculating the budget from the income and savings input. In this function, we also need to convert the datatype of the entries from string to number using the Number() method in order to perform arithmetic computations. Furthermore, with a try-catch, you can handle an exception to avoid the risk of encountering unhandled exceptions.

At the end of the function is another inner function called 'updateLocalStorage'. This function merely stores the budget amount into the Localstorage and is converted to string before storage using JSON.stringify method. A localStorage object is a great tool for saving key/value pairs locally. Using localStorage for storage is an alternative to using cookies and there are some advantages:

The data is saved locally only and can’t be read by the server, which eliminates the security issue that cookies present.
It allows for much more data to be saved (10MB for most browsers).
The syntax is straightforward.

Next is another function called 'init'. The aim of this function is to load any existing budget fund if any to the web page on start.

Lastly is the event handler for a button click which runs another function called 'displayResult' The display function simply runs the calcResult() and the advisor()- displays a message on the webpage based on the if statement.

The last part I need to talk about is the pulling out of data from localStorage using the localStorage.getItem(). In this project, I created a variable called 'localStorageTransactions' whose purpose is to store the parsed output from the localStorage Object using the JSON.parse(). Remember that Local storage can only save strings, hence the need to convert to the initial datatype. Line 16 of the code simply states that if there's something in the local storage; return it else, set it to be an empty array.

Summary

In this tutorial, you have learned how to develop a Budget calculator using vanilla JavaScript. And the following are the key takeaways:

How to select elements using the getElementByID method().
How to convert String to Number datatype using the Number method().
How to persist data using local storage.

Check out the full code on scrimba.

Samson Lasode's Blog