At first I was confused what such a simple app is doing so deep into the Learning Path Playlist. But now that I'm almost finished, I gotta say it's a great look into professional workflow, and how to maintain readability/maintainability of the code base, by breaking everything into corresponding components. Good stuff.
This is a great example of splitting the functions up so its cleaner but feel it's N overkill for this type of app and could be coded much simpler. Just my opinion but I do love the way he shows us how to code a class based structure
Awesome video Dave, greatly explained everything, haven't really seen someone using javascript this good, like creating classes and reusable functions...really really liked your content💖
a quick question. at 37:53 we could have used display: none; on the label element instead of moving it away from the screen, why didn't we do that? Is that because display: none; affects accessibility?? or just a choice?
Fantastic. Thank you. The javascript itself is a bit beyond my skill level at this point. What I would love to add is sub-items. No idea how I would go about that. A few things didn't work for me on my pc setup. It might be because I am in Linux instead of Windows. - Firefox did not display the styled checkboxes (just the default look). The styled checkboxes displayed correctly in other browsers. - Installing the Chrome Vox extension in Chromium, the voice (oddly, as it seems to be the point of the extension) did not work. Just got sounds on clicking tabs, etc. - Could not find the Live Sass Compliler in the vs code extensions on the vs code version I have installed. However, I already had Sass on my system previously, and just manually (command line) started the sass watch command.
I feel like tutorials never express the importance of security anytime you add something to your webpage or app that has an “input”, “form”. That opens up the gateway for nefarious people to input there malicious code..so always be cautious. And er on the side of caution/safety when using forms.
Hi, Dave. Thx a lot for the awesome tutorial. I use the same extensions for VS like you introduced. But by me the viarables are white not color. also some key words like document, localStorage, event are white. Do you know what's the reason for it? Because i get a problem by doing the same as you. so maybe something is wrong. can you give some advice? the second question is why do you underscores by using this. thx
Would have been useful, but for some reason not reading the javascript. Using VS Code, nothing in the comments, no console, no network issues, total silence and yet it won't work. I have checked the code for errors, found some typos but fixed them. Good video though, excellent with explanations.
Hi Dash, if you import modules like I did in the video, you need to run a local dev server like the Live Server extension. JS modules won't work if you just load files directly into the browser. Your script tag also needs type=module. This is just my best guess as to why your browser may not be reading all of the JS.
Hello Dave , thanx for the great work we do really appreciate your insightfull tutorials like this one, however, i have encoutered an error in main.js @add listeners, the compiling returns with an UncaughtType errorr of cannot read property addEventListener to null const itemEntryForm = document.getElementById("itemEntryForm"); ------------> itemEntryForm.addEventListener("submit", (event) =>{ event.preventDefault(); processSubmission(); }); could you please enlighten me or anyone on this forum how to rectify this ?
Hi Melanie. You might try restarting VS Code after installing the extension. I don't think that is required, but if you have installed the extension and you don't see the settings, it is worth trying. I display the settings at the 16:00 minute mark of the video.
45:23 anyone else having trouble with the scss here? flex just lined everything up in a row for this container instead of having the title/button, hr, list in a column
@@samcodes2912 No need. I can do that in less than 2 hours from scratch. I was just curious if he used cookies or not for that. It may be interesting to watch but I prefer to do something else with my time.
Hey Dave I am getting error message in chrome where it says Acess to script at main.js from index.html:1 origin 'null' has been blocked by CORS policy.
You must run a local dev server like the Live Server extension to use JS modules. I'm guessing that is the reason for the CORS error. You must also have type="module" in your script tag.
If you look under free courses in the Udacity course catalog, there is a short course. Also, Rob Dodson (a Google Dev Advocate) has a good playlist on YT called A11ycasts.
Thanks for the tutorial! I had 2 issues at the end that I can't figure out my problem. I have triple checked every single line comparing main.js to my VS Code and I'm 99% sure they are identical. 1. My clear button does not clear my list when I click on it. 2. The very last function updateScreenReaderConfirmation displays a message on my screen "eggs removed from list" instead of having the voice work. Any tips in the right direction would be appreciated!
Hi, without seeing your code, I cannot help much. The clear button code does work. I'd suggest comparing that section of your code to the video again. The very last function should be updating a paragraph element that is styled to display offscreen. If it appears onscreen, you are missing that styling.
@个人开发小程序、app、公众号、业务系统 There are a bunch of them. If he really wanted to learn something this would have already happened. He is just a lazy dude with a low IQ.
Dave you're very humble and professional tutor. Love the video!
Thank you Petr!
At first I was confused what such a simple app is doing so deep into the Learning Path Playlist. But now that I'm almost finished, I gotta say it's a great look into professional workflow, and how to maintain readability/maintainability of the code base, by breaking everything into corresponding components. Good stuff.
Guys we just definitively donate a little bit to Dave!
Great info. So many tutorials only go halfway and leave out the accessibility polish. Thanks.
Thank you!
learning to code and organise our work
Completed this beautiful project ( my first) . Learned alot .
Love from 🇮🇳.
if u completed it and it works can I see your code please ? I have a problem I can't solve
@@amirfal950 What's your problem?
Thanks for the help I am definitely going to use this to make my Smurf Village with this
Hello let’s make a community in my comments reply’s
@@pariahsgrit great idea
great idea
My reply is the most liked I’m pretty sure
Thank you for this video, how can I make this into drive mobile device local storage so it does not matter which browser is selected?
Completed successfully ✅ learned a lot from this 🎉
if u completed it and it works can I see your code please ? I have a problem I can't solve
This is a great example of splitting the functions up so its cleaner but feel it's N overkill for this type of app and could be coded much simpler. Just my opinion but I do love the way he shows us how to code a class based structure
You are actually right. It's an over kill
Awesome video Dave, greatly explained everything, haven't really seen someone using javascript this good, like creating classes and reusable functions...really really liked your content💖
Thank you!
Hi Dave, for the improvement, i would like to fix a overflow issue as when i try to add a long item, it gets overflowed from the section
excellent tutorial! i still dont have any clue bout what we did, but it worked! good starting point hahaha
saludos de chile!
Gracias acá aprendí saas y me de javascript...🤝🏼
Great video. You are a great teacher, thanks !!!
Thank you!
Great tutorial, thank you.
Watch this video for javascript project ua-cam.com/video/-ZKwMlbyr48/v-deo.html
Great tutorial. Congratulations!
This is a great tutorial. Thank you for the fantasctic work!
You're welcome!
Watch this video for javascript project ua-cam.com/video/-ZKwMlbyr48/v-deo.html
Thank you Mr !
a quick question. at 37:53 we could have used display: none; on the label element instead of moving it away from the screen, why didn't we do that? Is that because display: none; affects accessibility?? or just a choice?
An awesome 2021 to all!
💥💫❄✨
thank you, Dude!
Fantastic. Thank you. The javascript itself is a bit beyond my skill level at this point. What I would love to add is sub-items. No idea how I would go about that.
A few things didn't work for me on my pc setup. It might be because I am in Linux instead of Windows.
- Firefox did not display the styled checkboxes (just the default look). The styled checkboxes displayed correctly in other browsers.
- Installing the Chrome Vox extension in Chromium, the voice (oddly, as it seems to be the point of the extension) did not work. Just got sounds on clicking tabs, etc.
- Could not find the Live Sass Compliler in the vs code extensions on the vs code version I have installed. However, I already had Sass on my system previously, and just manually (command line) started the sass watch command.
Watch this video for javascript project ua-cam.com/video/-ZKwMlbyr48/v-deo.html
I feel like tutorials never express the importance of security anytime you add something to your webpage or app that has an “input”, “form”. That opens up the gateway for nefarious people to input there malicious code..so always be cautious. And er on the side of caution/safety when using forms.
Good tutorial, thank you :)
Great video
How different is the event "readystatechange" coded for the App Launch from "DOMContentLoaded"?
Good question. There are comparison examples here: developer.mozilla.org/en-US/docs/Web/API/Document/readyState
Awesome
Is there a repository or somthing to check the code? I am following the tutorial yet I messed up in something and my app doesn't work
Hi, Dave. Thx a lot for the awesome tutorial. I use the same extensions for VS like you introduced. But by me the viarables are white not color. also some key words like document, localStorage, event are white. Do you know what's the reason for it? Because i get a problem by doing the same as you. so maybe something is wrong. can you give some advice? the second question is why do you underscores by using this. thx
Watch this video for javascript project ua-cam.com/video/-ZKwMlbyr48/v-deo.html
Finally Snape was caught.
Would have been useful, but for some reason not reading the javascript. Using VS Code, nothing in the comments, no console, no network issues, total silence and yet it won't work. I have checked the code for errors, found some typos but fixed them. Good video though, excellent with explanations.
Hi Dash, if you import modules like I did in the video, you need to run a local dev server like the Live Server extension. JS modules won't work if you just load files directly into the browser. Your script tag also needs type=module. This is just my best guess as to why your browser may not be reading all of the JS.
Watch this video for javascript project ua-cam.com/video/-ZKwMlbyr48/v-deo.html
@@DaveGrayTeachesCode @sovereignlivingsoul I have this issue also. did you work out a solution?
Hello Dave , thanx for the great work we do really appreciate your insightfull tutorials like this one, however, i have encoutered an error in main.js @add listeners, the compiling returns with an UncaughtType errorr of
cannot read property addEventListener to null
const itemEntryForm = document.getElementById("itemEntryForm");
------------> itemEntryForm.addEventListener("submit", (event) =>{
event.preventDefault();
processSubmission();
});
could you please enlighten me or anyone on this forum how to rectify this ?
Like this video
Hi I have added in 'live sass' and checked the settings but there are none for it !!!! Am I missing something ?
Hi Melanie. You might try restarting VS Code after installing the extension. I don't think that is required, but if you have installed the extension and you don't see the settings, it is worth trying. I display the settings at the 16:00 minute mark of the video.
@@DaveGrayTeachesCode Thanks seems to be there now. I wanted a dist folder in my project folder but it kept creating it higher up in the structure !!
@@DaveGrayTeachesCode Also do you have a copy of the finished code, mine is not working and I need to compare to see where I went wrong 🤔
45:23 anyone else having trouble with the scss here? flex just lined everything up in a row for this container instead of having the title/button, hr, list in a column
nvm figured it out. messed up the div tags for those items.
Hello am having the same problem here how we're you able to fix it
I can't stay 2 hours here. Where did he stored the data? Cookie blocks?
tell me too :)
localStorage
why?
@@samcodes2912 No need. I can do that in less than 2 hours from scratch. I was just curious if he used cookies or not for that. It may be interesting to watch but I prefer to do something else with my time.
@@bestopinion9257 yes you are correct that you can do this in even less than 1 hour ...but the way he code was really really good.
Hey Dave I am getting error message in chrome where it says Acess to script at main.js from index.html:1 origin 'null' has been blocked by CORS policy.
You must run a local dev server like the Live Server extension to use JS modules. I'm guessing that is the reason for the CORS error. You must also have type="module" in your script tag.
@@DaveGrayTeachesCode Still I am getting this error. Need help
damn you guys really after paid courses !but thanks for that free knowledge tho i am paying for internet tho (hope it make sence )
Vai, inlogon ko idea mato do 😂
@@soumadip_banerjee sahi ma xD
@@NikhilVerma-jk9ng hahaha
haha. everybody deserve to learn how to code irrespective of financial condition
Is there a full course on Accessibility?
If you look under free courses in the Udacity course catalog, there is a short course. Also, Rob Dodson (a Google Dev Advocate) has a good playlist on YT called A11ycasts.
@@DaveGrayTeachesCode Awesome. Thank you!
Watch this video for javascript project ua-cam.com/video/-ZKwMlbyr48/v-deo.html
51 ST LIKE HERE WE GO!! CAN WE GET A REACT NATIVE COURSE TOOOO!!! WAITING FOR IT
John Wick teaches you how to code
Be nice to my dog :)
Present sir
Its to complicated ...there is functions inside functions like function hell
Thanks for the tutorial! I had 2 issues at the end that I can't figure out my problem. I have triple checked every single line comparing main.js to my VS Code and I'm 99% sure they are identical.
1. My clear button does not clear my list when I click on it.
2. The very last function updateScreenReaderConfirmation displays a message on my screen "eggs removed from list" instead of having the voice work.
Any tips in the right direction would be appreciated!
Hi, without seeing your code, I cannot help much. The clear button code does work. I'd suggest comparing that section of your code to the video again. The very last function should be updating a paragraph element that is styled to display offscreen. If it appears onscreen, you are missing that styling.
Watch this video for javascript project ua-cam.com/video/-ZKwMlbyr48/v-deo.html
Where is that emulator on the right coming from?
Chrome Dev Tools
@@DaveGrayTeachesCode Thanks!
john wick also known coding
We want reactnative tutorials
there are a bunch of them already
@个人开发小程序、app、公众号、业务系统 There are a bunch of them. If he really wanted to learn something this would have already happened. He is just a lazy dude with a low IQ.
JavaScript pro?
@@aammssaamm dude chill out
@@sandrat9309 get lost
Badass Tattoo!
Thank you!
I mean this no offence, but are you secretly Matt Mercer?
I also do videos about programming!😁
The whole sass thing is not beginner friendly
34:03
someone have done and working code and can share? thanks
How are you.
Watch this video for javascript project ua-cam.com/video/-ZKwMlbyr48/v-deo.html
Java vs javascript
Which is better??
are you stupid?
Car vs Carpet. Big difference.
@@cience yes
@@kevyyar oh really i do not knew that
Depends on what you need to do.
wasted half a day w/ this tut. because i use atom and can't link the compiled css the way he does w/ vscode
plonk
入れ墨怖い
Watch this video for javascript project ua-cam.com/video/-ZKwMlbyr48/v-deo.html
1st dislike
@_Ryan_ style