The Techie INTJ

MAVO | App 1: Task Organizer

MAVO | App 1: Task Organizer

Productivity Made EZ

Tadeo Bennett's photo
Tadeo Bennett
·

3 min read

Table of contents

Hello there! Welcome to the first milestone in the Adventures in MAVO series!

Almost every developer has created a to-do list at the start of their learning journey. No matter the technology, creating a to-do list helps us grasp essential concepts such as create, read, update, and delete operations.

In this post, I set out to walk you through creating a basic to-do list/ task organizer using MAVO. In MAVO, we can create a fully functioning web application with ABSOLUTELY NO JAVASCRIPT(unless you need custom features).

Test out the application

See the source code

DEMO VIDEO

https://youtu.be/Mk2bkTU1agA

Now let's get started now, shall we..?

ADD DEFAULT HTML STRUCTURE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    ...
</body>
</html>

<!--BOOTSTRAP CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<!-- BOOTSTRAP JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

Include the MAVO CDN

<!-- MAVO CDN --> 
<link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
<script src="https://get.mavo.io/mavo.js"></script> <!-- Place in header -->

Define the MAVO App

<body mv-app="todo" mv-storage="local" mv-mode="edit">
...
</body>

Add the CSS

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

p, input{
    display: inline;
}

.page {
    min-height: 100%;
    position: relative;
    overflow: auto;
}

ul {
    list-style: none;
    padding-left: 0;
}

.flex-container {
    position: relative;
}

Include the HTML structure for adding categories

    <div class="page">
        <div class="page-content d-flex flex-column" >
            <main class="container mt-5">
                <div class="d-flex row justify-content-around column-gap-4"> <!-- for the category groups -->
                    <div class="category-group row col-lg-6 p-3 mb-3 border border-dark" mv-multiple="category">
                        <div class="flex-container">
                            <header><h3 type="text" placeholder="(Category name)" property="categoryName" class="h3-style col-lg-10"></h3></header>
                            ...
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

NOTE:

Check your app to ensure that you can add new categories, delete created categories and edit the category names for each.

For the next section, replace "..." with the code provided below.

Include the HTML structure for adding basic tasks

<ul class="col-lg-12">
    <li mv-multiple="basicTask" class="col-10">
        <label>
            <input property="done" type="checkbox" />
            <p type="text" property="task" placeholder="(task)"></p>
        </label>
    </li>
    <button mv-action="delete(basicTask where done)">Clear Completed</button>
</ul>
...

NOTE:

Check your app to ensure that you can add new tasks, edit tasks, and delete completed tasks in any category.

For the next section, replace "..." with the code provided below.

Include the HTML structure for adding subgroups

<div class="d-flex col-lg-12 row">
    <div class="col-lg-6 mb-3" mv-multiple="subGroup">
        <header><h6 type="text" placeholder="(Sub group name)" property="subGroupName" class="h5-style col-lg-10"></h6></header>
        ...
    </div>
</div>

NOTE:

Check your app to ensure that you can add new subgroups, edit subgroup names, and delete subgroups in any category.

For the next section, replace "..." with the code provided below.

Include the HTML structure for adding sub-tasks (tasks in a subgroup)

<ul>
    <li mv-multiple="subTask">
        <label>
            <input property="done" type="checkbox" />
            <p type="text" property="sub task" placeholder="(sub task)"></p>
        </label>
    </li>
    <button class="clear-completed" mv-action="delete(subTask where done)">Clear Completed</button>
</ul>

NOTE:

Check your app to ensure that you can add new sub-tasks, edit sub-tasks, and delete completed sub-tasks in any subgroup of any category.

There you go!

You are now ready to get more productive using your to-do list/ task organizer created in MAVO. If you'd like, send me your thoughts about the application and let me know what you think about MAVO.

MAVO