task-list.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="description"
        content="MadHack is an Inter University Mobile App Development Hackathon organized by the IEEE Student Branch of University of Colombo School of Computing">
    <meta name="keywords" content="Hackathon, Competition, University, Mobile App, Application">
    <meta name="image" content="https://saliya.ml/madhack/assets/img/common/slide1.jpg">

    <!-- Schema.org for Google -->
    <meta itemprop="name" content="MadHack">
    <meta itemprop="description"
        content="MadHack is an Inter University Mobile App Development Hackathon organized by the IEEE Student Branch of University of Colombo School of Computing">
    <meta itemprop="image" content="https://saliya.ml/madhack/assets/img/common/slide1.jpg">

    <!-- Twitter -->
    <meta name="twitter:site" content="">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="MadHack">
    <meta name="twitter:description"
        content="MadHack is an Inter University Mobile App Development Hackathon organized by the IEEE Student Branch of University of Colombo School of Computing">
    <meta name="twitter:image:src" content="https://saliya.ml/madhack/assets/img/common/slide1.jpg">

    <!-- Open Graph general (Facebook, Pinterest & Google+) -->
    <meta name="og:title" content="MadHack">
    <meta name="og:description"
        content="MadHack is an Inter University Mobile App Development Hackathon organized by the IEEE Student Branch of University of Colombo School of Computing">
    <meta name="og:image" content="https://saliya.ml/madhack/assets/img/common/slide1.jpg">
    <meta name="og:url" content="https://ieeeday.ucscieee.com/">
    <meta name="og:site_name" content="MadHack">
    <meta name="fb:app_id" content="">
    <meta name="og:type" content="website">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <link rel="stylesheet" href="./assets/css/normalize.css">
    <link rel="stylesheet" href="./assets/css/common.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css"
        integrity="sha512-nNlU0WK2QfKsuEmdcTwkeh+lhGs6uyOxuUs+n+0oXSYDok5qy0EI0lt01ZynHq6+p/tbgpZ7P+yUb+r71wqdXg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Condensed&display=swap"
        rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <title>MadHack Initial Round Tasks</title>

    <link rel="icon" href="./assets/img/favicon.png" sizes="32x32" />
    <link rel="icon" href="./assets/img/favicon.png" sizes="192x192" />
    <link rel="apple-touch-icon" href="./assets/img/favicon.png" />
    <meta name="msapplication-TileImage" content="./assets/img/favicon.png" />

    <style>
        body {
            /* background: url("./assets/img/common/grain-dark.png") rgb(23, 15, 30) fixed; */
            background: url("./assets/img/common/grain-dark.png") rgb(23, 15, 30);
            color: rgb(229, 225, 230);
        }

        html,
        body {
            font-family: 'IBM Plex Mono', monospace;
            box-sizing: border-box;
        }

        @font-face {
            font-family: Gilroy;
            src: url("./assets/fonts/gilroy/Gilroy-SemiBold.ttf") format("truetype");
        }

        .font-gilroy {
            font-family: Gilroy, sans-serif;
        }

        .title-section::before {
            content: "";
            position: absolute;
            margin: 0px auto;
            left: 0px;
            top: -10%;
            filter: brightness(0.5) sepia(1) hue-rotate(200deg) saturate(10);
            background-image: url(./assets/img/grid-square.7c0cbc15.svg);
            opacity: 0.2;
            -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, black 40%, transparent 70%);
            width: 100%;
            height: 120%;
            z-index: -1;
        }

        .title-section::after {
            position: absolute;
            top: 0px;
            left: 0px;
            content: "";
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgb(145, 49, 255) 0%, rgb(46, 255, 205) 100%);
            opacity: 0.2;
            z-index: -2;
            -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, black -40%, transparent 60%);
        }
    </style>

</head>

<body>

    <style>
        /* .row {
            text-align: left;
            max-width: max(65%, 500px);
        } */

        .task-lists {
            max-width: max(40vw, 768px);
            max-width: max(40vw, 1000px);
            max-width: max(40vw, 900px);
            /* max-width: 50vw; */
            font-size: 0.8rem;

        }

        ul.styled {
            list-style: none;
            padding: 0px;
            /* margin-bottom: 50px; */
        }

        ul.styled li {
            padding-left: 25px;
            position: relative;
            /* margin-bottom: 15px; */
        }

        ul.styled li:before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: #54c5f7;
            border-radius: 50%;
            top: 8px;
            left: 6px;
        }

        /* second level list */
        ul.styled li ul {
            list-style: none;
            padding: 0px;
            margin-bottom: 15px;
        }

        ul.styled li ul li {
            padding-left: 25px;
            position: relative;
            /* margin-bottom: 15px; */
        }

        ul.styled li ul li:before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            border: 2px solid #54c5f7;
            background: transparent;
            border-radius: 50%;
            top: 8px;
            left: 8px;
        }

        a {
            color: #54c5f7;
            text-decoration: none;
        }

        .snippet {
            /* background: #1e1e1e; */
            /* faded white */
            background: #616161;
            padding: 2px 4px;
            border-radius: 5px;
            color: #54c5f7;
        }

        a.snippet:hover {
            color: #090429;
            text-decoration: underline;
        }

        /* ul li {
            list-style-type: "\1F44D";
        } */
    </style>

    <div class="container mt-5 title-section">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-center">
                    <img src="./assets/img/logo.png" alt="logo" class="img-fluid" style="width: 200px;">
                </div>
            </div>
        </div>
        <div class="row mx-md-5 mx-2">
            <div class="col-12">
                <div class="d-flex justify-content-center">
                    <h1 class="text-center font-gilroy">MadHack Agon Tasks</h1>
                </div>
                <div class=" justify-content-center">
                    <!-- description -->
                    <p class="text-center px-md-5 px-2">
                        As a busy individual, I struggle to keep track of all my tasks and responsibilities. I often
                        forget about important todos and miss deadlines, causing stress and loss of productivity. I need
                        a solution that can help me manage my daily tasks effectively and efficiently. So I thought of
                        an
                        Android Native application called Taskopolis, whose screens you can find below:
                    </p>
                    <p class="text-center px-5">
                        A few things before you start
                    </p>

                    <!-- A few things before you start:
                    The UIs in the application should strictly be the same as the corresponding images.
                    The API documentation also contains the request and response format along with the examples.
                    To communicate with the API endpoint, your request should include the X-API-Key header with the
                    value set to your team token.
                    Do test the API with your team token with the default route to make sure it is working.
                    You are free to use any library for implementing complex functionality such as API requests. -->

                    <div class="row justify-content-center">
                        <div class="col-12 col-md-6">

                            <ul class="styled">
                                <li> The UIs in the application should strictly be the same as the corresponding images.
                                </li>
                                <li> The API documentation can be found here:
                                    <a href="https://agon.madhack.ucscieee.com/"
                                        target="_blank">https://agon.madhack.ucscieee.com/</a>. The API documentation
                                    also contains the request and response format along with the examples.
                                </li>
                                <li>To communicate with the API endpoint, your request should include the <span
                                        class="snippet">X-API-Key</span>
                                    header with the
                                    value set to your team token.</li>
                                <li>
                                    For request body fields that require an ID, generate a random UUIDv4 string and add
                                    as the value.
                                </li>
                                <li>
                                    Do test the API with your team token with the default route to make sure it is
                                    working (You can use the <u>Try it out</u> option).
                                </li>
                                <li>
                                    You are free to use any library for implementing complex functionality such as API
                                    requests.
                                </li>
                            </ul>

                        </div>
                    </div>

                    <!-- <div class="row justify-content-center">
                        <div class="col-12 col-md-6">
                            <ul class="styled">
                                <li> The UIs in the application should strictly be the same as the corresponding images.
                                </li>
                                <li> The API documentation can be found here:
                                    <a href="https://agon.madhack.ucscieee.com/"
                                        target="_blank">https://agon.madhack.ucscieee.com/</a> You can find the
                                    request and response format along with the examples.
                                </li>
                                <li>To communicate with the API endpoint, your request should include the <span
                                        class="snippet">X-API-Key</span>
                                    header with the
                                    value set to your team token.</li>
                                <li>Do test the API with your team token with the default route to make sure it is
                                    working.</li>
                            </ul>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>

    <div class="container my-5 d-none">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12 col-md-5 pb-4">
                        <a href="./assets/img/tasks-initial-round/splaash.jpg" data-fancybox="group">
                            <img src="./assets/img/tasks-initial-round/splaash.jpg" alt="logo" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-12 col-md-7">
                        <div>
                            <h2 class="font-gilroy pb-2">1. Welcome screen</h2>

                            <ul class="list-unstyled">
                                <li class="py-1">
                                    <span class="pl-2">
                                        App logo
                                    </span>
                                </li>
                                <li class="py-1">
                                    <span class="pl-2">
                                        Name of the application
                                    </span>
                                </li>
                                <li class="py-1">
                                    <span class="pl-2">
                                        Tagline
                                    </span>
                                </li>
                                <li class="py-1">
                                    <span class="pl-2">
                                        Button that opens the Sign Up screen
                                    </span>
                                </li>
                                <li class="py-1">
                                    <span class="pl-2">
                                        Button that opens the Sign In screen
                                    </span>
                                </li>


                            </ul>

                            <!-- <p class="">
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                                architecto
                            </p> -->
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12 col-md-5 pb-4">
                        <a href="./assets/img/tasks-initial-round/splaash.jpg" data-fancybox="group">
                            <img src="./assets/img/tasks-initial-round/splaash.jpg" alt="logo" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-12 col-md-7">
                        <div>
                            <h2 class="font-gilroy pb-2">2. Home Screen</h2>
                            <p class="">
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                laudantium,
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container my-5 task-lists">
        <div class="row">

            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12 col-md-5 pb-4">
                        <a href="./assets/img/tasks-initial-round/sign up page.jpg" data-fancybox="group">
                            <img src="./assets/img/tasks-initial-round/sign up page.jpg" alt="logo" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-12 col-md-7">
                        <div>
                            <h2 class="font-gilroy pb-2">1. Welcome Screen</h2>

                            <ul class="styled">
                                <li>Task 1.1:
                                    <ul>
                                        <li>Name the XML as <span class="snippet">activity_welcome.xml</span> or
                                            anything similar.</li>
                                        <li>The screen should consist of all the fields as shown in the image.</li>
                                    </ul>
                                </li>
                                <li>Task 1.2:
                                    <ul>
                                        <li>The Sign Up button should navigate to the Sign Up Screen.</li>
                                        <li>The Sign In button should navigate to the Sign In Screen.</li>
                                    </ul>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12 col-md-5 pb-4">
                        <a href="./assets/img/tasks-initial-round/sign up page alt.jpg" data-fancybox="group">
                            <img src="./assets/img/tasks-initial-round/sign up page alt.jpg" alt="logo"
                                class="img-fluid">
                        </a>
                    </div>
                    <div class="col-12 col-md-7">
                        <div>
                            <h2 class="font-gilroy pb-2">2. Sign Up Screen</h2>

                            <!-- Task 2.1:
                            Name the XML view as activity_signup.xml or something similar
                            The screen should consist of all the fields as shown in the image().
                            Task 2.2:
                            Perform frontend validations for all the form fields
                            Email Address : Should be in valid format.
                            Contact Number : Should be allowed only 10 characters.
                            Password : Should have a minimum of 6 characters, an uppercase letter, a special character
                            and a number
                            Task 2.3:
                            Sign up button should be able to create a user account using the /auth/register endpoint.
                            Task 2.4:
                            Once the sign up button is clicked, if the user account has been successfully created or if
                            the account already exists, it should navigate to the Sign In screen
                            Task 2.5:
                            On failed requests use the backend response and create a suitable error message.
                            Note: Only consider status codes 400,401,409 -->

                            <ul class="styled">
                                <li>Task 2.1:
                                    <ul>
                                        <li>Name the XML view as <span class="snippet">activity_signup.xml</span> or
                                            something similar.</li>
                                        <li>The screen should consist of all the fields as shown in the image.</li>
                                    </ul>
                                </li>
                                <li>Task 2.2:
                                    <ul>
                                        <li>Perform frontend validations for all the form fields</li>
                                        <li>Email Address : Should be in valid format</li>
                                        <li>Contact Number : Should be allowed only 10 characters</li>
                                        <li>Password : Should have a minimum of 6 characters, an uppercase letter, a
                                            special character and a number</li>
                                    </ul>
                                </li>
                                <li>Task 2.3:
                                    <ul>
                                        <li>Sign up button should be able to create a user account using the
                                            <a href="https://agon.madhack.ucscieee.com/#/auth/registerUser"
                                                target="_blank" class="snippet">/auth/register</a> endpoint.
                                        </li>
                                    </ul>
                                </li>
                                <li>Task 2.4:
                                    <ul>
                                        <li>Once the sign up button is clicked, if the user account has been
                                            successfully created or if the account already exists, it should navigate to
                                            the Sign In
                                            screen</li>
                                    </ul>
                                </li>
                                <li>Task 2.5:
                                    <ul>
                                        <li>On failed requests use the backend response and show a suitable error
                                            message.</li>
                                        <li>Note: <strong>Only</strong> consider status codes 400,401,409</li>
                                    </ul>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12 col-md-5 pb-4">
                        <a href="./assets/img/tasks-initial-round/signin page.jpg" data-fancybox="group">
                            <img src="./assets/img/tasks-initial-round/signin page.jpg" alt="logo" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-12 col-md-7">
                        <div>
                            <h2 class="font-gilroy pb-2">3. Sign In Screen</h2>

                            <!-- Task 3.1:
                            Name the XML view as activity_signin.xml or something similar
                            - The screen should consist of all the fields as shown in the image().
                            Task 3.2:
                            - Sign in button should be able to successfully login the user using the ‘’auth/login “
                            endpoint.

                            Task 3.3:
                            - Successful sign in should navigate to the home screen and sign up button should navigate
                            to sign up screen.



                            Task 3.4:
                            - On failed requests use the backend response and create a suitable error message.
                            Note: Only consider status codes 400,401
                            Task 3.5:
                            Save the user's login instance using local storage (eg: shared preferences) and it should
                            only be cleared after a logout.

                            Note: Save the returned token as it is required in other API requests. (The JWT will not
                            expire automatically)
 -->

                            <ul class="styled">
                                <li>Task 3.1:
                                    <ul>
                                        <li>Name the XML view as <span class="snippet">activity_signin.xml</span> or
                                            something similar.</li>
                                        <li>The screen should consist of all the fields as shown in the image.</li>
                                    </ul>
                                </li>
                                <li>Task 3.2:
                                    <ul>
                                        <li>Sign in button should be able to successfully login the user using the
                                            <a href="https://agon.madhack.ucscieee.com/#/auth/loginUser" target="_blank"
                                                class="snippet">auth/login</a> endpoint.
                                        </li>
                                    </ul>
                                </li>
                                <li>Task 3.3:
                                    <ul>
                                        <li>Successful sign in should navigate to the home screen and sign up button
                                            should navigate to sign up screen.</li>
                                    </ul>
                                </li>
                                <li>Task 3.4:
                                    <ul>
                                        <li>On failed requests use the backend response and create a suitable error
                                            message.</li>
                                        <li>Note: <strong>Only</strong> consider status codes 400,401</li>
                                    </ul>
                                </li>
                                <li>Task 3.5:
                                    <ul>
                                        <li>Save the user's login instance using local storage (eg: shared preferences)
                                            and it should only be cleared after a logout.</li>

                                    </ul>
                                </li>
                            </ul>

                            <p> Note: Save the returned token as it is required in other API requests. (The
                                JWT will not expire automatically). </p>

                        </div>
                    </div>
                </div>
            </div>



            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12 col-md-5 pb-4">
                        <a href="./assets/img/tasks-initial-round/home-all.jpg" data-fancybox="group">
                            <img src="./assets/img/tasks-initial-round/home-all.jpg" alt="logo" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-12 col-md-7">
                        <div>
                            <h2 class="font-gilroy pb-2">4.1 Main Screen (30 marks)</h2>

                            <!-- 4. Main Screen (30 marks) -->

                            <!-- UI Tasks
                            Task 4.1:
                            Name the XML view as activity_home.xml or something similar
                            Follow the image() to develop the xml.
                            Appbar with a hamburger menu icon, app title and a tabbed view
                            The tabbed view should contain the following tabs:
                            All - both pending and completed todos
                            Pending
                            Completed
                            Floating Action Button (FAB) that takes you to the Add task screen.
                            Search field should be present. -->

                            <ul class="styled">
                                <li>Task 4.1:
                                    <ul>
                                        <li>Name the XML view as <span class="snippet">activity_home.xml</span> or
                                            something similar.</li>
                                        <li>Follow the image to develop the xml.</li>
                                        <li>Appbar with a hamburger menu icon, app title and a tabbed view.</li>
                                        <li>The tabbed view should contain the following tabs:
                                            <ul>
                                                <li>All - both pending and completed todos</li>
                                                <li>Pending</li>
                                                <li>Completed</li>
                                            </ul>
                                        </li>
                                        <li>Floating Action Button (FAB) that takes you to the Add task screen.</li>
                                        <li>Search field should be present.</li>
                                    </ul>
                                </li>
                            </ul>


                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12 col-md-5 pb-4">
                        <a href="./assets/img/tasks-initial-round/sidebar overlay.jpg" data-fancybox="group">
                            <img src="./assets/img/tasks-initial-round/sidebar overlay.jpg" alt="logo"
                                class="img-fluid">
                        </a>
                    </div>
                    <div class="col-12 col-md-7">
                        <div>
                            <h2 class="font-gilroy pb-2">4.2 Main Screen</h2>
                            <ul class="styled">
                                <li>The hamburger menu should open a navigation drawer with the user’s avatar and
                                    links to profile, about app and logout, refer image.</li>
                                <li>User data should be retrieved from <a
                                        href="https://agon.madhack.ucscieee.com/#/user/getUser" target="_blank"
                                        class="snippet">/user</a> endpoint.</li>
                                <li>The links should navigate to the edit-profile and about-app pages.</li>
                                <li>Once the logout option is clicked user data should be cleared from local storage
                                    and the user should be navigated to the login screen.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12 col-md-5 pb-4">
                        <a href="./assets/img/tasks-initial-round/home-all-alt.jpg" data-fancybox="group">
                            <img src="./assets/img/tasks-initial-round/home-all-alt.jpg" alt="logo" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-12 col-md-7">
                        <div>
                            <h2 class="font-gilroy pb-2">4.3 Main Screen</h2>

                            <ul class="styled">
                                <li>Task 4.3:
                                    <ul>
                                        <li>The tabs should display the todos fetched by the <a
                                                href="https://agon.madhack.ucscieee.com/#/todo/getTodoList"
                                                target="_blank" class="snippet">/todo</a> endpoint as shown in the
                                            image.</li>
                                        <li>Display the list of todos in a recycler view according to the image.</li>
                                        <li>Each todo card should contain the relevant category icon, title, notes, due
                                            date/time and a checkbox. You can use system icons for categories,
                                            <ul>
                                                <li>Important - important icon #B22222</li>
                                                <li>Personal - person icon #006400</li>
                                                <li>Work - work icon #1E2B46</li>
                                                <li>Other - more icon #B8860B</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li>Task 4.4:
                                    <ul>
                                        <li>The Pending and Completed tabs should filter and show the relevant todos
                                        </li>
                                    </ul>
                                </li>
                                <li>Task 4.5:
                                    <ul>
                                        <li>When a todo is tapped the user should be navigated to the edit-todo screen.
                                        </li>
                                        <li>When the checkbox is checked, the relevant todo status should be updated.
                                            You can use the <a
                                                href="https://agon.madhack.ucscieee.com/#/todo/updateTodoStatus"
                                                target="_blank" class="snippet">/todo/{todoId}/status</a> endpoint.</li>
                                    </ul>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12 col-md-5 pb-4">
                        <a href="./assets/img/tasks-initial-round/add task.jpg" data-fancybox="group">
                            <img src="./assets/img/tasks-initial-round/add task.jpg" alt="logo" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-12 col-md-7">
                        <div>
                            <h2 class="font-gilroy pb-2">5. Add Task Screen (10 marks)</h2>

                            <ul class="styled">
                                <li>Task 5.1:
                                    <ul>
                                        <li>Name the XML view as activity_add_task.xml or something similar.</li>
                                        <li>Follow the image() to develop the xml.</li>
                                        <li>Create a form with the following fields:
                                            <ul>
                                                <li>Title*</li>
                                                <li>Notes</li>
                                                <li>Category* (Dropdown)</li>
                                                <li>Toggle to enable reminders* (See below for more info)</li>
                                                <li>Due date (Date picker)</li>
                                                <li>Due time (Time picker)</li>
                                            </ul>
                                        </li>
                                        <li>* marks the mandatory fields - implement suitable validation in the
                                            frontend.</li>
                                        <li>Use <a href="https://agon.madhack.ucscieee.com/#/category/getCategoryList"
                                                target="_blank" class="snippet">/category</a> endpoint to retrieve the
                                            categories for the dropdown.</li>
                                        <li>Create a button to save the task using the endpoint: <a
                                                href="https://agon.madhack.ucscieee.com/#/todo/createTodo"
                                                target="_blank" class="snippet">/todo.</a></li>
                                    </ul>
                                </li>
                            </ul>


                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12 col-md-5 pb-4">
                        <a href="./assets/img/tasks-initial-round/edit task.jpg" data-fancybox="group">
                            <img src="./assets/img/tasks-initial-round/edit task.jpg" alt="logo" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-12 col-md-7">
                        <div>
                            <h2 class="font-gilroy pb-2">6. Edit Task Screen (5 marks)</h2>


                            <!-- Task 6.1:
                            Name the XML view as activity_edit_task.xml or something similar
                            Fill the form with existing data

                            Task 6.2:
                            Update the todo with the endpoint /todo when the relevant button is clicked
                            Delete the todo with the endpoint /todo when the relevant button is clicked
                            (You can navigate back to main screen after both cases)

                            Task 6.3:
                            Implementation of action confirmation
                            Implementation of snack bars to notify the user -->

                            <ul class="styled">
                                <li>Task 6.1:
                                    <ul>
                                        <li>Name the XML view as <span class="snippet">activity_edit_task.xml</span> or
                                            something similar</li>
                                        <li>Fill the form with existing data</li>
                                    </ul>
                                </li>
                                <li>Task 6.2:
                                    <ul>
                                        <li>Update the todo with the endpoint <a
                                                href="https://agon.madhack.ucscieee.com/#/todo/updateTodo"
                                                target="_blank" class="snippet">/todo</a> when the relevant button is
                                            clicked.</li>
                                        <li>Delete the todo with the endpoint <a
                                                href="https://agon.madhack.ucscieee.com/#/todo/deleteTodo"
                                                target="_blank" class="snippet">/todo</a> when the relevant button is
                                            clicked.</li>
                                        <li>(You can navigate back to main screen after both cases).</li>
                                    </ul>
                                </li>
                                <li>Task 6.3:
                                    <ul>
                                        <li>Implementation of action confirmation.</li>
                                        <li>Implementation of snack bars (toast) to show feedback to the user.</li>
                                    </ul>
                                </li>
                            </ul>



                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12 col-md-5 pb-4">
                        <a href="./assets/img/tasks-initial-round/profile page.jpg" data-fancybox="group">
                            <img src="./assets/img/tasks-initial-round/profile page.jpg" alt="logo" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-12 col-md-7">
                        <div>
                            <h2 class="font-gilroy pb-2">7. Edit Profile (10 marks)</h2>

                            <ul class="styled">
                                <li>Task 7.1:
                                    <ul>
                                        <li>Name the XML view as <span class="snippet">activity_edit_profile.xml</span>
                                            or
                                            something similar.</li>
                                        <li>Fill the form with existing data:</li>
                                    </ul>
                                </li>
                                <li>Task 7.2:
                                    <ul>
                                        <li>Show user avatar</li>
                                        <li>Fill the form with existing data</li>
                                    </ul>
                                </li>
                                <li>Task 7.3:
                                    <ul>
                                        <li>Update user profile using the endpoint: <a
                                                href="https://agon.madhack.ucscieee.com/#/user/updateUser"
                                                target="_blank" class="snippet">/user</a></li>
                                    </ul>
                                </li>
                                <li>Task 7.4:
                                    <ul>
                                        <li>Upload an avatar for the user (let the user pick an image), use the
                                            endpoint:
                                            <a href="https://agon.madhack.ucscieee.com/#/user/uploadAvatar"
                                                target="_blank" class="snippet">/user/upload-avatar</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12 col-md-5 pb-4">
                        <a href="./assets/img/tasks-initial-round/about app.jpg" data-fancybox="group">
                            <img src="./assets/img/tasks-initial-round/about app.jpg" alt="logo" class="img-fluid">
                        </a>
                    </div>
                    <div class="col-12 col-md-7">
                        <div>

                            <h2 class="font-gilroy pb-2">8. About App page (5 marks)</h2>

                            <ul class="styled">
                                <li>Task 9.1:
                                    <ul>
                                        <li>Name the XML view as <span class="snippet">activity_about_app.xml</span> or
                                            something similar</li>
                                        <li>Create a list with your team members.</li>
                                        <li>Add a button which translates all the names to sinhala language.</li>
                                    </ul>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12">
                        <div>
                            <h2 class="font-gilroy pb-2 text-center">Advanced tasks</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12">
                        <div>
                            <h2 class="font-gilroy pb-2">9. Search and filter (10 Marks)</h2>
                            <p>Implement search and filter by category for todos</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4 d-none">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12">
                        <div>
                            <h2 class="font-gilroy pb-2">11. Advanced Task 2: Language Translation</h2>

                            <div>
                                <p>Add a button in the about app page to translate only that page to one language other
                                    than English (French for example)</p>
                                <p>You can store the values in separate string resource bundles</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4 d-none">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12">
                        <div>
                            <h2 class="font-gilroy pb-2">10. Additional Marks: Offline Support (10 marks )</h2>
                            <p>
                                You will get additional marks if you implement offline support to use the application.
                                This should be synced with the server when something is edited in the todos and a
                                blocking UI screen should be added to improve the user experience.
                            </p>
                            <p> Note: Only consider the todos list for this task. </p>
                            <p>
                                Hint: Saves the todos in local storage and retrieves it when the app is open without
                                internet access.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12">
                        <div>
                            <h2 class="font-gilroy pb-2">10. Scheduled notifications</h2>
                            <p>
                                This is a complex task which can gain you a lot additional marks. You are required to
                                schedule a notification at the due time (using
                                technologies available in Android) for the tasks that the user sets as reminder enabled.
                                Note that this notification
                                should be generated by the app and has no connection with the backend.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="row mx-3 mx-md-5">
                    <div class="col-12">
                        <h2 class="font-gilroy pb-2">11. Offline mode</h2>
                        <p>
                            This is a very complex task which can gain you a lot additional marks.
                            The user should be able to use the app offline, specifically the
                            following things:
                        </p>

                        <ul class="styled">
                            <li>View todos</li>
                            <li>Add todo</li>
                            <li>Edit todo</li>
                            <li>Delete todo</li>
                        </ul>

                        <p>
                            When the app is connected to the server, it should synchronize with the
                            server data and a blocking UI screen should
                            be added to improve the user experience.
                        </p>
                        <p>
                            Note: You do noy have to consider the edit-user functionality for this task.
                        </p>
                        <p>

                            Hint: Save the todos in local storage or a DB like SQLite and retrieve it
                            when the app is opened without internet access.
                            When the app gets internet access, send the changed data to the server.
                        </p>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <div class="container my-5 title-section">
        <div class="row mx-md-5 mx-2">
            <div class="col-12">
                <div class=" justify-content-center">
                    <p class="text-center px-md-5 px-2">
                        Since it is urgent, I did try to learn Android Native and make a simple todo application myself.
                        I was supposed to finish the application by the 26th of February 2023 at 11:59 pm. However,
                        since it itself has tasks to do, without a todo application, I would not be able to finish the
                        application in time, which is where you come in! You can find my code below.
                        If you are going to use my code, since your repository and mine have unrelated histories, you
                        can download my repository as a .zip file and extract it in your project directory. Good luck,
                        and I hope you can manage the tasks better than me!
                    </p>

                    <h2 class="text-center px-5 font-gilroy mt-5">
                        Important links
                    </h2>

                    <!-- Basic app scaffolding (optional to use) : MADHack-Agon/taskopolis-sample: Sample Taskopolis App
                    (github.com)
                    App Logo : https://raw.githubusercontent.com/MADHack-Agon/.github/main/img/app_icon.svg -->

                    <div class="row justify-content-center">
                        <div class="col-12 col-md-6">

                            <ul class="styled">
                                <li>
                                    <a href="https://madhack.ucscieee.com/agon_figma" target="_blank">Figma
                                        prototype</a>
                                </li>
                                <li>
                                    <a href="https://agon.madhack.ucscieee.com/" target="_blank">REST API and
                                        documentation:</a>
                                </li>
                                <li>Basic app scaffolding (optional to use):
                                    <a href="https://github.com/MADHack-Agon/taskopolis-sample" target="_blank">
                                        MADHack-Agon/taskopolis-sample: Sample Taskopolis App (github.com)
                                    </a>
                                </li>
                                <li>App Logo:
                                    <a href="https://raw.githubusercontent.com/MADHack-Agon/.github/main/img/app_icon.svg"
                                        target="_blank">
                                        https://raw.githubusercontent.com
                                    </a>
                                </li>

                            </ul>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <footer>
        <div class="container-fluid bg-dark text-white py-4 px-5">
            <div class="row">
                <div class="col-12 text-center">
                    <p class="mb-0">© 2023 MadHack
                        <br />
                        A project by
                        IEEE Student Branch of University of Colombo School of Computing
                    </p>
                </div>
            </div>
        </div>
    </footer>



    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"
        integrity="sha512-uURl+ZXMBrF4AwGaWmEetzrd+J5/8NRkWAvJx5sbPSSuOb0bZLqf+tOzniObO00BjHa/dD7gub9oCGMLPQHtQA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</body>

</html>