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

Iedereen kent en gebruikt wel een variant van een to-do lijstje in zijn dagelijks leven. Het nadeel is dat als je het druk hebt is dat binnen no-time je hele bureau vol ligt met lijstjes. Daarom ben ik voor mezelf een tussen projectje beginnen te maken zodat ik mijn to-do lijstjes kan opslaan in onze customer portal. Zo heb ik mijn to-do lijstjes altijd bij de hand en worden ze opgeslagen in de klant account waarin ik aan het werk bent.
updated: Dec 16, 2020 at 5:57PM | published: Jul 23, 2020

Het overkomt ons allemaal wel eens we hebben het druk, we hebben een stapel werk voor ons liggen en doordat we niet meer weten wat er nou precies gedaan moet worden vergeten we net dat ene belangrijke item. Daarom is er de online TO-DO lijst, de lijst met alles wat er nog gedaan moet worden die dag. Iedereen kent en gebruikt wel een variant van een to-do lijstje in zijn dagelijks leven zij het voor zijn werk of voor zijn persoonlijk leven of misschien gewoon een lijst voor de boodschappen. Het nadeel is dat als je het druk hebt binnen no-time je hele bureau vol ligt met lijstjes en dat je door de lijstjes je lijstje niet kan zien.

Zoals we in een eerder artikel verteld hadden is dat we bezig zijn met een klantenportaal en dashboard voor onze klanten. Hier hebben we al een aantal leuke ontwikkelingen in gemaakt. Zo zit er een verbeterde versie in van de Zakelijke Email Handtekening Generator. Klanten kunnen zien welke domeinen ze bij ons hebben geregistreerd en ze kunnen nieuwe domeinen aanschaffen. Maar ook hebben we een online tool ontwikkeld waarmee je je eigen landingspage kan maken en snel live kan zetten.

Zo willen we uiteindelijk dat ons klanten portaal niet alleen een omgeving wordt waar klanten onze diensten kunnen beheren, maar dat het een online platform wordt waar de beginnende ondernemer terecht kan voor al zijn technische zorgen. Dan hebben we het over facturingstools, planners, klantenbeheer en nog meer dingen die we zelf nog niet eens verzonnen hebben.

Wat is een klantportaal?

Wat is een klantportaal? En waar heb je het voor nodig?

Een klantenportaal is een webapplicatie waar jouw klanten op kunnen inloggen en hun gegevens bewerken en diensten die jij als bedrijf aanbiedt kunnen beheren. Je moet hier denken aan het beheren van domeinen als je domeinen verkoopt of accounts beheren van accountgegevens van een maatschappij die VoIP abbonementen verkoopt. Klantenportalen kom je in alle maten en vormen tegen.

Een klantenportaal zorgt ervoor dat jouw klanten een hoop zelf kunnen regelen maar het biedt ook een uitstekend marketing kanaal om je klanten op de hoogte te houden. Hoewel het nuttig is om er een te hebben kan een klantenportaal ontwikkelen al snel oplopen in de kosten. Daarom bouwen wij onze portalen in Symfony een PHP framework met componenten die herbruikbaar zijn.

Heb je een klantenportaal nodig voor jouw website neem dan contact op met een van onze specialisten 

Neem contact op

Je kan je misschien voorstellen dat we met al die software of ontwikkelings projecten af en toe door de bomen het bos niet meer kunnen zien. Daarom ben ik voor mezelf als tussen projectje een mini tool gaan maken zodat ik mijn online to-do lijstjes kan opslaan in onze customer portal. Zo heb ik mijn digitale to-do lijstjes altijd bij de hand en worden ze opgeslagen in de klant account waarin ik aan het werk bent. Dan wil ik later nog een overzicht pagina maken zodat ik in een oog op slag kan zien wat er nog gedaan moet worden voor welk project.

Hieronder zal ik laten zien hoe ik te werk ben gegaan

2

Ik ben begonnen met de html. Ik wilde mijn digitale to-do’s een naam en een omschrijving geven dus ik ben begonnnen met een paar input velden en een button. In mijn project gebruik ik bootstrap dus ik maak gebruik van bootstrap classes.

HTML

<div class=”col-12″>
<label>ToDo Naam</label>
<input class=”form-control” type=”text” placeholder=”Naam van de taak”   id=”todoName”>

<label>ToDo Omschrijving</label>
<input class=”form-control” type=”text” placeholder=”Omschrijving van de  taak” id=”todoDescription”>

<button id=”submit_btn” class=”btn-primary btn mt-2″>Sla je taak op</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>

2

De volgende stap is het ontwikkelen van de front end logica, dat heb ik gedaan in JavaScript. Als eerste wilde ik dat de to-do items tevoorschijn kwamen dus daar ben ik mee begonnnen. De eerste functie die ik heb gemaakt is om te kijken of er wel daadwerkelijk iets is ingevuld in de invulvelden en zo niet dan moet er een error message komen. Ik heb comments bij de code gedaan om uit te leggen wat ik daar doe.

JS

//ophalen van de submit button

var enterButton = document.getElementById(“submit_btn”);

//een click event op de button zetten

enterButton.onclick = checkInputToDo;

function checkInputToDo(){
       //error box leeg maken als hij niet leeg is
       if(document.getElementById(‘errors’).innerHTML !== ”){
              document.getElementById(‘errors’).innerHTML = ”
       }

       //waardes ophalen van de naam en omschrijving
       var name = document.getElementById(“todoName”).value;
       var description = document.getElementById(“todoDescription”).value;

       //kijken of ze leeg zijn zo niet een functie aanroepen om hem te maken
       if (name.length > 0 && description.length > 0) {
              makeToDoElement(name, description);
       }
       //als ze niet leeg zijn willen we errors laten zien
       else {
              var errorBox = document.getElementById(‘errors’)
              //error voor geen naam
              if (name.length === 0){
                     var p = document.createElement(‘P’);
                     p.appendChild(document.createTextNode(‘De naam van je TODO                             item is niet ingevuld’));
                     p.classList.add(‘p-2’);

                     errorBox.appendChild(p);
              }
              //error voor geen omschrijving
              if (description.length === 0){
                     var p = document.createElement(‘P’);
                     p.appendChild(document.createTextNode(‘De omschrijving van je                             TODO item is niet ingevuld’));
                     p.classList.add(‘p-2’);

                     errorBox.appendChild(p);
              }
       }
}

2

De volgende functie die ik ben gaan bouwen is het maken van het TODO item en die geef ik de parameters naam en omschrijving mee. Ik begin met het ophalen van de div waar het todo item in moet komen. Vervolgens maak ik een aantal divs aan die het todo item moeten gaan vormen ik gebruik wederom bootstrap classes om alles te stylen. En ik voeg 2 onclick events toe een op het hele item voor als de taak is afgerond en nog een op de delete button.

JS

function makeToDoElement(name, description) {

       //ophalen van de div waar de todo elementen straks in moeten komen
       var list = document.getElementById(“todo”);

       //maken van de divs
       var divcard = document.createElement(“div”);
       var divbody = document.createElement(“div”);
       var divbtn = document.createElement(“div”);
       var divcol6 = document.createElement(“div”);

       //maken van de h4 voor de naam
       var h4 = document.createElement(‘H4’);
       //maken van de paragraph element voor de omschrijving
       var p = document.createElement(‘P’);

       //toevoegen van de bootstrap classes
       divcard.classList.add(‘card’, ‘border’, ‘border-primary’, ‘my-2’)
       divbody.classList.add(‘card-body’, ‘row’);
       divcol10.classList.add(‘col-10’);
       h4.classList.add(‘card-title’);

       //toevoegen van de naam op de h4
       h4.appendChild(document.createTextNode(name));
       //toevoegen van de omschrijving op de p
       p.appendChild(document.createTextNode(description));

       //het aan elkaar zetten van de verschillende divs
       divcol10.appendChild(h4);
       divcol10.appendChild(p);
       divbody.appendChild(divcol10);
       divbody.appendChild(divbtn)
       divcard.appendChild(divbody);
       list.appendChild(divcard);
       name.value = “”;
       description.value = “”;

       function taskDone() {
              divcard.classList.toggle(“done”);
       }

       //onclick event toevoegen op het todo item die triggered een functie die        de done class toevoegd
       divcard.onclick = taskDone;

       //maken van de delete button en het toevoegen van de bootstrap classes
       var dBtn = document.createElement(“button”);
       dBtn.appendChild(document.createTextNode(“X”));
       dBtn.classList.add(‘float-right’, ‘btn’, ‘btn-danger’);
       divbtn.classList.add(‘col-2’);
       divbtn.appendChild(dBtn);

       //onclick event toevoegen op de button die triggered een functie die het        element verwijderd
       dBtn.onclick = deleteListItem;

       //functie om het to-do item te deleten dat met heeft aangeklikt
       function deleteListItem(event){
              event.path[3].remove();
       }
}

Nu hebben we alles gedaan om je todo items toe te voegen en weer te verwijderen het enige probleem is ze worden niet opgeslagen. In ons eigen project ben ik nu een andere kant op gegaan en sla ik de lijstjes op in een database. Maar ik zal je laten zien hoe je je digitale lijstjes op kan slaan in localstorage van je browser.

2

Voordat we het lijstje gaan opslaan moeten we eerst nog in onze code een stukje terug de functie call inzetten dat er wordt opgeslagen dit doen we direct na de functie dat het todo element aanmaakt.

JS

//kijken of ze leeg zijn zo niet een functie aanroepen om hem te maken
if (name.length > 0 && description.length > 0) {
    makeToDoElement(name, description);
    saveListElement(name, description);
}

2

Dan gaan we nu kijken naar de save functie. We roepen de functie aan nadat we een todo item aanmaken. Eerst maken we een todo object aan met de 2 waardes die we willen opslaan namelijk de naam en de omschrijving je kan dit later uitbreiden met extra items. Daarna gaan we kijken of we al wat in localstorage hebben staan, zo niet dan maken we een lege array aan en daar pushen we ons todo object in en vervolgens slaan we het op in localstorage. Als er al wel wat in staat halen we eerst de lijst op die er al staat die decoden we en dan pushen we ons todo object erin en we slaan het daarna weer op.

JS

function saveListElement(todoName, todoDescription) {

       //aanmaken todo object en de waardes naam en omschrijving erin zetten
       var todo = {
              name:todoName,
              description:todoDescription
       };

       //kijken of localstorage onze lijst al heeft
       if(localStorage.getItem(’todolist’) === null){

              var todos = [];
              //pushen van het todo object naar een leeg array
              todos.push(todo);

              //opslaan in localstorage
              localStorage.setItem(’todolist’, JSON.stringify(todos));

       }
       else{

              //ophalen en decoden van de lijst uit localstorage
              var todoList = localStorage.getItem(’todolist’);
              todoList = JSON.parse(todoList);

              //pushen nieuw object naar bestaande lijst
              todoList.push(todo);
              //opslaan in localstorage
              localStorage.setItem(’todolist’, JSON.stringify(todoList));
       }
}

2

We zijn er bijna! Wat we nu hebben ontwikkeld zorgt ervoor dat de todo’s verschijnen als je ze invoert en dat ze worden opgeslagen in localstorage maar als we de pagina opnieuw laden zien we er helemaal niks ervan terug. Dus we moeten nog een functie hebben die on page load de todo’s ophaalt en laat zien. Bovenaan de JavaScript zetten we window.onload = getToDoList dit zorgt ervoor dat op het laden van de pagina de functie getToDoList uitgevoerd wordt. In die functie kijken we eerst of localstorage leeg is of niet. Als hij niet leeg is halen we de lijst op en gaan we de lijst een voor een af en maken we gebruik van de functie die een to-do element maakt met de parameters naam en omschrijving.

JS

function getToDoList() {

       //kijkt of localstorage leeg is
       if(localStorage.getItem(’todolist’) !== null){

              //haalt lijst op uit localstorage
              var todolist = JSON.parse(localStorage.getItem(’todolist’));

              //for loop die de lijst een voor een afgaat en de functie aanroept om               het element te maken
              for (var i=0; i < todolist.length; i++) {
                     makeToDoElement(todolist[i].name, todolist[i].description)
              }
       }
}

2

Dan hebben we nog een ding af te handelen en dan zijn we echt klaar als we onze to-do hebben afgevinkt en hem niet meer nodig hebben dan willen we hem kunnen verwijderen. Als we nu op delete klikken dan wordt het element verwijderd maar blijft hij nog steeds bestaan in localstorage. Dus we moeten nog een functie hebben die na het verwijderen alle resterende taken weer opslaat in localstorage.

JS

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

2

We halen eerst de lijst op die overblijft na het verwijderen van ons todo item dan zetten we alle items in een array vervolgens maken we een lege array aan. Nu gaan we met behulp van een for loop alle todo items langs en daar halen we de naam en de beschrijving uit die zetten we in een todo object en die pushen we naar de lege array. Als we alles langs zijn gegaan dan slaan we de array waar we alle todo objecten in hebben gezet weer op in localstorage.

JS

function regenerateListForLocalStorage(){

    //ophalen van de resterende lijst uit de DOM
    var list = document.getElementById(“todo”).children;
    var todos = [];

    //for loop om door de lijst heen te gaan
    for (var i=0; i < list.length; i++){

        //uit het todo item de naam en omschrijving halen
        var name = list[i].getElementsByTagName(‘H4’)[0].innerHTML;
        var description = list[i].getElementsByTagName(‘P’)[0].innerHTML;

        //naam en omschrijving in een todo object zetten
        var todo = {
            name:name,
            description:description
        };

        //todo object naar een array pushen
        todos.push(todo);
    }

    //array met todo objecten opslaan in localstorage
    localStorage.setItem(’todolist’, JSON.stringify(todos));
}

2

En dan zijn we klaar met het JavaScript gedeelte, het enige wat we nu nog moeten doen is wat styles toevoegen in CSS aan de done class. Zodat je kan zien dan een todo object klaar is als je er op klikt. Zelf gebruik ik een fontawesome icon en een background color;

CSS

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

Nu hebben we een complete online mini tool die taken aan kan maken opslaan in de localstorage van je browser en weer terug kan halen. Ik hoop dat je er wat aan hebt gehad. Hieronder zie je een plaatje van het eindresultaat in ons klanten portaal. Zelf ga ik deze tool nog verder uitbreiden zodat je verschillende lijstjes voor verschillend projecten kan invullen en een mooi overview systeem zodat je nog beter kan zien wat je nog te doen hebt.

Benieuwd naar het eindresultaat wij gaan binnenkort live met onze customerportal dus hou onze website in de gaten voor meer nieuws. Al klant van 4BIS? En heb je een goed idee voor een functionaliteit die jouw bedrijf goed kan gebruiken laat het ons weten in de link hiernaast en misschien zie je die functionaliteit terug in ons customer portal.

HIeronder kan je de mini-tool in werking zien


Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de ReactHooks serie! We gaan het hebben over useCallback en over useMemo. Met deze hooks kunnen we waardes of callback memoizen dit kan nuttig zijn bij zware operaties of om te zorgen dat bepaalde componenten niet altijd mee rerenderen. Zeker omdat bij kleine applicatie het vaak efficienter is om niet te optimaliseren dan wel.

Lees meer
Redux de Intro!

Redux de Intro!

Deze week een korte introductie van de 4 basisbegrippen die je nodig hebt om Redux te begrijpen. We gaan kort uitleggen hoe state wordt aangepast in een Redux Store met behulp van Reducers en Actions. En we vertellen wat al deze begrippen doen en hoe ze werken in een Redux applicatie.

Lees meer

Software ontwikkeling op maat

Hoe werkt het?

Wat wonderen doet voor het ene bedrijf kan zinloos zijn voor een ander bedrijf. Daarom hebben we oplossingen op maat die het unieke karakter van jouw bedrijf respecteren. We werken in een positieve spiraal van testen, monitoren en verzamelen gegevens om precies te weten te komen wat voor jou werkt en wat niet. Het is onze ‘whole package’-mindset, een aandacht voor details die ons in staat stelt om elke keer jouw prestatiedoelstellingen te bereiken. Dus ontspan en geniet van de rit!