I'm moving from programming tutorials into web development, and I'm building a front-end to-do app as an object-oriented exercise. Tasks can go in categories like today, this week, or inbox.
I understand basic classes and objects, but I'm not sure how to decide what should be an object or how those objects connect to the HTML and forms. Where should I start?
Start with what the app needs to do, not a diagram of every possible class. A task needs some text and a completed state. The user needs to add it, check it off, delete it, and perhaps move it between categories.
A Task object could hold that data, while a list or app object holds the tasks and provides operations on them. Try adding one task first, then add the next feature and adjust the design when you see what feels awkward. You don't need to get all the boundaries right before writing code.
The HTML doesn't have to live inside a class. Think of it as the display and input layer. JavaScript can read a form, create a task object, add it to your app's data, and then update the page to show it.
For categories, you could store a category value on each task and render tasks in the corresponding section. Or a category object could own a collection of tasks. Either is a reasonable exercise. Pick one, make it work, and see whether adding or moving tasks is straightforward.
!skip~past+the_intro:
So the form passes information into the app's data, rather than the category somehow creating the task on its own?
~nudge+the!cursor:
Exactly. An event handler can coordinate that step, then call whatever method you chose for adding the task.
Don't force a class around everything just because it's an object-oriented assignment. A small to-do app can work with simple objects and functions too. A Task class is a reasonable place to practice, but making the whole interface a single object isn't a requirement of the idea.
Another way to get a feel for object-oriented design is to use a library and look at the interface it exposes. Notice what data it keeps behind its methods and what you have to pass in. That can make encapsulation less abstract, though I'd keep the to-do app itself small enough that you can understand every part.
Answers are reviewed before publication.
~tweak+the!equalizer:
Moving tasks up and down could be another useful operation to think about once adding and deleting work.