What To-Do without a handy list! DIY To-Do list mini tool!

Knowledge Base, React

Published: 31.01.2024

In the hustle and bustle of daily life, everyone relies on to-do lists to stay organized. However, the downside is the clutter of physical notes on your desk. To address this, I embarked on a mini project to create a tool that allows me to store my to-do lists directly in our customer portal. This way, I can access and save my tasks in the customer account I'm currently working on, ensuring seamless organization.

The Importance of Online To-Do Lists:

We've all experienced moments of overwhelm, juggling multiple tasks and possibly forgetting crucial items. This is where online to-do lists come to the rescue. Whether for work, personal life, or groceries, having a digital to-do list helps prevent desk clutter and ensures tasks are always visible.

Evolution of Our Customer Portal:

As part of our ongoing efforts to enhance our customer portal, we've introduced various features, including an improved Email Signature Generator, domain management, and a tool for creating and launching personalized landing pages. Our goal is to transform the customer portal into a comprehensive platform catering to the needs of budding entrepreneurs, offering tools for invoicing, planning, client management, and more.

Building a Custom Online To-Do List:

To address the challenge of managing software and development projects effectively, I initiated a project to create a customizable online to-do list within our customer portal. Below, I outline the steps I took to develop this tool.

HTML Structure:

I started with the HTML structure, creating input fields for task name and description, along with a "Save Task" button. Bootstrap classes were used for styling.


<div class="col-12">
    <label>ToDo Name</label>
    <input class="form-control" type="text" placeholder="Task Name" id="todoName">

    <label>ToDo Description</label>
    <input class="form-control" type="text" placeholder="Task Description" id="todoDescription">

    <button id="submit_btn" class="btn-primary btn mt-2">Save Task</button>
</div>

<div class="col-12 mt-2">
    <div class="alert-danger" id="errors"></div>
</div>
<div class="col-12">
    <div id="todo"></div>
</div>


JavaScript Logic:

The JavaScript logic handles input validation, creation of to-do elements, and saving/retrieving tasks from local storage. Functions were created to check input, create to-do elements, save tasks, retrieve tasks on page load, and delete tasks.


  window.onload = function () {
            getToDoList();
        };

        var enterButton = document.getElementById("submit_btn");
        enterButton.onclick = checkInputToDo;

        function checkInputToDo() {
            clearErrors();

            var name = document.getElementById("todoName").value;
            var description = document.getElementById("todoDescription").value;

            if (name.length > 0 && description.length > 0) {
                makeToDoElement(name, description);
                saveListElement(name, description);
            } else {
                showErrors(name, description);
            }
        }

        function clearErrors() {
            var errorBox = document.getElementById('errors');
            if (errorBox.innerHTML !== "") {
                errorBox.innerHTML = "";
            }
        }

        function showErrors(name, description) {
            var errorBox = document.getElementById('errors');

            if (name.length === 0) {
                appendError('De naam van je TODO item is niet ingevuld');
            }
            if (description.length === 0) {
                appendError('De omschrijving van je TODO item is niet ingevuld');
            }

            function appendError(errorMessage) {
                var p = document.createElement('P');
                p.appendChild(document.createTextNode(errorMessage));
                p.classList.add('p-2');
                errorBox.appendChild(p);
            }
        }

        function makeToDoElement(name, description) {
            var list = document.getElementById("todo");
            var divcard = createDivWithClass("div", "card border border-primary my-2");
            var divbody = createDivWithClass("div", "card-body-row");
            var divcol10 = createDivWithClass("div", "col-10");
            var h4 = createElementWithClass("H4", "card-title", name);
            var p = createElementWithClass("P", null, description);
            var divbtn = createDivWithClass("div", "col-2");
            var dBtn = createButtonWithClasses("button", ["float-right", "btn", "btn-danger"], "X");

            divcol10.appendChild(h4);
            divcol10.appendChild(p);
            divbody.appendChild(divcol10);
            divbody.appendChild(divbtn);
            divcard.appendChild(divbody);
            list.appendChild(divcard);

            function taskDone() {
                divcard.classList.toggle("done");

                removeFromSession(name, description);
            }


            divcard.onclick = taskDone;
            dBtn.onclick = function (event) {
                event.path[3].remove();
                regenerateListForLocalStorage();
            };
            divbtn.appendChild(dBtn);

            document.getElementById("todoName").value = "";
            document.getElementById("todoDescription").value = "";
        }


        if (name.length > 0 && description.length > 0) {
            makeToDoElement(name, description);
            saveListElement(name, description);
        }

        function saveListElement(todoName, todoDescription) {
            var todo = {name: todoName, description: todoDescription};
            var todos = getStoredTodos();

            todos.push(todo);
            localStorage.setItem('todolist', JSON.stringify(todos));
        }


        function getStoredTodos() {
            return localStorage.getItem('todolist') ? JSON.parse(localStorage.getItem('todolist')) : [];
        }

        function getToDoList() {
            var todolist = getStoredTodos();
            var listContainer = document.getElementById("todo");

            listContainer.innerHTML = "";

            for (var i = 0; i < todolist.length; i++) {
                makeToDoElement(todolist[i].name, todolist[i].description);
            }
        }

        function deleteListItem(event) {
            event.path[3].remove();
            regenerateListForLocalStorage();
        }

        function removeFromSession(name, description) {
            var todos = getStoredTodos();
            var updatedTodos = todos.filter(function (todo) {
                return !(todo.name === name && todo.description === description);
            });

            localStorage.setItem('todolist', JSON.stringify(updatedTodos));
        }

        function regenerateListForLocalStorage() {
            var list = document.getElementById("todo").children;
            var todos = [];

            for (var i = 0; i < list.length; i++) {
                var nameElement = list[i].getElementsByTagName('H4')[0];
                var descriptionElement = list[i].getElementsByTagName('P')[0];

                if (nameElement && descriptionElement) {
                    var name = nameElement.innerHTML;
                    var description = descriptionElement.innerHTML;

                    var todo = {name: name, description: description};
                    todos.push(todo);
                }
            }

            localStorage.setItem('todolist', JSON.stringify(todos));
        }

        function createDivWithClass(elementType, classNames) {
            var div = document.createElement(elementType);
            if (classNames) {
                classNames.split(' ').forEach(function (className) {
                    div.classList.add(className);
                });
            }
            return div;
        }


        function createElementWithClass(elementType, className, text) {
            var element = document.createElement(elementType);
            if (className) {
                element.classList.add(className);
            }
            if (text) {
                element.appendChild(document.createTextNode(text));
            }
            return element;
        }

        function createButtonWithClasses(elementType, classes, text) {
            var button = document.createElement(elementType);
            if (classes) {
                classes.forEach(function (className) {
                    button.classList.add(className);
                });
            }
            if (text) {
                button.appendChild(document.createTextNode(text));
            }
            return button;
        }

CSS Styling:

CSS styling includes a "done" class to visually indicate completed tasks with a FontAwesome icon and a background color.


.done:before {  
    font-family: "Font Awesome 5 Free";  
    content: "\f00c";  
    display: inline-block;  
    padding-right: 3px;  
    vertical-align: middle;  
    font-weight: 900;  
    font-size: 80px;  
    position: absolute;  
    right: 70px;  
    color: #34b534;  
}  

.done {  
    background: #d3efd3;  
}

Preview:

Conclusion:

By integrating a customizable online to-do list into our customer portal, I've created a convenient tool for efficient task management. This solution allows for the seamless storage and retrieval of tasks, promoting a clutter-free and organized workspace. As I continue to enhance this tool, the goal is to enable users to manage multiple lists for different projects and provide a comprehensive overview for better task prioritization.

Read some of our blogs down here!

Expand your knowledge with the 4BIS Blog...

WordPress and Plugins – A world that opens up for you!

WordPress, Web development, Ecommerce / Webshop, Knowledge Base, WooCommerce

With plugins you can expand the functionality of WordPress or add completely new functions to WordPress. You can make plugins yourself, provided you know PHP, or you can download them.

Read more

Unveiling Tech-Nieuws.nl: Where Innovation Meets Ingenuity

SEO / SEA, Software Modernisation, Web development, PHP, Symfony, Digital Marketing

In the bustling realm of technology, staying updated is not just a necessity but a lifestyle. With an overflow of information bombarding us daily, having a reliable source to curate and present the latest tech news becomes invaluable. Enter Tech-Nieuws.nl,...

Read more

HR software: This is how you automate Human Resource Management

Business software, Software Modernisation, Web development, Automate

HRM, also known as Human Resource Management, is an important part for every company. Especially if you have many employees, an HR department is indispensable. However, it is not necessary to have a huge HR department. Much can be automated using HR...

Read more

And what can we do for you?_

Do you want to know more or are you interested? Please feel free to contact us directly, by phone or via mail.
Or use one of our contact forms so that we can answer you as quickly and appropriately as possible can give. We would love to hear from you!

back to top