Build a BUDGET TRACKER with JavaScript & Local Storage (No Frameworks)

Подписаться 134 тыс.

Просмотров 26 тыс.

50% 1

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.fusionchar...
Thanks to FusionCharts for sponsoring today's video!
View the Code & GitHub Repository:
dcode.domenade...
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 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

Опубликовано:

8 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 48

@LeighRobinsonBushcraft 2 года назад

Just completed it by following along. It worked. Thank you. Thank you for the explanations of what the JavaScript was doing too.

@btsworld5984 8 месяцев назад

What is the advantage of using this budget tracker?

@sakshamkapoor5905 2 года назад

Thank you, please make some projects in typescript.

@chetana9802 2 года назад

Yes

@moonsun3658 5 месяцев назад

Excellent tutorial..thank you very much

@Thunder-tv2sm 2 года назад

Thank you veeeeeeery much.It really helped me because my next project is a budget tracker

@chigozieobialor1245 2 года назад

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.

@Bengadeer 2 года назад

Great tutorial. It's like a Mozilla page on JavaScript but understandable. Good on ya'

@matheusfelipe7318 2 года назад

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 .

@daniel_1523 2 года назад

I have found your videos helpful for my projects

@CreativeTutorialsWeb 2 года назад

Thanks so much Sir your videos are awesome always

@HiAmDerks Год назад

This is great! I realized tho, this is pure vanilla javascript made like react 😅. I love it tho

@criostasis 2 года назад

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.

@chigozieobialor1245 2 года назад

I intend doing a slightly similar project, I'll like you to help me. Thanks

@peshotod 2 года назад

Awesome Dom as always.

@viniciusm.m.7822 2 года назад

wow! thanks, dude!

@marcinzale 2 года назад

Great tutorial. Thank you.

@juguetestoys1137 2 года назад

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)

@сергаш 11 месяцев назад

enough hard for pre-intermediate students 🤔 at 22:11 was almost completely ununderstandable (but for me only)

@jfine24 2 года назад

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?

@alexandre3932 2 года назад

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 :-)

@vitorgouveia5378 2 года назад

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

@CodeCrafterOffical 3 месяца назад

Can someone please explain me why he used a class for the whole code. What is the advantage of?

@goffredo81 2 года назад

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 RU-vid 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!

@janardanbendale4068 Год назад

well yeah, thats me

@hassaneoutouaya 2 года назад

Thank you!

@logon2ksuresh 5 месяцев назад

how did you setup local server there in visual studio code .. no output after cloning your code from Git

@streamx2 2 года назад

Can you create the wordle app in js please. I like your style of teaching.

@drew1424 2 года назад

could you show how to add a tax total with this? could be helpful for a budget for end of the year.

@ManontheBroadcast Год назад

Could you turn it into a web component? ...that would be a great tutorial...

@shams12march 2 года назад

Sir please create some videos on creating own javascript framework like nextjs with cdn file

@semrana1986 2 года назад

great stuff

@Russ_Paul 2 года назад

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 :)

@dcode-software 2 года назад

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 :)

@fragon8597 Год назад

Nice tutorial 😄

@dcode-software Год назад

Glad you liked it!

@nilankapremarathna3555 Год назад

I follow this codes, but cannot run it because it has "addEventLishner is not a function " error. How fix it. Please help...

@mallusrgreat 2 года назад

Nice👍

@ErickHernandez-bo1lc 2 года назад

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?

@dcode-software 2 года назад

Explore FusionCharts: www.fusioncharts.com/?Leads%20Acquisition& Thanks to FusionCharts for sponsoring today's video!

@biigloosoftwaredata2470 2 года назад

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

@user-dg5zc8cu7d 9 месяцев назад

why total is not responding

@user-dg5zc8cu7d 9 месяцев назад

pls reply

@learningislife2934 2 года назад

Sir your udemy not working

@manojkumarmanu6907 2 года назад

Why this.root and what is root

@OMLO86 2 года назад

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 ?

@Thunder-tv2sm 2 года назад

Thank you veeeeeeery much.It really helped me because my next project is a budget tracker