Skip to content
Submitted 3 months ago

Kanban task management web app with vanilla HTML, CSS and JS

Michael•150
@ristoranteQF
A solution to the Kanban task management web app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm not proud of shit. I'm not satisfied with the structure of my code, it is not well organised, it is chaotic and probably in a month I will also forget what the hell I wrote in there. xD

At least this app is functional.

Next time I would really think about the structure of my code so that I can make it more modular, readable, clean and separate concerns.

What challenges did you encounter, and how did you overcome them?

I encountered a few logical bugs and synchronizing the api data with the ui after each interaction. I simply used AI because otherwise I would have probably lost my mind and finish the project in at least a month. xD

I'm not looking to cheat with ai, I simply view this as a very useful tool that helps me learn faster right now because I'm a beginner.

What specific areas of your project would you like help with?

I would like to get help on the structure of the code. I want to separate concerns and have a clean code following this pattern: API data functionality, logic functionality and UI rendering.

Also, there is still a small bug on the rendering aspect. The code won't sync the left subtask count ui in each task card with the api data after relevant interactions.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Nathan Molina•280
    @Natentado

    I think you jumped a few steps on your learning, trying challenges like achieving this kind of project with pure js its a good thing but not when you need to reinforce your fundamentals first, like you js file has more than 1,300 lines of code and most of them are redundant, so i have a few tips for you:

    • Roll back to less hard challenges (junior/intermediate).
    • Reinforce Css like:
      • Variables
      • Responsiveness
      • BEM or other patterns
      • CSS performance
    • Reinforce some logical fundamentals like:
      • DRY pattern
      • Components
      • Separation of concerns
      • Code splitting
    • Then choose a js Framework to learn along advanced js patterns like:
      • React
      • Vue
      • Angular

    After more study and projects maded, i think you can adventure to advanced and guru challenges from this platform and ace it like pro without the necessary need of AI, or just to help you with things you already know or worked with it before

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord