I enhanced the W3Schools To Do List Example

[kendawson]

I really liked the To Do List example found on W3Schools here:

https://www.w3schools.com/howto/howto_js_todolist.asp

I enhanced it by adding some new features:

• Save data to local storage in JSON format
• Allows users to backup their data (Import/Export JSON files)
• Allows users to edit & delete To Do List items
• Customizable List Name
• Customizable key name for local storage
• Customizable dates (locale setting)
• Built-in sample data which doubles as a help tutorial
• Supports URL parameters (e.g. index.html?foo=bar) even though it's not currently used in my app
• Uses Bootstrap for styling and icons and SortableJS for drag-and-drop sorting
• Responsive design for mobile devices 

You can view an online example of the app here: https://kendawson.online/list/

I also uploaded a copy to my W3Schools Spaces here: https://kendawson.w3spaces.com 

You can download source code from Github here: https://github.com/kendawson-online/todo/

Released under the MIT License. 

Feel free to use however you want. Feedback / bug-reports are appreciated.

I have only tested on Windows 10 on Desktop / Laptop devices and also on Tablet / Phones running Android.

If you want to report any bugs, please let me know which versions / OS / devices you're running on.

[Ilan]

Hey there!

I just joined today. I'm learning web-dev (front-end).

First, a big thank you for providing your code as an educational resource for others. I have studied it. It is the most lengthy of all that I have seen so far. However, it is also the most cleanly written and coz of GitHub's code rendering, it gets even more comfortable to read and analyze. How long did it take u to be able to write it all on your own ?

Someone suggested I should start with a To-Do list after some good understanding. In my estimate, I've completed overall 60% of HTML/CSS and JS general course outline (via several sources; W3, MDN and some books). I still find the code of To Do lists as way above my IQ. Perhaps the courses provided are aimed for beginner level understanding.

So, if u are still around in the forums, I may be asking a few questions regarding To Do lists. I hope u wont mind.

Starting with: What would u suggest to a beginner regarding To Do lists? Which specific topics in HTML/CSS/JS I need to study in more depth before giving it a try? Do we have to know each and every thing down to every detail, or do people just use drag/drop libraries or modules using various resource managers etc. In many examples I studied, the HTML+CSS gives no worries. But the difficulty of JS code used is just off the charts for me ... sometimes using external libraries, advanced web API, JSQuery and/or JSON and what not (I can't even recognize some code).

 

Thanks, see u around.

[kendawson]

Hi,

You're welcome. I'm glad that the code was helpful. I wrote this code over a period of a few weeks (on and off). I would just work on it a little at a time. I started by studying the To Do List on the W3 Schools example. I liked it a lot. But, I wanted to make some changes. So, I began by downloading their code and then adding my own functions to it to make it do the things I wanted to see. I have also been learning Bootstrap so it was a good chance for me to practice with that too (e.g. layout and modal windows).

I'm still around on the forums occasionally, but, I get busy with stuff. If you have any questions you can post them here and I'll try to help when I see it. Other people in the forum might chime in and help answer your questions too.

Javascript, like any other skill, is something you learn over time and build on. When you are studying math, you can't jump right into advanced level mathematics and expect to know how to do it. You start with the basics (addition, subtraction, multiplication) and work your way up slowly. Each concept you learn builds on the previous concepts you've learned. Believe it or not, I knew almost nothing about Javascript or front-end UI development 3 years ago. I decided I wanted to learn how to do it and have worked my way through all the HTML / Javascript / CSS lessons on W3 Schools. 

I think that the trick is to just do it. Start off with some sample code. Then, keep working on that sample code and changing it until you get it to do what you want. Studying text lessons is great for overall knowledge and understanding. But, until you get your hands dirty and dive into the code, it won't make any sense. Once you start writing the code then the things you've read will make sense. "OH! So, that's why I can't do it this way! I get it now!"

I am one of those people who is very anti-library and anti-framework. I don't really use Node.js or external 3rd party libraries. I try to do everything in HTML with vanilla Javascript. But, as I have gotten more advanced in my coding, I can see how certain things save time. (Example: Jquery, or Bootstrap, or 3rd party libraries like "Sortable.js"). I started writing the drag-and-drop functionality in my To Do List so that it works on mobile. But, it was very complex and taking a lot of my time. I eventually decided to look and found that Sortable.js already existed and worked well. So, I implemented it into my To Do List rather than writing all the code myself from scratch.

But, try some ideas of your own! I would begin with the original example from here:

https://www.w3schools.com/howto/howto_js_todolist.asp

Make sure you understand how it's working. And what's going on with the code. 

Then, after you understand that, you can expand your knowledge to focus on things like "reading / writing to local storage", "working with JSON data", etc.

I would start with one feature at a time though. Pick something you want the To Do List to do. (Example: "I want to be able to have categories for my To Do items")

Then, start with the original HTML / Javascript / CSS and try to add that one feature. If you can do that, then you can add other features. 

But, just try to break it down to smaller components and focus on one thing at a time. Don't get overwhelmed by looking at everything all at once. 

There are also great AI tools like https://perplexity.ai out there you can use to help you find resources. I like to use AI tools like this to prototype apps. I describe my idea to the AI tool which generates a basic framework to start from. Then, I expand and improve on the code. But, be careful, because AI tools are not "smart" nor do they really understand things. You have to know enough about HTML / Javascript / CSS to know when the AI tool is making a mistake (or suggesting something that won't work). Use logic and deductive reasoning on your own and don't rely on the AI tool to do all the work for you. If it says something wrong -- tell it that it's wrong and ask it to fix the problem. Using tools like this, I am able to quickly go from idea to working code. Then, I just keep refining and improving it. 

Also, DON'T FORGET TO MAKE BACKUPS! I like to do a lot of iterations of my code. I have "test1", "test2", "test3", etc. Back up your work regularly so that if you accidently undo or break something you had that was working you can go back and find the back up copy and restore it. Sometimes my dev folders are a giant mess because I like to test a lot of different ideas. The best thing to do is create a new sub-folder and give it a descriptive name (e.g. "category-test"). 

Having a good dev environment makes things easier too. On my Windows 10 laptop, I'm running:

1. Uniform Server Zero (WAMP server)

2. Visual Studio Code

I also prefer Chrome-based browsers (e.g. Vivaldi) for developing. But, I also test in Firefox and Microsoft Edge. 

I hope this helps? Good luck with your coding. Let me know if you have any specific questions about my To Do List code.

Edited April 20 by kendawson

[Ilan]

Thank you so very much for detailed reply and suggesting/sharing many of these tips... appreciated!!!

I learned C just as a hobby over a course of several years. Moving on to HTML/CSS/JS was a weird experience because of the vast difference in the obvious domains (system + general programming versus front-end web dev etc). But now having learned it around 60~70%, it starts making sense.

Thanks for suggesting perplexity.ai, these tools really save a lot of time. With C, I never needed to use any thing else and it is really enjoyable doing every little bit on your own. But front-end is just way too much raw syntax to deal with, esp when we may have to implement other stuff too (db and back-end etc). "No need to re-invent" kinda logic!

And yes, w3shools have been a tremendous help and joy to learn. I started with MDN guides but I quickly got fed up. It kinda felt random to me at times (the reference section is awesome though). W3 is more direct, systematic and easier, plus the forums!

Thanks again for taking your time to write back, I will definitely stay in touch.

[kendawson]

Great! If you already have a language under your belt, learning front end stuff will be easier. I do a lot of PHP coding as well. Sometimes I know how to do something in PHP, but not Javascript. So, I'll ask Perplexity.ai and provide a sample PHP snippet of code and ask: "Is there a way to do this functionality in Javascript?" and it will provide sample code to test.

I'm at a point now, where I want to focus on the logic of the code, and not get bogged down doing low-level UI stuff. That's where 3rd party libraries and frameworks like node.js or vue.js come in handy. My next big leap is to learn how to use these tools. I'm also looking into Socket runtime https://socketsupply.co/guides/ for networking my apps.

Keep going with your coding! You'll get there.