Javascript Project Tutorial: Budget App

[@SpiritualFacts]

freeCodeCamp is a true revolution!!

[@mr.penguin2054]

Yes

[@SergioLTorresPROGRAM]

I really swear this was like an 'INSANE MODE' not for the difficult, it is for the fluent and knowledge of the coder. Congrats!

[@awesome-view]

This is the video every beginner needs to start understanding DOM manipulation and how javascript works with HTML. This was all I needed when starting my career as a programmer. Thank you so much.💫💫💫💯💯

[@manuelramos5869]

And that´s why we use Angular/React/Vue/Svelte, etc... Anyhow is very good to be reminded of the laborious work that is regular JavaScript. Good little project!

[@erunurbekuulu3423]

I Love how John Smilga explains. Great👍👍🔥🔥🔥

[@FBHI]

Thanks for the tutorial!! Help me to learn how HTML/CSS interacts with JS! But forgetting or skipping the sum of the old budget with a new was a little disappointing hehe

[@darshankoshiya1835]

You guys always surprise me with this kinda incredible videos.... Keep Going...............

[@adrianwalker9917]

This is the first JS course I've seen with constructors & classes. I paused it so I can go watch another video to figure out what they are.

[@HashimWarren]

I love this project. Thanks for writing recording this

[@shubhambattoo1436]

Great tutorial mate. Loved it

[@keweml3544]

Another awesome tutorial by my favorite guy!

[@ochicoin]

I love your tutorials and courses

[@huynhhuunhan6318]

perfect project to learn js!! thanks

[@Feb16Arts]

You are so helpful to me. Thanks so much for this video. Thumbs up!

[@danielcliff3433]

Keep making videos its really helpful

[@mboed1011]

Thank you guys. It was very helpful.

[@trendingnow-i6l]

John Smilga coding addict I've got you

[@marcinantol4915]

if you add more to list, then the previously added items have not working icons, until you delete everything from the last added position till the item you want to remove/edit solved: -> delete line 113 in main.css : font-size: 2.6 rem

[@jaysonwonder6667]

The issues is that more then one expense in the list will break the edit and delete icon functionality. As a result it is not possible to make edits or delete items in the list except for the last item in the list. I think it is a CSS problem but not quite sure. My lack of understanding with what is going on with the Bootstrap & flex stuff I am struggling to fix this. It was reported in KZbin comments that this will fix the problem: delete line 113 in main.css : font-size: 2.6 rem This is not a solution it is more of a hack in my view, as it actually causes inconsistent fonts sizing between other elements in the UI. I am wondering if anyone has fixed this issue and I curious how they did fix it. If there are no fixes as of yet, can you as the project owner or any community member help us resolve this issue? Great teaching and thank you for your time.

[@dfjama]

This seems to be interesting, thanks for sharing with us...

[@hemendrasahu7943]

Thank you for this great tutorial

[@nila4452]

Teacher is coding addict guy!

[@DES2048]

Budget input field validation passes values consist with zeroes, like 0000, and finally we have $ 0000 in budget amount). May be you should fix it)? P.S. Thanks a lot for the lesson! it was very usefull for me!

[@abbysands9510]

I just find this course and I am the @32:56 minute and I am enjoying it if I am being honest. However, I have run into a couple of issues that have caused me to pause the recording and try to fix them because knowing those errors exist literally bugging me which means I cannot carry on lol. I ran into a couple of issues the first is the one you mentioned where you can pass in 0000 and it will still validate 2) the second issue is if the user enters an infinite number where the digits are well infinite so to speak and hits calculate then the number literally goes off the screen. If the user enters any number greater than 100000000 then it bleeds into the expenses field and the same happens to the expense field if it exceeds a certain range of digits where it then bleeds in the balance field. Fix 1 regarding the validation of 000 number was to add "=" sign inside the validation if statement. The original if-statement was only validating if the number was less than "0" and since "0" is not less than "0" it validates Original code: if (value === ' ' || value < 0) { perform some action ....... } Changed the code to if (value === ' ' || parseFloat(value)

[@mb-techmedia8494]

thanks for sharing the ideas.. it was very useful

[@zia44ful]

Awesome... Thanks a lot, keep up the good work.

[@iamfranchet167]

I needed this!!!

[@AirdropZone1]

Woow it's incredible and awesome video tutorial that helped me alot to learn thanks for the great input.

[@nagendra9092]

Even though I'm a beginner in Javascript, I understood this very well. Only thing is , I want to know how to add budget as it is the only constant element in the entire code. Will be helpful for me if adding budget option is also exists in the code

[@mr.technology5621]

25:38 You Can use Arrow Function To Avoid It !!

[@praf2]

Why not adding the eventListenters function directly as the callback to DOMContentLoaded event? It seems redundant the way it was called in the video.

[@charlievillarba5990]

Thanks for the tutorial

[@JosephEton]

Lovely. I was thinking if we can add export of the budget with options of excel, pdf etc to the project.

[@MuhammadAhmed-vi2xt]

just wow love you guys.

[@davidmclean3946]

Hi , did anyone else get up to the hour mark and I cant get my expense list and amount to show . I am not getting any console errors and the markup seems correct. anyone else have the same issue

[@RahulDas-cb2xe]

Another one.freecode the best!

[@antsmith3284]

Would it be possible to do an app like Venmo? If it's too complex, can you possibly do a simple version of it? I'm very curious to see how it works. Do you have something like this already?

[@DanielWeikert]

Thank you. Could you please elaborate why you used a class? Is this necessary, if so why?

[@quality.d.s]

This is syntatic sugar

[@amineouabbou6620]

hello men thanks for this amazing tutorial ca we remove the addExspense method and instead read the expenses list diretly from a method called "ListItems", since we already pushing object to the array this.itemList ?

[@srinaths284]

when I press the "add expense" button, the expense and expense amount is not displayed instead I get ${expense.title} ${expense.amount} as the display. I am not getting the expense name and expense amount somebody, please help

[@Goku64485]

this is not fair .U have to do full prject from start.

[@dariourdaneta5443]

what a cool landlord

[@niided]

The array reduce function keeps giving me Nan after the first input. Please check it.

[@mohattia]

How can I apply a localStorage for this project???

[@NullistEins]

Its not working on my desktop. Brackets always says expected an identifier and instead saw 'class.' class UI { Stopping. (0% scanned). class UI { ERROR: Parsing error: The keyword 'class' is reserved class UI { Can someone help me?

[@gustavomoncada5321]

Only 2 minutes in I already pressed like

[@saisreenivas2227]

Thank you

[@OsamaSayed1]

@coding Addict i cannot edit expense if there were more than one item how could i fix that .

[@AjayKumar-id7mb]

Code not working

[@nino12729]

hello, when he console.log(itemList) it doesnt work. He need the this keyword, but why we need this? why javascript cant find itemList?

[@createdbyjulius6133]

hi

[@bairi9608]

Put this .itemID++ . . . 👉 this.showBalance() In submitExpenseform()

[@vanguardsln]

Why You guys don't monetize the content. It will add some money to your great cause.

[@stasonnl777]

Maybe I missed something, but I do not understand where the data will be stored? Or database connection is not included in this tutorial?

[@funzone23446]

Yes

[@bcpi1328]

I think this is coder addict

[@gururajmoger8649]

Please make carousel with multiple images in box and pagination in JavaScript oops..

[@gururajmoger8649]

@Sam Finance Tech Yes we can..but I need to to go for es6.. please help me out..

[@JohnLee-xl2ut]

I can do that in c#. Is it just the same?

[@chinmayanand896]

There is a problem that we can not edit our budget!!!!! what if i want to add some more money to my budget just few minutes after then what...?? overall all is good but you could have done this then it might be more cool...!! But Thanks for the project... :)

[@Maaaaars]

meena chinmay create an edit component that handles the properties. It shouldn’t be that hard

[@chinmayanand896]

@@Maaaaars yes i am going to do that i know that it is not that hard to do, i was saying he could have done that nothing else... i know my friend that is so easy to do that i am gonna do that along with many new feature on this like save records and then make an average expenses and then i will try to predict future budget also. :)

[@douaa5448]

Thanks ✨✨✨

[@callmesenny5148]

someone tell me what i can do to learn these better should i code along or try after watching the full vid?

[@YungSchema]

hey does anyone know where i can find help with the css/html

[@dalemoayokunle7330]

if you mean the markup, it's in the github link in the description

[@tamannagoyal8953]

how you ran that js file on localhost could u please tell me please ?

[@Ali-lm7uw]

The local host has to be created.

[@davidmclean3946]

Hi , it will run in your browser . if you use vs code as a text editor and install live server from the extentions. once its installed , you can open your project go to your HTML5 file and right click it and select open file with live server

[@arthurshaidullin7981]

cool, thanks

[@photo5606]

How much we will get maximum

[@hernantanael5457]

Sir my request..inventory system tutorial boss for java.. thanks boss

[@jasamkiki13]

I get an error saying document is not defined, even when I define it globally: function eventListeners() { this.budgetForm = document.getElementById("budget-form"); this.expenseForm = document.getElementById("expense-form") this.expenseList = document.getElementById("expense-list"); const ui = new UI(); budgetForm.addEventListener("submit", function(event){ event.preventDefault(); }); expenseForm.addEventListener("submit", function(event){ event.preventDefault(); }); expenseList.addEventListener("click", function() {}); } document.addEventListener("DOMContentLoaded", function() { eventListeners(); })

[@BenMelluish]

"document" is a global variable pointing to the html node. It should be available in ALL in-browser contexts. Have you overwritten it somewhere? Are you running this code in your browser?

[@ravishankardas4856]

"Uncaught TypeError: event.target.parentElement.classList.contain is not a function" can anybody help me with this???

[@fabiozimmerman7598]

it's contains. You missed the letter 's'

[@nagendra9092]

Can anyone tell me why 'Parse' is used ?

[@drivenbycuriosity]

SOME ONE PLEASE HELP I have downloaded the files and tried to run the app. But, i am getting below 2 errors...😕 DevTools failed to load SourceMap: Could not load content for... 1)file:....js/@t: System error: net::ERR_FILE_NOT_FOUND 2)file:.....css/@t: System error: net::ERR_FILE_NOT_FOUND

[@jihenazzouz9210]

delete the comment in the last line of these two files

[@Ukiyo786]

how ui was made

[@albert405]

Hey, how to make this program that it will remember the balance and update it every time I use it?

[@Gymaddiction683]

learn database

[@rohitsanjay1]

How do I make this using Python?

[@AjayKumar-fd9mv]

👍👍👍

[@faisalmulya416]

I auto subs this channel

[@SoulPrints]

"I don't know what you're smoking but no way you're making that much money " :D :D

[@storyden5]

Please always make the video from scratch like traversy

[@aurelianspodarec2629]

This is from skratch. We are learning JS, not HTML/CSS. Please DO NOT do that. And I don't want to type 20 selectors either!

[@stevenjuwon6690]

Pls how can i add local storage

[@anonymousbot2829]

Hi great tutorial you missed this.itemId--

[@resultmarketing]

first like, then watch

[@UwaisChannel_]

anyone got this error "Cannot read property 'addEventListener' of null" in the app.js file "//expense click min: 15:01

[@cynthiarothschild1724]

Had same error, mispelled budget in const budgetForm = document.getElementById('budget-form');

[@umerhayyat7818]

it app for both android and ios ?

[@Александр-ы4в6к]

Супер!

[@tessaslife3444]

Can someone please walk me through how to open this file in VS code

[@davidmclean3946]

install live server on vs code , and after install , restart vs code , open your project and on the HTML5 document , right click and select open with live server .

[@ahmedadel7977]

python project please

[@freecodecamp]

There are some Python projects in this playlist: kzbin.info/www/bejne/qJfWlImJZdunmNk

[@YungSchema]

44:26

[@hyprtv2138]

After watching this video instead of paying 3 thousand i am paying THREE THOUSAND! ik i am a genius!

[@romarajak529]

Plzz call me in this number 7679233569

[@leogansallo-sadiq2864]

Hi, this is exactly what i needed. Thank you so much. But i need to add some features like login password and how to save for other person to view the expenses when logged in. Please reply. I need your response.

[@Sanjar50bay]

what kind of milk costs 3k $? ))))

[@unutulmaskunlar3907]

Zo'r

[@gooddev506]

I tried to run the code before building it.it won't run. i used the github source. why it won't calculate anything?

[@ziuhoque1532]

HOW TO MAKE bulk sms service for free

[@HimanshuKumar-xz5tk]

I hate this man, you didnt explain HTML, CSS.. I couldn't follow it.

[@Ali-lm7uw]

He used bootstrap to quickly make the UI, he concentrated on the JavaScript part for this video. Which part did you not understand?

[@HimanshuKumar-xz5tk]

@@Ali-lm7uw It just didn't feel right following the javascript without understanding HTML, CSS. Could have walked us through it. Just saying..

[@Ali-lm7uw]

@@HimanshuKumar-xz5tk he used used some bootstrap classes and a little bit of CSS for styling. Then he attached those html and css classes to JavaScript variables.

[@HimanshuKumar-xz5tk]

@@Ali-lm7uw Okay, will try to understand those HTML and css on my own

[@sul3y]

I love guys

[@sleaye]

Who? Milos patch?

[@flybon1097]

"I don't know what you're smoking, but you're not getting 7000 dollars" I laughed at that one Also not showing the htnl and css made this not worth my time

[@voiceofthetrue1849]

I don’t suggest anybody watch that terrible tut, especially for those whose a new with JavaScript. That’s not a good practice nor reusable code and full off side-effects.

[@vincent8938]

Then where can we find good tutorials ?

[@electronicheartbreak.]

Terrible voice

[@wookash_]

Maybe not voice, but he could swallow his saliva more often while speaking. It is so annoying and distracting especially when you watch this tutorial on headphones.

[@electronicheartbreak.]

@@wookash_ his what? If you check the discord bot tutorial on this channel and compare it with this video....

[@wookash_]

@@electronicheartbreak. saliva = spit ;-)

[@SMorgan716]

Everyones a critic...Simple solution..You make one then.

[@electronicheartbreak.]

@@SMorgan716 fix your grammar first. Why should I?

[@dipanshusabharwal]

Thank you