What To-Do zonder een handig lijstje! DIY To-Do lijst mini tool

In de drukte van het dagelijks leven vertrouwt iedereen op to-dolijsten om georganiseerd te blijven. Het nadeel is echter de rommel van fysieke notities op je bureau. Om dit aan te pakken, ben ik begonnen aan een mini-project om een tool te maken waarmee ik mijn to-dolijsten rechtstreeks in ons klantenportaal kan opslaan. Op deze manier kan ik mijn taken bekijken en opslaan in het klantaccount waaraan ik momenteel werk, waardoor naadloze organisatie wordt gegarandeerd.

Het Belang van Online To-Do-lijsten:

We hebben allemaal momenten van overweldiging ervaren, jonglerend met meerdere taken en mogelijk het vergeten van cruciale items. Hier komen online to-dolijsten te hulp. Of het nu voor werk, het persoonlijke leven of boodschappen is, het hebben van een digitale to-dolijst voorkomt bureaurommel en zorgt ervoor dat taken altijd zichtbaar zijn.

Evolutie van Ons Klantenportaal:

Als onderdeel van onze voortdurende inspanningen om ons klantenportaal te verbeteren, hebben we verschillende functies geïntroduceerd, waaronder een verbeterde E-mailhandtekeninggenerator, domeinbeheer en een tool voor het maken en lanceren van gepersonaliseerde landingspagina's. Ons doel is om het klantenportaal te transformeren tot een allesomvattend platform dat voldoet aan de behoeften van startende ondernemers, met tools voor facturering, planning, klantenbeheer en meer.

Bouwen van een Aangepaste Online To-Do-lijst:

Om het probleem van het effectief beheren van software- en ontwikkelingsprojecten aan te pakken, startte ik een project om een aanpasbare online to-dolijst te creëren binnen ons klantenportaal. Hieronder beschrijf ik de stappen die ik heb genomen om deze tool te ontwikkelen.

HTML-structuur:

Ik begon met de HTML-structuur, met het maken van invoervelden voor taaknaam en -omschrijving, samen met een "Taak opslaan" knop. Bootstrap-klassen werden gebruikt voor styling.

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

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

    <button id="submit_btn" class="btn-primary btn mt-2">Taak opslaan</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-logica:

De JavaScript-logica behandelt invoervalidatie, creatie van to-do-elementen en het opslaan/opvragen van taken van lokale opslag. Functies werden gemaakt om invoer te controleren, to-do-elementen te maken, taken op te slaan, taken op te halen bij het laden van de pagina en taken te verwijderen.

  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 omvat een "done" klasse om voltooide taken visueel aan te geven met een FontAwesome-pictogram en een achtergrondkleur.

.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;  
}

Voorbeeld:

Conclusie:

Door een aanpasbare online to-dolijst te integreren in ons klantenportaal, heb ik een handige tool gecreëerd voor efficiënt taakbeheer. Deze oplossing maakt naadloze opslag en ophalen van taken mogelijk, wat een opgeruimde en georganiseerde werkruimte bevordert. Terwijl ik deze tool blijf verbeteren, is het doel om gebruikers in staat te stellen meerdere lijsten voor verschillende projecten te beheren en een uitgebreid overzicht te bieden voor betere taakprioritering.