Web App Tutorial - JavaScript, Mobile First, Accessibility, Persistent Data, Sass

[@stepanovps]

Dave you're very humble and professional tutor. Love the video!

[@DaveGrayTeachesCode]

Thank you Petr!

[@Saurus990]

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.

[@019KADESH]

Guys we just definitively donate a little bit to Dave!

[@stevenmuncy491]

Great info. So many tutorials only go halfway and leave out the accessibility polish. Thanks.

[@DaveGrayTeachesCode]

Thank you!

[@_ShuvamKumar_CseB]

Completed this beautiful project ( my first) . Learned alot . Love from 🇮🇳.

[@amirfal950]

if u completed it and it works can I see your code please ? I have a problem I can't solve

[@_ShuvamKumar_CseB]

@@amirfal950 What's your problem?

[@papasmurf5042]

Thanks for the help I am definitely going to use this to make my Smurf Village with this

[@papasmurf5042]

Hello let’s make a community in my comments reply’s

[@papasmurf5042]

@@pariahsgrit great idea

[@samcodes2912]

great idea

[@papasmurf5042]

My reply is the most liked I’m pretty sure

[@ankitnegi132]

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💖

[@DaveGrayTeachesCode]

Thank you!

[@raz210]

learning to code and organise our work

[@raj080288]

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

[@harrisonofordu4222]

You are actually right. It's an over kill

[@KiranNaragam]

Completed successfully ✅ learned a lot from this 🎉

[@amirfal950]

if u completed it and it works can I see your code please ? I have a problem I can't solve

[@caprioficial]

excellent tutorial! i still dont have any clue bout what we did, but it worked! good starting point hahaha saludos de chile!

[@DevsLikeUs]

Great tutorial, thank you.

[@jadijohnson2899]

Watch this video for javascript project kzbin.info/www/bejne/Y4uuqICil96lapo

[@chamocol3614]

Gracias acá aprendí saas y me de javascript...🤝🏼

[@arpro3038]

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?

[@Brawlstriker89]

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.

[@stergiosk6064]

This is a great tutorial. Thank you for the fantasctic work!

[@DaveGrayTeachesCode]

You're welcome!

[@jadijohnson2899]

Watch this video for javascript project kzbin.info/www/bejne/Y4uuqICil96lapo

[@anfilofiosantosfilho7792]

Great tutorial. Congratulations!

[@angeloramas3277]

Great video. You are a great teacher, thanks !!!

[@DaveGrayTeachesCode]

Thank you!

[@Hey_Delight]

An awesome 2021 to all! 💥💫❄✨

[@Shorts_In_Islam]

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

[@ButImFeelingMuchBetterNow]

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.

[@jadijohnson2899]

Watch this video for javascript project kzbin.info/www/bejne/Y4uuqICil96lapo

[@redbullking9136]

Great video

[@hassaneoutouaya]

Thank you Mr !

[@kumarans9704]

Finally Snape was caught.

[@moglimogify]

Good tutorial, thank you :)

[@dennyluckes4783]

thank you, Dude!

[@Knochen41]

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

[@jadijohnson2899]

Watch this video for javascript project kzbin.info/www/bejne/Y4uuqICil96lapo

[@ismailmega]

Awesome

[@vigilanteer]

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?

[@RodrigoMendoza7]

How different is the event "readystatechange" coded for the App Launch from "DOMContentLoaded"?

[@DaveGrayTeachesCode]

Good question. There are comparison examples here: developer.mozilla.org/en-US/docs/Web/API/Document/readyState

[@geekyaman3842]

51 ST LIKE HERE WE GO!! CAN WE GET A REACT NATIVE COURSE TOOOO!!! WAITING FOR IT

[@sovereignlivingsoul]

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.

[@DaveGrayTeachesCode]

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.

[@jadijohnson2899]

Watch this video for javascript project kzbin.info/www/bejne/Y4uuqICil96lapo

[@lukebriggs157]

@@DaveGrayTeachesCode @sovereignlivingsoul I have this issue also. did you work out a solution?

[@rochijacob2196]

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

[@weizhang2389]

John Wick teaches you how to code

[@DaveGrayTeachesCode]

Be nice to my dog :)

[@jacob.peters]

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

[@jacob.peters]

nvm figured it out. messed up the div tags for those items.

[@canhamzacode]

Hello am having the same problem here how we're you able to fix it

[@NikhilVerma-jk9ng]

damn you guys really after paid courses !but thanks for that free knowledge tho i am paying for internet tho (hope it make sence )

[@soumadip_banerjee]

Vai, inlogon ko idea mato do 😂

[@NikhilVerma-jk9ng]

@@soumadip_banerjee sahi ma xD

[@soumadip_banerjee]

@@NikhilVerma-jk9ng hahaha

[@samcodes2912]

haha. everybody deserve to learn how to code irrespective of financial condition

[@bestopinion9257]

I can't stay 2 hours here. Where did he stored the data? Cookie blocks?

[@kaustubh.sharma]

tell me too :)

[@ankitnegi132]

localStorage

[@samcodes2912]

why?

[@bestopinion9257]

@@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.

[@ankitnegi132]

@@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.

[@oumarsekisinde797]

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 ?

[@mwill152]

Hi I have added in 'live sass' and checked the settings but there are none for it !!!! Am I missing something ?

[@DaveGrayTeachesCode]

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.

[@mwill152]

@@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 !!

[@mwill152]

@@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 🤔

[@saife2905]

Its to complicated ...there is functions inside functions like function hell

[@CJ-jt4bv]

john wick also known coding

[@shanthakobyan3578]

Like this video

[@abhigedam89]

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.

[@DaveGrayTeachesCode]

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.

[@danielremijes4873]

@@DaveGrayTeachesCode Still I am getting this error. Need help

[@present1021]

Present sir

[@kirarevcrow]

We want reactnative tutorials

[@aammssaamm]

there are a bunch of them already

[@aammssaamm]

@个人开发小程序、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.

[@samcodes2912]

JavaScript pro?

[@sandrat9309]

@@aammssaamm dude chill out

[@aammssaamm]

@@sandrat9309 get lost

[@thecscontent5110]

I also do videos about programming!😁

[@RodrigoMendoza7]

Is there a full course on Accessibility?

[@DaveGrayTeachesCode]

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.

[@RodrigoMendoza7]

@@DaveGrayTeachesCode Awesome. Thank you!

[@jadijohnson2899]

Watch this video for javascript project kzbin.info/www/bejne/Y4uuqICil96lapo

[@boky7731]

34:03

[@TheEnsonL]

I mean this no offence, but are you secretly Matt Mercer?

[@duartelucas8129]

Where is that emulator on the right coming from?

[@DaveGrayTeachesCode]

Chrome Dev Tools

[@duartelucas8129]

@@DaveGrayTeachesCode Thanks!

[@randy6281]

The whole sass thing is not beginner friendly

[@salgorogaztec8846]

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!

[@DaveGrayTeachesCode]

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.

[@jadijohnson2899]

Watch this video for javascript project kzbin.info/www/bejne/Y4uuqICil96lapo

[@swistek00]

someone have done and working code and can share? thanks

[@pajeetsingh]

Badass Tattoo!

[@DaveGrayTeachesCode]

Thank you!

[@itreportcambodia8283]

How are you.

[@jadijohnson2899]

Watch this video for javascript project kzbin.info/www/bejne/Y4uuqICil96lapo

[@doroxfox6524]

Java vs javascript Which is better??

[@cience]

are you stupid?

[@kevyyar]

Car vs Carpet. Big difference.

[@doroxfox6524]

@@cience yes

[@doroxfox6524]

@@kevyyar oh really i do not knew that

[@aammssaamm]

Depends on what you need to do.

[@markdraper1793]

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

[@linus8976]

入れ墨怖い

[@jadijohnson2899]

Watch this video for javascript project kzbin.info/www/bejne/Y4uuqICil96lapo

[@firstnamelastname2922]

1st dislike

[@firstnamelastname2922]

@_Ryan_ style