Simple budget-tracker web app developed using Vanilla JavaScript. Exercise from Warren Tech Academy.

Overview

Willow Personal Finance - Exercise from Warren Tech Academy

About

Tools:

  • HTML
  • CSS (SASS)
  • JavaScript
  • Modular approach using SASS and JavaScript native modules for styling and scripting, respectively

Implemented features:

  • Adding new transactions via modal component
  • Listing and filtering transactions
  • Calculating and displaying data summary based on created transactions
  • Hide values
  • UI theming
  • Responsive layout

Project screenshots







Installation

  • Install it by running npm install in the project's root directory
  • Run the project with npm start
  • Build the project with npm run build

Extra notes

  • As an exercise, this project wasn’t focused on advanced optimizations regarding data storage, processing, accessibility, scalability, cross-browser compatibility, etc. There’s still a lot to be done about it.
  • The UI was designed for this exercise.
  • As most projects, this one is not bug/error-free. If you find any bug or unexpected behavior, feel free to get in touch, here is my email - [email protected]
You might also like...

Snake game developed by Canvas & vanilla Js using OOP paradigm 🐍 🍎 🎮

Snake game developed by Canvas & vanilla Js using OOP paradigm  🐍 🍎 🎮

Snake-Game 🐍 🍎 Snake game developed by Canvas & vanilla Js using OOP paradigm This project was an exercise for the canvas fullDemo Feature Eating fo

Oct 7, 2022

women who code - object oriented programming exercise

Table of contents General info Technologies Setup General info Authorizer APP Technologies Project is created with: Typescript: 4.2 Setup Requirements

Oct 1, 2022

An exercise in building a very minimal (and very stupid) in-memory SQL-like database for educational purposes.

Stupid Database This is an exercise in building a very minimal (and very stupid) in-memory SQL-like database for educational purposes. None of this co

Dec 20, 2022

Hands-on real world projects that will help you exercise your knowledge of TypeScript.

Learning TypeScript Projects Hands-on real world projects that will help you exercise your knowledge of TypeScript. Welcome to the repository housing

Dec 26, 2022

Where to eat / exercise around the workplace

Joli Mapstr Installation Create an API token and put it in the GOOGLE_API_KEY environment variable (.env file). yarn Development yarn dev Open up http

Aug 26, 2022

Code exercise for Entera's interview process

Entera Code Test The project is hosted using GitHub Pages here. Local Development Dependencies You will need Node installed. The project was created w

Oct 4, 2022

The culmination of Encode Academy, the 8-week long Solidity course by Encode Club in collaboration with Extropy

The culmination of Encode Academy, the 8-week long Solidity course by Encode Club in collaboration with Extropy

Encode Academy | DAO: Real Estate & Renting What is this? This is the culmination of Encode Academy, the 8-week long Solidity course by Encode Club in

May 25, 2022

A great result management solution for schools, hospital, academy and other. If you are a php developer, contribute to this respository for more advancement of the project.

A great result management solution for schools, hospital, academy and other. If you are a php developer, contribute to this respository for more advancement of the project.

result-management-pro A great result management system for schools, hospital, academy and more. Contributions Willing to add more features to this gre

Jun 17, 2022

STRV's Frontend Academy repository

Eventio A project developed during the STRV Frontend Academy 2022 Built With Next.js React.js Getting Started Follow this section to get the project r

Oct 31, 2022
Owner
Douglas Ferreira
Front-end developer | Human Interface designer | Leveraging technology and design to craft functional, useful, and beautiful software.
Douglas Ferreira
We are students of group named "Special-Team" of GоIT academy. We graduated JavaScript course and for consolidate in practice 📌 knowledges received on this course, we together 🤝 developed graduation project

Проект сайту "Filmoteka" Привіт! ?? Ми студенти групи під назвою "Special-Team" академії GоIT ?? ?? Ми закінчили курс JavaScript і для того, щоб закрі

Oksana Banshchykova 12 Jan 3, 2023
Project developed as Capstone of Q4 Backend module of the Fullstack Developer Course of Kenzie Academy Brasil by the group @ezms, @Nafly09, @RafaelSchug, @victorlscherer, @Vinicius2m, @ManoelaCunha

✨ Quokka Services ✨ ?? Serviço rápido e sem preocupação! ?? O objetivo da nossa aplicação é diminuir a dificuldade que moradores de condomínios encont

Manoela Fernanda Girello Cunha 4 May 4, 2022
null 8 Nov 11, 2022
Finance-Tracker - A basic finance-tracker application built using Next.js, React Hooks and Context API

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind

Osemwengie Benjamin 1 Jan 2, 2022
Your personal budget tracking app.

Btracker Your personal budget tracking app. ?? Links Postman workspace Video Explanation Deployed Frontend Link Frontend Repository ?? Features Create

Fidal Mathew 2 Jan 29, 2022
Low-Budget Password Strength Estimation

_________________________________________________/\/\___________________ _/\/\/\/\/\__/\/\__/\/\____/\/\/\/\__/\/\__/\/\__/\/\________/\/\/\/\___ ____

Dropbox 13.6k Dec 31, 2022
This repository serves as a starter kit for doing simple TDD exercise

This repository serves as a starter kit for doing simple TDD exercise

adylanrff 3 Feb 19, 2022
This is an app developed in the Microverse course, it is a simple app used for developing a task list, using JavaScript modules and webpack

TODO LIST This is an app developed in the microverse course, developing a task list, using Javascript modules and webpack A simple app to help you man

JUSTINE IMASIKU 5 Jul 28, 2022
Developed using (HTML, CSS, Webpack, Vanilla.js)To-do list is a tool that helps you to organize your day

Developed using (HTML, CSS, Webpack, Vanilla.js)To-do list is a tool that helps you to organize your day. It lists the tasks that you need to do and allows you to mark them as complete. It was built as an introduction to web dev using ES6 and We…

Dagmawi zewdu 6 Mar 4, 2022