Sontaya1607/frontend-assignment

Assignment

1. Auto Delete Todo List

    [
        {
            type: 'Fruit',
            name: 'Apple',
        },
        {
            type: 'Vegetable',
            name: 'Broccoli',
        },
        {
            type: 'Vegetable',
            name: 'Mushroom',
        },
        {
            type: 'Fruit',
            name: 'Banana',
        },
        {
            type: 'Vegetable',
            name: 'Tomato',
        },
        {
            type: 'Fruit',
            name: 'Orange',
        },
        {
            type: 'Fruit',
            name: 'Mango',
        },
        {
            type: 'Fruit',
            name: 'Pineapple',
        },
        {
            type: 'Vegetable',
            name: 'Cucumber',
        },
        {
            type: 'Fruit',
            name: 'Watermelon',
        },
        {
            type: 'Vegetable',
            name: 'Carrot',
        },
    ]

Please make a todo list that

• Have a list of clickable buttons.
• Each button will be moved into its own column separated by type.
• Once moved, each button will have 5 seconds on the screen and then will be moved back to the bottom of the main list.
• If click on the right column (Fruit/Vegetable) the item must go back to the bottom of the left column (list) immediately.

Caution

Please host the test on a hosting service and send us the link.

See example in the link below Video Link

Please do your best to show your best solution we are looking for

1. Answer the need of question
2. Clean code easy to read

Bonus: if you have multiple solutions we could discuss those theories in our interview (no need to submit multiple versions, just send us the best one you think.)

2. Create data from API (OPTIONAL)

API from https://dummyjson.com/users

• Your project must use Typescript, Typescript module, and HTTP framework (GRPC is plus)
• Tranforms JSON data from API to new data groupBy department
• We encourage you to write tests, which we will give you some extra score
• We will give you an extra score if you focus on performance.

--- sample response ---

    {
        [Department]: {
            "male": 1,                      // ---> Male Count Summary
            "female": 1,                    // ---> Female Count Summary
            "ageRange": "XX-XX",            // ---> Range
            "hair": {                       // ---> "Color": Color Summary
                "Black": 1,                
                "Blond": 1,
                "Chestnut": 1,
                "Brown": 1
            },
            "addressUser": {                // ---> "firstNamelastName": postalCode
                "TerryMedhurst": "XXXXX",
            }
        }
    }, 
    ...