• Considering there is required to be 5 todo items, I have made the todo section scrollable so it will still fit on the screen.
• I have made the screen responsive to mobile and tablets by reducing elements (not the best way to do this but suitable for this design)
• I have made separate components for each card, although this is not scalable, this is just a small project so this will suffice. (There is a consistent css style for each card but to be more scalable could have used Mixins for re-usable card component)
• Tried to keep things simple and not over complicate everthing, again I could have used a css framework such as Bootsrap or Beuify and css pre-processor such as SASS or SCSS but since this is a small project I just kept it simple

• "See All" at the bottom of todo list could show all todo items
• Cards showing further information
• More useful top banner The list keeps going.. if I had more time I would love to keep developing this, deffinitely had fun doing this!

Figma Design: https://www.figma.com/file/qGa30JecDkV1ioQ5468ogJ/Jan-2022?node-id=0%3A10

1.) The app needs to request the TODO items from https://jsonplaceholder.typicode.com/todos to populate the list on the right hand side of the page. Display the 'title' field from the responses as the main body text for the todo item. Please show the first 5 items from the response.

2.) Please commit your VueJS app code to a public repository such as Github so we can build the project locally and review.

3.) You can use a CSS framework if you like (we use Bulma at Plann) although we also like to see that you can custom code css when needed.

4.) Code comments on custom javascript is encouraged.

#F5F8FF #81C4EE #ABD9DA #F7B3A1 #FEF5F3 #D9EDFA #293246