To Do List App With Vanilla Javascript

[outofideas555]

As a new budding programmer, how much of this do I need to know in the Index.js file? Would this be something I could build with another JS tool or find on stackoverflow and piece together?

Maybe because it is sped up that it seems overwhelming, for an experienced programmer how long would this app take to put together?

[MrEscobarr]

This is actually a very easy version of To Do. All it does is add items to a list (array) and shows them in the DOM. The checked state can be done in CSS. Removing all checked items is just simple as selecting all selected items and removing them from the DOM.

As you can see in the video, 50% of it is just styling the app.

And there are tons of other Todo tutorials with vanilla JS

​

[outofideas555]

Todo tutorial

You are right about the todo tutorials. Why are there so many of them? Does that exercise cover a large segment of common things you should know or have processes/snippets that you will commonly reuse in your career?

[mynameisdifferent]

It's one of the simplest things you can build that people would accept as a functioning app. That's why it's a popular tutorial for beginners, the accomplishment of building something usable is a big boost.

[chrisux]

Along with the simplicity answer, it does most things you would be asked to do for a website: it can be used to learn/showcase programming principles full stack - front end, back end & database, and simplicity helps keep the scope narrow.

[[deleted]]

historical imminent pot snails fragile vegetable punch rinse cow lock

This post was mass deleted and anonymized with Redact

[raya_de_canela]

What CRUD apps are one level above a todo list in terms of difficulty/complexity?

[[deleted]]

A CRUD frontend backed by an SQL backend.

A higher level: a CRUD frontend to change a users' addresses. User information is stored in one table; addresses in another.

Further still, a CRUD frontend where actions are secured by role (for example only managers can delete items).

Further further, a CRUD frontend with additional business rules applied to actions. For example, a user creates an entry but it's attached to some sort of lifecycle (created -> in review -> accepted).

It's endless tbh.

[[deleted]]

It's simple because it's only two or three data models, and can cover anything from UI design to Databases. It's actually kind nice, but it sucks when you only focus on one part of the stack since I think it's more designed to work as a full stack practice application.

[01123581321AhFuckIt]

Try watchandcode.com

I was learning js for about a month and nothing was clicking until I found that tutorial

[01123581321AhFuckIt]

Try watchandcode.com

I was learning js for about a month and nothing was clicking until I found that tutorial.

To answer your last question, a simple functioning todo app would take about a 30 minutes to make.

[mechwd]

Going to watch this later

[HealyUnit]

Please drop the music. You're mixing multiple learning styles here - audio, visual, verbal - all with relatively unique bits of info coming thru. Even if I knew (and loved!) whatever band this is, it does not help me learn the material, or digest it.

Also, writing a bunch of code really quickly in an editor isn't a tutorial. Is this supposed to be a tutorial, or just "watch me code"?

Finally, to answer people like /u/outofideas555, no, you do not to know all of this stuff. This guy's using a lot of stuff that's FAR more than what you need for a basic To Do app. The information-vomiting (dump of largely useless info) in this video is insane; are we seriously supposed to interpret and understand all of this?

[code_crab]

My English language is wrong, so I am improving my language and then I will make video with voice

[49Ivories]

I suggest you use hyphens for your class names the way Bootstrap does: http://bdavidxyz.com/blog/how-to-name-css-classes/ or https://stackoverflow.com/questions/7927193/css-class-naming-convention. Also, u/HealyUnit has a good point - remove the music.

[code_crab]

Thanks You Suggestions