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.💫💫💫💯💯
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!
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
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
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 TH-cam 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.
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
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!
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)
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
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
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?
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 ?
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?
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(); })
"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?
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
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
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... :)
@@mjohnson510 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. :)
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.
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 .
@@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.
"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
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.
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.
freeCodeCamp is a true revolution!!
Yes
I really swear this was like an 'INSANE MODE' not for the difficult, it is for the fluent and knowledge of the coder. Congrats!
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.💫💫💫💯💯
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!
I Love how John Smilga explains. Great👍👍🔥🔥🔥
You guys always surprise me with this kinda incredible videos.... Keep Going...............
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.
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
Great tutorial mate. Loved it
I love this project. Thanks for writing recording this
Another awesome tutorial by my favorite guy!
I love your tutorials and courses
perfect project to learn js!! thanks
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
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 TH-cam 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.
You are so helpful to me. Thanks so much for this video. Thumbs up!
John Smilga coding addict I've got you
Teacher is coding addict guy!
Keep making videos its really helpful
Thank you guys. It was very helpful.
Why not adding the eventListenters function directly as the callback to DOMContentLoaded event? It seems redundant the way it was called in the video.
Thank you for this great tutorial
25:38 You Can use Arrow Function To Avoid It !!
This seems to be interesting, thanks for sharing with us...
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
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!
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)
I needed this!!!
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
Awesome... Thanks a lot, keep up the good work.
thanks for sharing the ideas.. it was very useful
The array reduce function keeps giving me Nan after the first input. Please check it.
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
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?
Woow it's incredible and awesome video tutorial that helped me alot to learn thanks for the great input.
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 ?
what a cool landlord
just wow love you guys.
Lovely. I was thinking if we can add export of the budget with options of excel, pdf etc to the project.
Thanks for the tutorial
@coding Addict i cannot edit expense if there were more than one item how could i fix that .
How can I apply a localStorage for this project???
Another one.freecode the best!
Only 2 minutes in I already pressed like
I think this is coder addict
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?
Code not working
this is not fair .U have to do full prject from start.
Why You guys don't monetize the content. It will add some money to your great cause.
I can do that in c#. Is it just the same?
Thank you. Could you please elaborate why you used a class? Is this necessary, if so why?
This is syntatic sugar
Can anyone tell me why 'Parse' is used ?
hello,
when he console.log(itemList) it doesnt work. He need the this keyword, but why we need this? why javascript cant find itemList?
hi
Put
this .itemID++
.
.
.
👉 this.showBalance()
In submitExpenseform()
someone tell me what i can do to learn these better
should i code along or try after watching the full vid?
hey does anyone know where i can find help with the css/html
if you mean the markup, it's in the github link in the description
Maybe I missed something, but I do not understand where the data will be stored? Or database connection is not included in this tutorial?
Yes
Thank you
"Uncaught TypeError: event.target.parentElement.classList.contain is not a function" can anybody help me with this???
it's contains. You missed the letter 's'
How do I make this using Python?
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();
})
"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?
How much we will get maximum
how ui was made
how you ran that js file on localhost could u please tell me please ?
The local host has to be created.
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
Hey, how to make this program that it will remember the balance and update it every time I use it?
learn database
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
delete the comment in the last line of these two files
Thanks ✨✨✨
anyone got this error "Cannot read property 'addEventListener' of null" in the app.js file "//expense click
min: 15:01
Had same error, mispelled budget in const budgetForm = document.getElementById('budget-form');
Please make carousel with multiple images in box and pagination in JavaScript oops..
@Sam Finance Tech
Yes we can..but I need to to go for es6.. please help me out..
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... :)
meena chinmay create an edit component that handles the properties. It shouldn’t be that hard
@@mjohnson510 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. :)
Pls how can i add local storage
it app for both android and ios ?
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.
Sir my request..inventory system tutorial boss for java.. thanks boss
cool, thanks
44:26
Please always make the video from scratch like traversy
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!
👍👍👍
I auto subs this channel
Can someone please walk me through how to open this file in VS code
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 .
"I don't know what you're smoking but no way you're making that much money " :D :D
first like, then watch
After watching this video instead of paying 3 thousand i am paying THREE THOUSAND! ik i am a genius!
Plzz call me in this number 7679233569
Hi great tutorial
you missed this.itemId--
I tried to run the code before building it.it won't run.
i used the github source. why it won't calculate anything?
Супер!
python project please
There are some Python projects in this playlist: th-cam.com/video/rfscVS0vtbw/w-d-xo.html
what kind of milk costs 3k $? ))))
Zo'r
I love guys
Who? Milos patch?
I hate this man, you didnt explain HTML, CSS.. I couldn't follow it.
He used bootstrap to quickly make the UI, he concentrated on the JavaScript part for this video. Which part did you not understand?
@@Ali-lm7uw It just didn't feel right following the javascript without understanding HTML, CSS. Could have walked us through it. Just saying..
@@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.
@@Ali-lm7uw Okay, will try to understand those HTML and css on my own
"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
HOW TO MAKE bulk sms service for free
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.
Then where can we find good tutorials ?
Terrible voice
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.
@@wookash_ his what? If you check the discord bot tutorial on this channel and compare it with this video....
@@electronicheartbreak. saliva = spit ;-)
Everyones a critic...Simple solution..You make one then.
@@SMorgan716 fix your grammar first. Why should I?
Thank you