Hosted Project
JavaScript Budget App Project (Hosted on GitHub Pages)
Source Files
https://github.com/JS-Beginners/budget-oop-project (Hosted on Github)
Project Objective
The objective of this JavaScript budget app project is to use JavaScript OOP. It takes a budget and expenses and provides a running balance.
Just like the previous two OOP projects, here and here, this project can easily be created without OOP, but because the code solution at my repository (and in John's course) uses OOP, I'd consider this, too, an intermediate JavaScript project.
The entire solution is wrapped into a JavaScript Class, a function that handles the event listeners, and the even listener function invocation.
JavaScript Used
- Object Oriented JavaScript
- JavaScript Class Object
- JavaScript Constructor Functions
- JavaScript Prototypal Inheritance
- JavaScript CSS Manipulation
- JavaScript DOM Manipulation
My Personalize Summary
Today's project was pretty neat. I liked seeing it come together. I watched John's solution, as opposed to trying to build it myself. Having put together the last 30 or so projects from scratch on this site, I'm now back in learning mode.
So, instead of building projects that use OOP at this point, I'm simply learning as much as I can about it.
I have a few more course sections of multiple courses and a few more sections of some books that I'm reading before I dive right into building my own OOP projects (or attempting to redo these). What's most important for me at this time is learning the syntax and the use cases of building applications with JavaScript OOP .
New Things Learned or Refreshed
It was good to see exactly how JavaScript Classes can be used in a real world application. Having watched three projects that all used OOP, I am much more comfortable with the syntax and its use. I am confident that I can complete this project using JavaScript OOP on my own, given a few hours.
Time to Code
This project took me about 3 hours to watch, including the breaks that I took in between watching it. It took John an hour and a half to code only the JavaScript portion. He provides the HTML and CSS assets.
Your Turn!
What To Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
app.jsfile. - Implement the JavaScript code in your own
app.js file. - If you think you need to see a video solution first, be sure to pick up John Smilga's JavaScript Tutorial and Projects Course.
- Add a link to your finished project below!
What You Should See
Visit the hosted github page to see this JavaScript Budget Application Project in action.
Awesome project, as a js beginner it took me awhile to figure everything out.
I did it without any classes or constructions function, do you reckon it’s not a good idea to do it in the way i did it?
https://codepen.io/VinyZiks/pen/qBEzwBX
Hmm… I don’t know. I was always taught that there is the right way, and then there is the optimized solution. As a beginner, I’ll stick with the right way.
This is a great project, and very well done. I’ll be using this one with my students. My only advice might be to add the option to work these variables into memory on input, and keep them cached. This way, on refresh, the entire budget doesn’t disappear. This would be useful and create a real-life application where a user doesn’t have to worry about the data going away.
Thouhts?
Hmm… I suppose a quick and easy add would be to use JavaScript’s localStorage functions. Then, as long as they are using the same computer the data won’t go away. I’m glad you liked this project. 🙂
When multiple expense items are added i.e more than one . Only the bottom one is editable . The others are not editable .
Can anyone please explain ???????