Skip to content
OverviewSolutions
16
Comments
2
iliwili
@iliwili

All comments

  • iliwili•225
    @iliwiliPosted about 3 years ago

    Hey, first of all I really like the animation you did with the box on the left, really neat.

    Changes I would make:

    • Position the svg on the left a bit more to the top.
    • The content when you open up the accordion should be between the title and the line and not under the content and line. Here an image for clarification.

    Good job.

    1
  • iliwili•225
    @iliwiliPosted about 3 years ago

    Hey, first of all, I really like how your solution looks and works.

    For the localStorage problem you have. Your code at the moment doesn't let you do what you want because of your render method.

    if (leadsFromLocalStorage) {
  todoLists = leadsFromLocalStorage;
  render(todoLists);
}

    You pass down a list in your method render(lists), but you don't loop through the list in this render method. This method just appends one element in your list-container. That doesn't mean your render method is incorrect, it just means you need to tackle it in a different way.

    1st way

    const renderItem = (value, checked) => {}

if (leadsFromLocalStorage) {
  todoLists = leadsFromLocalStorage;
  todoLists.forEach((todo) => {
    render(todo.value, todo.checked);
  });
}

    Change the render method to something like 'renderItem' and it should have 2 parameters: 'value' and 'checked', then assign the value and checked to the right HTML elements. After that you need to loop through the todoLists list and render each item as shown in the code above.

    2d way

    You change how the 'render' method functions, you get the list as a parameter and re-render the whole list every time something happens. So you clear the container-list div and re-render the whole list.

    I personally would recommend the first way, because it is more efficient and you don't need to change too much functionality.

    Hope this helps! :)

    Marked as helpful
    2