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

In this tutorial, we will build a to-do list app with HTML, SASS / CSS, and Vanilla Javascript. Our to-do list web app will be responsive with mobile first in mind. The to do list app will also be built with accessibility (A11y) in mind for keyboard navigation and screen readers. We will also use the Web Storage API to create a persistent data store so our list items reappear any time we visit the web app.
📺 Tutorial by Dave Gray. Check out his KZbin Channel:
/ davegrayteachescode
⭐️ Course Contents ⭐️
⌨️ (0:04) Introduction / App Outline
⌨️ (1:24) HTML foundation
⌨️ (12:24) SASS / CSS styles
⌨️ (50:05) JavaScript Classes
⌨️ (57:25) JavaScript Functions
⌨️ (1:41:53) Testing the Accessibility features
⌨️ (1:45:56) Code clean up and enhancements for A11y
⌨️ (1:59:40) Testing the fixes & enhancements for the app
⌨️ (2:00:55) Wrap-up: How do you want to improve the to do list app?
📚 Further Reading:
🔗 Official SASS website: sass-lang.com/guide
✅ Follow Dave here:
🔗 Twitter: / yesdavidgray
🔗 Reddit: / daveoneleven
🔗 LinkedIn: / davidagray
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@stepanovps]

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

[@DaveGrayTeachesCode]

Thank you Petr!

[@anfilofiosantosfilho7792]

Great tutorial. Congratulations!

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

[@_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?

[@angeloramas3277]

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

[@DaveGrayTeachesCode]

Thank you!

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

[@019KADESH]

Guys we just definitively donate a little bit to Dave!

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

[@stevenmuncy491]

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

[@DaveGrayTeachesCode]

Thank you!

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

[@DevsLikeUs]

Great tutorial, thank you.

[@jadijohnson2899]

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

[@dennyluckes4783]

thank you, Dude!

[@chamocol3614]

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

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

[@moglimogify]

Good tutorial, thank you :)

[@caprioficial]

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

[@raz210]

learning to code and organise our work

[@redbullking9136]

Great video

[@Hey_Delight]

An awesome 2021 to all! 💥💫❄✨

[@hassaneoutouaya]

Thank you Mr !

[@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?

[@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?

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

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

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

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

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

[@kumarans9704]

Finally Snape was caught.

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

[@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 ?

[@shanthakobyan3578]

Like this video

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

[@weizhang2389]

John Wick teaches you how to code

[@DaveGrayTeachesCode]

Be nice to my dog :)

[@geekyaman3842]

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

[@duartelucas8129]

Where is that emulator on the right coming from?

[@DaveGrayTeachesCode]

Chrome Dev Tools

[@duartelucas8129]

@@DaveGrayTeachesCode Thanks!

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

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

[@swistek00]

someone have done and working code and can share? thanks

[@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?

[@thecscontent5110]

I also do videos about programming!😁

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

[@present1021]

Present sir

[@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_skyy_banerjee]

Vai, inlogon ko idea mato do 😂

[@NikhilVerma-jk9ng]

@@soumadip_skyy_banerjee sahi ma xD

[@soumadip_skyy_banerjee]

@@NikhilVerma-jk9ng hahaha

[@samcodes2912]

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

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

[@CJ-jt4bv]

john wick also known coding

[@saife2905]

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

[@pajeetsingh]

Badass Tattoo!

[@DaveGrayTeachesCode]

Thank you!

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

[@TheEnsonL]

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

[@boky7731]

34:03

[@randy6281]

The whole sass thing is not beginner friendly

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

[@GameMasters825]

Stop todo apps my god, thousands of todos apps

[@jadijohnson2899]

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

[@GameMasters825]

This guy like a rockstar not a dev, so weird

[@jadijohnson2899]

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

[@linus8976]

入れ墨怖い

[@jadijohnson2899]

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

[@firstnamelastname2922]

1st dislike

[@firstnamelastname2922]

@_Ryan_ style