Planning Week 4 - kiara1404/so-nuts GitHub Wiki

Dit is de week waarin ik moet knallen. Ik heb erg veel over UX en design nagedacht de afgelopen tijd maar eigenlijk nog niet zoveel code geschreven. Ik ben vorige week pas begonnen met het implementeren van Clientside JS en alleen voor het formulier.

// adds class to element
function addClass(element, className) {
    element.classList.add(className);
};

//removes class from element
function deleteClass(element, className) {
    element.classList.remove(className);
}


function showSubmitBtn() {
    if (i >= fieldset.length) {
        submitBtn.classList.remove('hide');
        nextBtn.classList.add('hide');
    }
}

function updateFormSteps() {
    document.querySelector(`fieldset:nth-of-type(${i})`).classList.add('hide');
    document.querySelector(`fieldset:nth-of-type(${i})`).classList.remove('show');
    i++;
    console.log('i =', i);
    document.querySelector(`fieldset:nth-of-type(${i})`).classList.add('show');

    showSubmitBtn();

}
// FORM
// when JS is enabled
if (form) {
    addClass(submitBtn, 'hide');
    addClass(fieldset[1], 'hide');
    addClass(fieldset[2], 'hide');
    addClass(fieldset[3], 'hide');
    addClass(fieldset[4], 'hide');
    addClass(fieldset[5], 'hide');
    deleteClass(nextBtn, 'hide');

    nextButtons.forEach(e => e.addEventListener('click', () => {
        updateFormSteps()
        updateProgressBar()

    }));

    function updateProgressBar() {
        const totalFieldsets = fieldset.length;
        const width = i / totalFieldsets
        formProgress.style.width = width * 100 + '%';

    }
}
// END FORM

Ik ben aan de slag gegaan met het zoeken op internet hoe ik het beste progress bars kan maken. Helaas is het mij nog niet gelukt om deze te kunnen updaten. Voor nu zijn ze nog geanimeerd met CSS en dus geen echte indicatie. Ook heb ik zelf een json file gemaakt waarin ik een paar doelen heb ingezet omdat de API nog steeds niet af was. Die doelen laadt ik met behulp van een for loop in in EJS. Ik heb ook mock data toegevoegd op het dashboard om te demonstreren hoe het eruit zou zien als je een paar doelen selecteert om aan te werken.
Verder heb ik ook een checkmark toegevoegd aan het dashboard. Dit moet uiteindelijk groen worden wanneer je de doelen gehaald hebt. Alleen werkt dit nu nog niet.
Als je goed kijkt naar de nav bar, is daar een icoontje bij gekomen. Koop zei vorige week dat ik consistent in mijn ontwerp moest zijn en omdat ik een blok toegewijd had op het dashboard, er ook een aparte pagina voor moet komen. Ik weet nog niet zo goed wat ik wil laten zien op die pagina en ga daar nog even goed over nadenken. Ik heb deze week helaas weer niet heel veel javascript geschreven maar meer nog de puntjes op de i gezet voor het ontwerp.

Op maandag had ik weer een feedback sessie met Winnie op de HvA. Dit was een iets korter gesprek aangezien ik allemaal wat kleinere dingetjes had toegevoegd. Ik liet mijn vorderingen zien en we hebben vooral besproken wat voor content ik zou kunnen toevoegen aan de progressie pagina. Wat hieruit kwam is dat het misschien niet motiverend zou werken als ik hier alleen maar gewicht of spiermassa etc. zou laten zien. Dat was toch het eerste waar ik aan dacht bij het woord progressie. Toen we eenmaal in gesprek waren kwam ik met het idee om misschien het verschil met de vorige week of vorige dag zou kunnen laten zien. Dit deed mijn oude Samsung Wearable altijd en mijn iPhone doet dit met mijn schermtijd elke week. Dit leek haar inderdaad een goed idee. Ook hoopte ze dat alle technische dingen zouden lukken omdat ze het echt goede ideeën vond.

Op donderdag had ik nog een digitale meeting met Wouter. Ik voelde mij een beetje opgelaten omdat ik eigenlijk op technisch vlak nog niet hele grote vorderingen had gemaakt ten opzichte van de vorige keer dat wij elkaar spraken. Ik had wel een vraag of hij misschien tips had over hoe ik het beste een dynamische progressbar zou kunnen maken. Ik had al wat op internet rond gezocht maar er zijn onwijs veel verschillende manieren. Hij gaf hierbij wel wat tips voor de berekeningen die ik zou kunnen doen om de breedte van de balk te kunnen bepalen. Verder ging het gesprek vooral over de API. Zij hadden het namelijk overgenomen van de andere partij en een hele nieuwe API gemaakt die klaar was. We zouden hier aan het einde van de dag bericht over krijgen.

De code review met Joost was een eye opener voor mij. Hij besprak eigenlijik de voortgang van zaken met mij en merkte dat ik nogal gespannen was over mijn project.(PANIC MODE) Hierbij kreeg ik het advies om even in de 'helicopter' te stappen en duidelijk te maken voor mijzelf wat ik nog moest doen, wat ik nog wil doen en of dit beide haalbaar is in de tijd die er nog is. Ik zat er namelijk even doorheen omdat ik nog zoveel technische uitdagingen had die ik maar voor mij uit bleef schuiven. Ik heb daarna ook een overzicht gemaakt in Github Projects om het zo voor mezelf wat duidelijker te maken wat ik echt nog wilde doen en mij daarop moest kunnen focussen.

De design review zat ik weer bij Koop. Hierin liet ik de vorderingen zien en kreeg ik eigenlijk het advies om echt die blokjes op de detail pagina te vullen. Ik had dit nog steeds niet gedaan ... Ook kreeg ik de tip om één detail verder uit te werken. Wat gebeurd er als je op het cardio blokje klikt?

• Gegevens kunnen toevoegen met FileSystem in json
• json file ophalen en dynamisch op detailpagina en dashboard renderen
• Progress bars werkend maken
• Zorgen dat het formulier werkt als clientside JS is uitgeschakeld
• Resultaten pagina optimaliseren (dit zijn checkboxes dus bv :checked state toevoegen)
• Progressie pagina vullen met relevante content.