So I did the todo App tutorial here and now have some questions

Hi all.
So I did the todo app tutorial here and there’s this todo app project in frontend mentor:
https://www.frontendmentor.io/challenges/todo-app-Su1_KokOW/hub

I want to complete this but have some questions.
My guess is that general apps like this are developed using the same logic/flowchart?

So how should I go about making this my own project, even though the code might be similar as the logic is going to be the same? The same buttons will be added, the same edit/delete/add operations etc.

Am I making sense?

Not sure I understand what you mean by making this your own project, but the logic, buttons, etc is up to you as the developer to decide on. There are many different ways to make a todo app. Since it is a todo app then most of your code will be similar to what you have done if you already did one before, and plan on doing it the same way

I mean apps like this are standard , with alot of the same features etc.
I mean , from what I see at first glance, the only difference between the freecodecamp todo app and the frontendmentor todo app is how they look, but underneath the hood a lot of the code could in theory be duplicated.
My question is , is this acceptable as this is such a standard app ? All the projects I’ve completed so far were not standard imo.

Am I making more sense?

Theres nothing wrong with duplicating code, or using code you already wrote to get the job done again in another project. Developers will take code they wrote in one project, and if they can re-use it in another then they will. It just makes the job easier for us, and cuts down on development time. I guess I would ask why you want to do another todo app? Like you said, a lot of the code will be the same. You’re not really challenging yourself

1 Like

Sorry, I don’t think you understand. I meant the todo app tutorial code from freecodecamp?
And now I want to do the frontendmentor todo app project?

I first tried this project from frontendmentor
https://www.frontendmentor.io/challenges/interactive-comments-section-iG1RugEG9

which was a HUGE challenge, and I got stuck, unable to do it.
Someone here said I should follow the freecodecamp todo app tutorial first .
My previous freecodecamp forum post

I did this, redid the freecodecamp js tutorial and got to the todo app tutorial and finished that. They said it makes more sense to try the frontendmentor todo app first , before the more difficult nested comments app.

So that’s why I want to do this frontendmentor todo app project after finishing the freecodecamp todo app tutororial

Ahhh. Ok, got it. So the answer will still stand. Theres really no issue if the code itself is going to be duplicate or repeat. Like I said, its very common for developers to take code they already wrote, and use it somewhere else or for a similar feature . Or, if you tried from scratch and your code happens to be similar it’s still ok. It’s understandable the code will be similar or the same since like you said it’s pretty much the same app just different ui

1 Like

No, I didn’t write the code. It’s the freecodecamp todo app tutorials code.
And now I need to write my own frontendmentor todo app project code.

To me it seems that this type of app is very standard. There’s hardly many ways to solve this ? Sure, I could switch some arrow function to a regular function, change element names, but not much more. The functionality is more or less the same.

It looks a bit different, yes. I think the frontendmentor todo app reacts to entered user input, so no ‘add task’ button. And the look of each added task is different.
But that’s it. I will still need to add task, edit tasks, delete tasks , cancel editing , etc, which is a huge part of the freecodecamp todo app tutorials code (not my code).

There are only so many ways you can code a todo app.

As long as you keep it data driven and use the data structure for all the CRUD operations, most of the “business logic” will look pretty similar. There are some implementation details that might vary, but not significantly.

The fCC todo app does use a mutating method and direct DOM manipulation in the delete function, which is not something I would suggest. In my opinion, the deleteTask should not directly remove DOM elements or use splice. I would prefer using filter and update the data structure, then re-render it after the update. It is less code and easier to reason about. The DOM should always just be a rendered representation of the internal state, which is the only “source of truth”.

Challenge code:

const deleteTask = (buttonEl) => {
  const dataArrIndex = taskData.findIndex(
    (item) => item.id === buttonEl.parentElement.id
  );

  buttonEl.parentElement.remove();
  taskData.splice(dataArrIndex, 1);
  localStorage.setItem("data", JSON.stringify(taskData));
}

Might be written as:

const deleteTask = (buttonEl) => {
  // taskData can't be a const
  taskData = taskData.filter((task) => task.id !== buttonEl.parentElement.id);
  localStorage.setItem("data", JSON.stringify(taskData));
  updateTaskContainer();
}

You can use examples as a guide, but you should think about the problem and how you would solve it. Not just copying example code.

1 Like

Makes sense what you said about changing the DOM vs changing internal data.
I wasn’t planning to just copy code , that’s why I’m asking advice here about this.

I was wondering if there’s a good site with standard app flowchart logic templates?
That makes sense in this case at least I think.
Thanks

I don’t really use flowcharts, so I wouldn’t know. That seems more like something you would use with large OOP code or a state machine. I know XState has one.

Don’t overthink it, a lot tend to change once it becomes actual code. Then your ideas, assumptions, and abstractions often tend to break down quickly.

It is fine to write down the requirements and make a step-by-step list of things that needs to be accomplished. But beyond that, it can quickly become a waste of time to plan too far ahead without any actual implementation. I would suggest iteration and refactoring over long term planning. At least for what you are doing here and where you are in the learning process.

1 Like