Build a BUDGET TRACKER with JavaScript & Local Storage (No Frameworks)
Вставка
- Опубліковано 15 гру 2021
- In today's video we'll be building a Budget Tracker (or Planner) using HTML, CSS & JavaScript. This is easily done using JavaScript Classes and the Import/Export syntax.
Explore FusionCharts:
www.fusioncharts.com/?...
Thanks to FusionCharts for sponsoring today's video!
View the Code & GitHub Repository:
dcode.domenade.com/tutorials/...
🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
🎨 Download my VS Code theme - marketplace.visualstudio.com/...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript
Explore FusionCharts:
www.fusioncharts.com/?Leads%20Acquisition&
Thanks to FusionCharts for sponsoring today's video!
Just completed it by following along. It worked. Thank you. Thank you for the explanations of what the JavaScript was doing too.
What is the advantage of using this budget tracker?
Amazing tutorial, the logic involved in this project is complex because this is a real life app. You are an superb programming tutor. I will be doing a slightly modified version of this app, I want you to assist me.
Thank you veeeeeeery much.It really helped me because my next project is a budget tracker
I have found your videos helpful for my projects
Awesome Dom as always.
Thanks so much Sir your videos are awesome always
Great tutorial. Thank you.
Excellent tutorial..thank you very much
That's what I need to practice in a good way... use class and your coding made me feel flowing so smooth! Thank you for showing us your amazing coding. I am curious... do you have your tutorial about JS Object and Class in Udemy?
Thank you, please make some projects in typescript.
Yes
wow!
thanks, dude!
My ideia is to make a little budge an minimalist to keep on my background screen so I don't lose it or anything like that . It's easier to keep track of it and I'll practice my coding skills as well . I have no idea how this could be created but let's get into this journey , though .
Great tutorial. It's like a Mozilla page on JavaScript but understandable. Good on ya'
Thank you!
great stuff
Did something similar to this in my front end development class only it was a shopping list app and we had to use jquery as well which was interesting.
I intend doing a slightly similar project, I'll like you to help me. Thanks
Nice👍
This is great! I realized tho, this is pure vanilla javascript made like react 😅. I love it tho
Amazing tutorial, I guess you must be working as a real Web developer for a real company with real projects. Most of the javascript things on UA-cam don't touch this class pattern with the .root pattern and this level of logic implementation. Your videos must be watched from those who think that they can become web developers in three months... it's a massive wake up call.. well done again!
well yeah, thats me
Nice tutorial 😄
Glad you liked it!
Hi! Great !
But work only on local server, but not on a web server ( has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource)
Hi! Nice tutorial video, I'm new on your channel. Can you please share the vscode extension you use for list the html properties when using querySelector?
Nice tutorial, thanks ! How would you handle like premium content, for example: Free is limited to 3 table rows and premium could add more ? will you fetch database/user session role every time you click on add button (we are talking about SSR ? This would be a good tutorial :-)
I mean, you could give for premium users an account system and have them share the expenses through different places
I would fetch the user role once the user logs in and then check the role when the add button is clicked
Can you create the wordle app in js please. I like your style of teaching.
First off thanks for the excellent tutorial. It's got my mind whirring. In practice would you more likely use a database? You obviously wouldn't want each and every change event saving to the database (thrashing I think the term is), would you opt for de-bouncing or a different design? Would you think of using event delegation on a parent, rather than adding event listeners to each and every element or life's too short and keep it simple? Sorry for all the questions, personally I do tend to over engineer.
Oh just want to add intl.numberformat is a real discovery, thanks for that :)
Hey, you're welcome. Yeah you're right, in a real world example you would use a database on the server side. In terms of saving, you could still do it on every input field change, but simply make a HTTP request (AJAX/Fetch) detailing which row has changed and what data has changed in it - that can then be saved to the DB :)
enough hard for pre-intermediate students 🤔 at 22:11 was almost completely ununderstandable (but for me only)
could you show how to add a tax total with this? could be helpful for a budget for end of the year.
Sir please create some videos on creating own javascript framework like nextjs with cdn file
Could you turn it into a web component? ...that would be a great tutorial...
how did you setup local server there in visual studio code .. no output after cloning your code from Git
Can someone please explain me why he used a class for the whole code. What is the advantage of?
Hey Bro why do i get error message such as Failed to load resource: the server responded with a status of 404 (Not Found) the constructor did not go forward in the console.log(this.root) why bro
I follow this codes, but cannot run it because it has "addEventLishner is not a function " error. How fix it. Please help...
Sir your udemy not working
why total is not responding
pls reply
Why this.root and what is root
Nice thanks
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/Maher/Desktop/HTML+CSS%20+%20JavaS/KostenApp/JS/main.js. (Reason: CORS request not http).
but I have this problem how can I solve this please ?
Thank you veeeeeeery much.It really helped me because my next project is a budget tracker
Great tutorial, thank you