Budgety

A simple budget app made using HTML5, CSS3 & JavaScript. The app can be used here.

How to use Budgety

• Plus sign (+) signifies "Income" & the Minus sign (-) signifies "Expense"
• After choosing +/- (i.e., income/expense), add the description.
  • Example description for income is "Salary"
  • Example description for expense is "Rent", "Bills", etc
• After adding the description, you can add the value (has to be more than 0) and then press Enter ⏎ to add the entry into the respective list
• To delete an existing item in either the income/expense list, simply hover over the item in the respective list and press ⊗

Development Workflow

To know the complete development work-flow of the project, please click here. Otherwise, read a short summary of what I learned below

What did I learn?

Some of the concepts I've garnered/understood while working on this project are the following:

• Familiarized myself with Module Pattern, Encapsulation & Separation of Concerns
  • Module Pattern enforces the idea of "A System/App is a combination of many Parts/Modules"
  • Using Immediately Invoked Function Expressions (IIFEs), we are able to achieve Encapsulation and also data privacy
  • Module Pattern also encourages Separation of Concerns, where one Controller for a certain module only handles the work/functionality related to that particular module only
• JavaScript Concepts:
  • Enforcement of core concepts of the language like IIFEs & Closures
  • Usage of general functions like map(), splice(), forEach(), etc, along with the usage of string manipulation functions like strip(), substr(), replace(), matches(), etc
  • Usage of Function Constructors to create objects. Using the prototype property to add methods to the predefined constructors.
  • DOM Access & Manipulation:
    • A thorough understanding of Event Bubbling, Target Element & Event Delegation
    • Understanding of certain events like keypress, change, click, etc
    • Understanding the usage of certain methods like innerAdjacentHTML(), removeChild(), querySelectorAll(), etc
    • Understanding of parentNode property
    • What a NodeList is and how to traverse it
  • The Date() Constructor and its uses