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

Net App Tutorial – JavaScript, Cell First, Accessibility, Persistent Knowledge, Sass

by



On this tutorial, we are going to construct a to-do checklist app with HTML, SASS / CSS, and Vanilla Javascript. Our to-do checklist internet app can be responsive with cellular first in thoughts. The to do checklist app will even be constructed with accessibility (A11y) in thoughts for keyboard navigation and display readers. We will even use the Net Storage API to create a persistent knowledge retailer so our checklist objects reappear any time we go to the net app.

📺 Tutorial by Dave Grey. Take a look at his YouTube Channel:
https://www.youtube.com/DaveGrayTeachesCode

⭐️ Course Contents ⭐️
⌨️ (0:04) Introduction / App Define
⌨️ (1:24) HTML basis
⌨️ (12:24) SASS / CSS types
⌨️ (50:05) JavaScript Lessons
⌨️ (57:25) JavaScript Capabilities
⌨️ (1:41:53) Testing the Accessibility options
⌨️ (1:45:56) Code clear up and enhancements for A11y
⌨️ (1:59:40) Testing the fixes & enhancements for the app
⌨️ (2:00:55) Wrap-up: How do you need to enhance the to do checklist app?

📚 Additional Studying:
🔗 Official SASS web site: https://sass-lang.com/information

✅ Observe Dave right here:
🔗 Twitter: https://twitter.com/yesdavidgray
🔗 Reddit: https://www.reddit.com/person/DaveOnEleven
🔗 LinkedIn: https://www.linkedin.com/in/davidagray

—

Study to code at no cost and get a developer job: https://www.freecodecamp.org

Learn a whole bunch of articles on programming: https://freecodecamp.org/information

source

36 thoughts on “Net App Tutorial – JavaScript, Cell First, Accessibility, Persistent Knowledge, Sass”

  4. 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 ?

    Reply

  7. This was a great and highly useful tutorial. Thanks for the hard work. That said, I imagine it would save people a lot of debugging and trouble shooting if the code was made available on github to reference.

    Reply

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

    Reply

  28. 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!

    Reply

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

    Reply

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

    Reply

Leave a Comment