Web App Tutorial - JavaScript, Mobile First, Accessibility, Persistent Data, Sass
Вставка
- Опубліковано 11 лис 2020
- 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 UA-cam 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
Dave you're very humble and professional tutor. Love the video!
Thank you Petr!
Guys we just definitively donate a little bit to Dave!
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
Great info. So many tutorials only go halfway and leave out the accessibility polish. Thanks.
Thank you!
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?
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!
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.
Great tutorial. Congratulations!
Great video. You are a great teacher, thanks !!!
Thank you!
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, Dude!
Great tutorial, thank you.
Watch this video for javascript project ua-cam.com/video/-ZKwMlbyr48/v-deo.html
Gracias acá aprendí saas y me de javascript...🤝🏼
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
Thank you Mr !
Good tutorial, thank you :)
An awesome 2021 to all!
💥💫❄✨
learning to code and organise our work
excellent tutorial! i still dont have any clue bout what we did, but it worked! good starting point hahaha
saludos de chile!
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
Great video
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
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
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?
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?
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
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
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 ?
Finally Snape was caught.
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
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 🤔
51 ST LIKE HERE WE GO!! CAN WE GET A REACT NATIVE COURSE TOOOO!!! WAITING FOR IT
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
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
Where is that emulator on the right coming from?
Chrome Dev Tools
@@DaveGrayTeachesCode Thanks!
John Wick teaches you how to code
Be nice to my dog :)
Present sir
I also do videos about programming!😁
someone have done and working code and can share? thanks
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?
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.
34:03
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
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_skyy_banerjee sahi ma xD
@@NikhilVerma-jk9ng hahaha
haha. everybody deserve to learn how to code irrespective of financial condition
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!
john wick also known coding
Its to complicated ...there is functions inside functions like function hell
I mean this no offence, but are you secretly Matt Mercer?
How are you.
Watch this video for javascript project ua-cam.com/video/-ZKwMlbyr48/v-deo.html
The whole sass thing is not beginner friendly
Stop todo apps my god, thousands of todos apps
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.
入れ墨怖い
Watch this video for javascript project ua-cam.com/video/-ZKwMlbyr48/v-deo.html
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
This guy like a rockstar not a dev, so weird
Watch this video for javascript project ua-cam.com/video/-ZKwMlbyr48/v-deo.html
1st dislike
@_Ryan_ style