In 2021 heb ik 5 maand naar een marathon toe getraind en uitgelopen. Tijdens het lopen bedacht ik mij dat als ik dat kon bereiken met focus en commitment dat ik dezelfde principes kon inzetten in mijn werk. En hier zijn we, de start van mijn 100 dagen coderen challenge. 1 Februari begin ik en 11 Mei zal de laatste dag van de challange zijn.

Ik ga mij focussen op het leren van Javascript, niets meer niets minder. Hiervoor volg ik de “The Complete JavaScript Course 2022: From Zero to Expert!” cursus op Udemy.

Output

Ik wil graag tijdens de challenge minimaal 2 dingen creëren, los van de cursus.

• Een tool die ik dagelijks kan gebruiken.
• Een game

Regels

• elke dag minimaal een half uur
• externe accountability, ik hou een log bij en post elke dag een bericht op onze front-end kanaal in discord.

Uitzonderingen

• Overmacht door ondersteuning bij zwangerschap
• (Spontane) borrels.

Mocht ik door onderstaande uitzonderingen, een dag missen dan haal ik die in het weekend in en / of dan gebruik in de Google Grashopper app om code te oefenen.

Gemist: 13 + 7 hele week pauze / 20

Uitgelichte learnings:

• 2 manieren om variabelen vanuit JS te projecteren in de HTML
  • Gebruik de document.write() method
  • Projecteer het in een div doormiddel van de innerHTML property
• () haakjes heten ook parentheses in het engels
• => is een arrow, gebruikt in de arrow functions
• Focus! Niet te veel afwijken (een beetje af en toe is wel leuk)
• Doe je het dagelijks? Probeer je dan aan de tijd te houden
• Een cursus combineren met andere uitdagende levensfases is pittig en misschien niet de ideale combinatie 🙈

Bronnen:

• JavaScript cheetsheet
• MDN – operator precedence table
• MDN – Web API’s

Log

Dag 1 – Start van de challange en de cursus

01-02-2022

Dag 2 – Instellen van mijn code editor en js fundamentals

02-02-2022
Instellen van mijn code editor en js fundamentals. Daarnaast even snel een kort spelletje geprogrammeerd, ik noem hem princeJs.

💡 #Bonustip: JavaScript console -> ctrl + shift+ J in windows

let js = 'amazing"
if (js === 'amazing') alert('javascript is fun')

Dag 3

03-02-2022

Vandaag wederom de basics, wat simpele code na typen omdat ik toch elke dag moet coderen voor de challange 🙂

• Eerst JavaScript goed leren voor je een framework kiest
• JavaScript kan buiten de browser draaien
  • Node.js op server level
• Web, app & software developen kan allemaal met JS
• Versies
  • ES5 – ES2015 = ECMAscript
  • ES6 >
• Een regel sluit je af met ; maar dit hoeft niet! Het wordt wel beschouwd als good coding though #bestpractise.

Dag 4

04-02-2022
Values & Variables – #1 – start

• Naming Convention
• CamelCase schrijven van variabelen

Dag 5 – Values & Variables – #2

• Start een variable niet met een cijfer, hoofdletter, reserverd keywords (new etc) of een ampersand, your gonna have a bad time mkay
• Hoofdletters gebruik je alleen voor constanten die nooit veranderen zoals PI

Dag 6 – Data types

• Objects en Primitive datatypes
• 7 primitive datatypes (kende er 4 uit mijn hoofd)
  1. Numbers
     1. Altijd floating point dus decimaal
  2. String
     1. single of double quotes
     2. text
  3. Boolean
     1. true / false
  4. Null
     1. Empty
  5. Undefined
     1. Empty
  6. Symbol
     1. Uniek en kan niet veranderen
  7. Big int
     1. Grote getallen
• Dynamic typing
  • JS kijkt zelf welke datatype er in een value zit
    • Een value heeft een data type, niet de variable

console.log(typeof true)


Dag 7 - afronding van datatypes met tuts

• JS legacy bug typeof null is een object
  • Achtergrond informatie
  • Er is ooit een fix voorgesteld maar niet goedgekeurd

let bug = null;
console.log(typeof null);

Dag 8– Var, let en const

• Var is the old way
• Let & const sinds ES6
• Let
  • Let is muteerbaar (Let number = ‘One’ / number = ‘Two’
  • Voorbeeld -> Leeftijd
• Const
  • Constant
  • Kan niet veranderen.
    • Error als je deze muteert
  • Voorbeeld -> Geboortejaar
  • Mag niet leeg zijn
• Best practise; zo min mogelijk muteerbare variabelen gebruiken omdat deze bugs uitnodigen
• Ik mag geen var meer gebruiken vanaf nu
  • Zelfde werkwijze als Let, onder de motorkap totaal anders
    • Let = block scoped
    • Var = function scoped
    • Function Scope & Block Scope in JS
• Je kunt zonder declaratie van een variable maar dan valt hij buiten de scope, hij wordt dan global.
• Los van de cursus geleerd , je kunt door scheiden komma de declaratie ook korter schrijven

let one ='1',
    two = '2',
    three = '3';
console.log(1, 2 , 3 )

Dag 9 – Basic operators start

• Veel verschillende operators
  • Mathematical
    • plus en minus
    • * keer
    • / divide
  • Bekijk alle operators
• Stoeien om dit te laten werken:

<label for="test">Number test (10-100):</label>
<input type="number" id="test" min="10" max="100" value="88">

var inputValue = input.value;
if (inputValue) {
    inputValue = input.value;
};
const input = document.querySelector('input[type="number"]');
console.log(input);

// console.log(input.min); // '0'
// console.log(parseInt(input.min)); // 0
// console.log(+input.min); // 0

Dag 10 - Off the beaten track, stukje freewheelen
Mezelf opgeblazen met een hardlooptraining, mentaal een aardappel dus mijn tijd besteed aan het lezen over en oplossen van bovenstaande stukje code uit dag 9. Opgelost door .value er achter te zetten op de waarde uit het input veld te krijgen. En het inladen van het .js bestand onder in het bestand om de onderstaande error op te lossen:
Uncaught TypeError: Cannot read properties of null (reading 'min'). Duh!

<label for="test">Number test (10-100):</label>
<input type="number" id="test" value="88">

console.log('-------------- test 2 ----------------');
const input = document.querySelector('input[type="number"]').value;
console.log(input);
console.log(input.min); // '0'
console.log(parseInt(input.min)); // 0
console.log(+input.min); // 0

Dag 11 
11-02-2022
Niet gehaald, dankzij overheerlijke speciaalbiertjes met de misses.

Dag 12
12-02-2022

• Concatenate strings met de + operator
• Assignment operators
  • let x = 10 + 5;
  • x+=10 // x = x + 10
  • X++ = + 1
• Comparison operators
  1. > <
  2. <= >=
• Operator precedence – introductie

Dag 13
13-02-2022

MDN Operator precedence table
De cijfer in de table geeft de volgorde aan en daarnaast staat ook nog de links naar rechts of andersom voorrang.

Math operators gaan voor de comparison operators.

let x, y;
x = y = 25 -10 -5;
console.log(x, y);

Dag 14 – Strings & template literals

const sentence = ‘hello, i’m’ + variable

const sentence = “hello, i’m” + name + “and i’m awesome”;

` = backtick

Template literale = const sentence = `hello, my name is {$firstName}`;

Dag 15 – String met multiple lines

15-02-2022

\n\ lines

• dit werkt eigenlijk alleen door een bug in de taal
• dit hoeft niet bij een template literale, die regelt dit zelf!
• Komt straks van pas als we html gaan maken vanuit javascript! Oke dit moet ik proberen.

const hero = `
<div class="container">
<div class="hero">This is a hero</div>
</div>
`;
document.getElementById("structure").innerHTML = hero;
console.log(hero)

en in mijn html bestand heb ik een divje met een id structure. I wurks! Hij injecteert de waarde in het HTML document.

💡 #Bonustip: Nog wat leuk leesvoer on the subject -> 1. https://javascript.plainenglish.io/different-uses-of-template-literals-in-javascript-50e22a618436 

2. https://wesbos.com/template-strings-html 

3. https://medium.com/samsung-internet-dev/html-and-templates-javascript-template-literals-2d7494ea3e6

Dag 15 – Keuzes maken met if / else statements

16-02-2022

const age = '26';
const isOldEnough = age => 18;

if(isOldEnough) {
    console.log('🚗 Jordi mag zijn rijbewijs halen! 🚗')
}

💡#Bonustip: Windows + period sign voor emoticons keuze menu in je editor. Heb je geen windows? Koop er hier een of kijk wat het is voor OSX of Linux is.

Dag 16 – vervolg van dag 15

Ai, mijn scherpe collega developers zagen de flaws in bovenstaande code. Bleek mijn eigen fout bij het nadoen van de les overigens maar van je fouten leer je het meest! Zo was de leeftijd een string in plaats van een number wat goed gaat maar niet zou mogen #foei. En age => 18; moet natuurlijk zijn >= is gelijk of groter dan.

const age = 16;
console.log('Mag Jordi zijn rijbewijs halen?');

if(age >= 18) {
    console.log('🚗 Jordi mag zijn rijbewijs halen! 🚗');
} else {
    const yearsLeft = 18 - age;
    const story =`
    Nog
    ${yearsLeft} jaren
    te gaan.
    `;
    console.log('🚗 Nein! Jordi mag zijn rijbewijs NIET halen! 🚗');
    console.log(story);
}

Daarnaast gespeeld met een stukje javascript die bubbles op je scherm toont, bekijk hem hier.

Dag 17 – ❌

Dag 18 – ❌

Dag 19 – Type conversion and Coercion

Je hebt 7 primitieve datatypes. Javascript kan 3 conversions doen, naar een number, string en boolean.

Stel je hebt een input veld op een pagina voor geboortejaar. En je wilt bij de value uit deze input veld een getal bij optellen dan kan dat niet omdat je een string terug krijgt en die kan je niet samenvoegen met een number, zie dag 16.

Type conversion = van de ene type naar een andere type.

console.log(Number('Moneys'));
- geeft NaN terug wat staat voor Not a Number.
console.log(String('1'));
- Geeft 1 terug in het wit wat betekent dat het een string is.

💡 #Bonustip: In de console zijn cijfers blauw en strings wit (in darkmode).

💡 #Bonustip: Begin de functies hierboven, Number en String wel met een hoofdletter, anders werken ze niet.

Dag 20 – Type conversion and Coercion #2

Type coercion gebeurd automatisch op het moment dat JS te maken heeft met twee verschillende types. Hieronder worden twee types, namelijk een string en een number type samengevoegd.

console.log('I am' + 38 + 'years old') ;

In JS werkt bovenstaande lijn omdat hij automatisch (Coercion) de number omzet naar een string. In elke andere taal had de 38 vervangen moeten worden door string(38) om te kunnen valideren.

🎮#Bonustest: Wat is de uitkomst van onderstaande sommetje?

let n = '1' + 1;
n = n - 1;
console.log(n);

Dag 21 – Coercion #3 en start Thruthy en Falsy values

Nog wat spelen met sommetjes en uitkomsten gokken om Coercion onder de knie te krijgen. Naar wat ik nu begrijp een handig mechanisme maar volgens mij kun je het beter direct goed schrijven.

som1 = 2 + 3 + 4 + '5';
console.log(som1);

som2 = '10' - '4' - '3' - 2 + '5'; 
console.log(som2);

Falsy values

Er zijn 5 Falsy values, namelijk:

• 0
• Undefined
• ”
• Null
• NaN

console.log(Boolean(0));
console.log(Boolean('foobar'));
console.log(Boolean(undefined));
console.log(Boolean(null));
console.log(Boolean({})); // empty object

Wanneer doet JS Coercion bij een Boolean? Bij Logical operators en bij If/else statements. In de test hieronder zie je een mooi voorbeeld van Coercion .

🎮#Bonustest: Wat zou hier uit komen?

const money = 0;
if(money) {
    console.log("Don't spend it all");
} else {
    console.log("Go get a job!");
}

Dag 22 – Thruthy en Falsy values #2

Spontaan op de avond zelf een date night en wegens klussen aan de kinderkamer geen ruimte meer. Maar challanges vinden plaats in het echte leven met onverwachte schakelmomenten dus schakelen maar. Gelukkig ben ik weer aan het spelen met early rising, dus de wekker om 6 voor een vroege sessie JS!

#1 Wat is de uitkomst?
let height; // geen value
if (height) {
    console.log('YAY! Height is defined)');
} else {
    console.log('Height is UNDEFINED');
}

#2 Wat is de uitkomst? 
En klopt dit?

let height = 0; // geen value
if (height) {
    console.log('YAY! Height is defined)');
} else {
    console.log('Height is UNDEFINED');
}

Dag 23 / 24 – Equality operators

Donderdag avond gesloopt door drukte en early rising door de week, wel begonnen maar nam niets meer op dus redelijk zinloos. “Gelukkig” vandaag in de ochtend twee uur lang wachten in het ziekenhuis dus kan ik mooi wat meters maken!

Langzaam wordt de cursus wat interessanter!

• Als een vergelijking, true / false check maar 1 check is dan kan dit in JS op 1 regel geschreven worden zonder block te openen met curly brackets. #clean
• De smooth strict operator === exact hetzelfde
• Loose operator == / Clean code best practise is om deze zoveel mogelijk te vermijden vanwege moeilijk te vinden bugs. Bijv hij maakt van een string een number = type coercion.

const age = 18;
if(age == 18) console.log("You can call yourself a adult!")

const age = 18;
if(age === 18) console.log("You can call yourself a adult!")

• Promt function
  • prompt(“Whats your favourite number?”)
  • Genereerd een value die je bijv kan opslaan in een const

const favourite = prompt("Whats your favourite number?");
console.log(favourite);
if(favourite == 2){
    console.log("You ar probably Toine because 2 is his favourite number")
} else {
    console.log("You are probably somebody else")
}

Dag 25 – Equality operators #2

Naast else nu ook gespeeld met de else if constructie, we are going places!

const biggestDouche = prompt("Who is the biggest douche in the universe?");
console.log(biggestDouche);
if(biggestDouche == 'Poetin'){
    console.log("Ring ding ding! Poetin is the biggest douche in the universe indeed!");
}
else if(biggestDouche == "Trump"){
    console.log("Close! But it's Poetin!");
}
else if(biggestDouche == 'Aleksandr Loekasjenko'){
    console.log("Close, its actualy Poetin! But he is the second biggest douche");
}
else {
    console.logz('Are you living under a rock?');
}
if(biggestDouche !== "Poetin"){
    console.log('The only right answer is Poetin of course!');
}

• De different function !==.
  • Schijnbaar heeft deze geen strict version?

The biggest douche in the world

Dag 26 – Boolean logic

• Tak van computer science
• And, or & not operators
• Introductie in de Truth table
• Not operator heeft voorrang op de Or & and operators.

Dag 27 – ❌

Dag 28 – Logical operators

Logical operators combineren twee expressies.

• && = And in javascript
• || = OR
  • && gaat voor ||
• ! = Not

const a = true;
const b = true;
const c = false;

if(a && b && !c) {
console.log('All boolean variable values are true');
} else {
console.log('Not all variables values are true');
}

Makes sense?

console.log(true && true) // true
console.log(false && true) // false
console.log(true && false) // false
console.log(false && false) // false
console.log(true || true) // true
console.log(true || false) // true
console.log(false || true) // true
console.log(false || false) // false

Dag 29 – Switch Statement

• Alternatief voor een if / else statement.
• Een switch statement bestaat uit een variable waar je het statement op loslaat, een case (block), een break na een case en een volgende case
• Aan het eind kun je een default toevoegen die diend als een fallback in het geval geen van de cases voldoen aan de value in de variable
• Zonder break na een case stopt de code niet met uitvoeren
• De vergelijking is altijd strict. Dit is as designed maar is eventueel met workarounds te omzeilen.

Dag 30 – freewheelen

Ik kwam overdag deze tutorial tegen over het gebruiken van de viewport dimensies en het gebruiken van de min / max CSS waarden om een clamp functie te maken voor het schalen van de font size. Aangezien ik dit super interessant vondt ben ik daar vanavond wat verder ingedoken en zo kwam ik onder andere de Web API’s tegen. De Geolocation API is de eerste waar ik mee gespeeld heb. Een API om de actuele locatie op te halen met de Long en Lang waarden. 

Hieronder een stukje code om een aantal actuele waarden op te halen vanuit de browser, die ik in een variabele plaats en vervolgens projecteer via een div met de innerHTML property.

width = $(window).width();
height = $(window).height();
ua = navigator.userAgent;
url = window.location.href;

if('geolocation' in navigator) {
    navigator.geolocation.getCurrentPosition((position) => {
        let locationReal = position.coords.latitude, position.coords.longitude;
        console.log(position.coords.latitude, position.coords.longitude);
    });
} else {
    /* geolocation IS NOT available */
}

document.getElementById("infoWidth").innerHTML = width;
document.getElementById("infoHeight").innerHTML = height;
document.getElementById("infoUa").innerHTML = ua;
document.getElementById("infoUrl").innerHTML = url;
document.getElementById("infoLocation").innerHTML = locationReal;

Dag 31 – Statements en expressions & de conditional operator (ternary)

• Een expressie is een stukje code die een waarde genereerd.
• Een statement is een groter stukje code die op zichzelf geen waarde genereerd.
• Ternary is vertaald naar het nederlands ternair wat staat voor drietal
• Naast de if / else statement en de switch statement is de conditonal operator de 3e mogelijkheid
• De tenerary operator is ideal voor snelle beslissingen.

age >= 18 ? console.log('Your can drink beer!') : console.log('Your to young to drink beer!');

Hij bestaat dus uit de 3 volgende onderdelen:

1. >= comparison operator en een
2. if (?)
3. en dan een else (:)

Dag 32 – eat sleep code repeat

Afgelopen nacht had ik een nachtmerrie met daarin een probleem, gelukkig kon ik het met Javascript oplossen #danweetjedatjetijdgenoegspendeerd. Vandaag besteed aan het bij langs lopen van alles wat ik eerder geleerd al heb. #dekrachtvanherhaling

Dag 33 – Strict mode

Aanbeland bij JavaScript Fundamentals part 2! 🥳

• ‘use strict’; aan het begin activeert de strict mode
• Strict mode kan ingesteld worden per script of per functie bijboorbeeld
• Tegenovergestelde van de stict mode heet in de volksmond onofficeel ook wel de sloppy mode
• Geintroduceerd in ES5
• Strict mode kan in theorie performance verhogen
• Voorkomt het maken van bugs
• Activeert in sommige gevallen extra foutmeldingen en uitleg waar hij anders stil de mist is zou gaan

'use strict';
let hasDriversLicence = false;
const passTest = true;

if (passTest) hasDriverLicence = true;
if (hasDriversLicence) console.log('i can drive!');

Zonder strict modus gaat bovenstaande statement mis, stilzwijgend. Met strict modus geeft hij aan dat de variabele hasDriverLicence (zonder s) niet bestaat.

Dag 34 – Functions

• Functions zijn als variabelen maar dan voor hele stukken code
• In en output

function greetings() {
    console.log('Ahola World!');
}
// Calling the function / running / invoking
greetings();

function blender(apples, oranges) {
    console.log(apples, oranges);
    const juice = `Juice with ${apples} apples and ${oranges} oranges`;
    return juice;
}
const fruitSapje = blender(5, 9);
console.log(fruitSapje);

Dag 35 – vervolg functies, Declarations vs Expressions

• Parameters en arguments worden vaak als hetzelfde gezien maar een parameter is de niet ingevulde argument tussen de haakjes achter een functie en het argument is de daadwerkelijke input / output.
• Anonymous function , een ander woord voor een functie zonder naam declaratie (function keyword), bijvoorbeeld omdat je hem in een variabele stopt

Function expression

const calcAge2 = function (birthYear) {
    let year = 2022;
    return year - birthYear;
}
const age2 = calcAge2(1992);
console.log(age2);

Dag 36 – vervolg expresions versus declaration & Arrow function

• Het is een voorkeur of je gaat voor function expressions (los functie blok) of function declarations (in variabele). Mijn persoonlijke voorkeur vanaf hier gaat uit naar function expressions omdat dit er schoner uitziet. Eerst alle functies boven in declareren en dan beneden in gebruiken
• De arrow function een de 3e function type en bestaat pas sinds ES6

// Arrow function
const calcAge3 =  birthYear => 2022 - birthYear;
const age3 = calcAge3(1984);
console.log(age3);
geen curly brackets en geen return.

Dag 37 – vervolg Arrow function

const yearsUntilRetirement = birtYear => {
    //code block
        const age = 2022 - birtYear;
        const retirement = 65 - age;
        return retirement;
    }

console.log(yearsUntilRetirement(1984));

Als je meer dan 1 regel hebt met een arrow functie zoals hierboven,
een codeblock tussen curly brackets, dan moet je als nog een return gebruiken.
Hierobven moet je ook specifiek de retirement invullen bij de return omdat er
meer variabelen gedefinieerd worden.

const yearsUntilRetirement = (birtYear, firstName) => {
    //code block
        const age = 2022 - birtYear;
        const retirement = 65 - age;
        return `${firstName} retires in ${retirement} 
	years`;
    }
    
console.log(yearsUntilRetirement(1984, 'Toine'));
console.log(yearsUntilRetirement(1992, 'Frida'));

Ondanks dat de arrow functie cleaner is en daarmee de beste keuze lijkt
is dat niet altijd het geval. Ze hebben namelijk geen this keyword.

Dag 38 – Functions calling functions

Een bekend principe die ik al vroeg geleerd heb en die bekend is in de development wereld en alle talen is DRY, wat staat voor “Dont Repeat Yourself. Een onderdeel daarvan is dus het gebruiken van functies in functies. In het voorbeeld hieronder betekent het dat je maar op een plek hoeft aan te passen hoeveel stukjes hij maakt, in plaats van twee in het onderstaande voorbeeld.

function cutFruitPieces(fruit) {
	return fruit * 4;
}

function blender(apples, oranges) {
	const applePieces = cutFruitPieces(apples); 
	const orangePieces = cutFruitPieces(oranges);

    const juice = `Juice with ${applePieces} apples and ${orangePieces} oranges`;
    return juice;
}
const fruitSapje = blender(2, 3);
console.log(fruitSapje);

Uitleg Fruit moet eerst in stukjes voor het in de blender kan. Daarom wordt de cutFruitPieces functie aangeroepen in de blender functie om eerst het fruit in stukjes te snijden. Je stopt 2 appels en 3 oranges er in, hoeveel krijg je er weer uit?

Dag 39 – Reviewing functions

Alles wat ik heb geleerd de afgelopen 5 dagen, over functions nog een keer bij langs gegaan. En door! Update: aangezien ik de nacht in het ziekenhuis doorbracht en niet echt code geschreven had heb ik tijdens het wachten gebruik gemaakt van de Google Grasshopper app om code te oefenen.

Dag 40 – Arrays!

Een array is een datastructure waar je meer dan een single value in kunt opslaan.
Een array openen je met een [ en sluit je met een ]

Literal syntax:
const friends = ['Michael', 'Steven', 'Peter'];
console.log(friends);

Een andere manier om een array te schrijven is:
const years = new array(1992, 1984, 2022)
Array is hier een functie

Dag 41 – Arrays! Part #2

• Arrays zijn zero based
• .length is een property (niet zero based) waarmee je een item uit een array kan halen.
• console.log(friends[friends.length – 1]);
• Aanpassen van een array kan ook -> friends[2] = ‘Jay’;
• Arrays zijn muteerbaar ook als ze in een const zitten.
• Je kunt van alles in een array stoppen, zelfs multidimensionale arrays behoren tot de opties. Dus een array in een array!

// Meerdere leeftijden berekeken:
const calcAge = function (birthYear) {
	return 2022 - birthYear;
}
const years = [1984, 1992];

const age1 = calcAge(years[0]);
const age2 = calcAge(years[1]);

console.log (age1, age2);

Dag 42 – Basic Array Operations (Methods)

Je kunt methodes op een array loslaten, er zijn veel meer array methods maar degene hieronder heb ik nu behandeld.

.push
.unshift’
.shift
.pop
.indexOf
.includes

// Add elements last
const newLength = friends.push('Dude');
// Push is een functie hier
console.log(friends);
console.log(newLength);
// Add elements first;
friends.unshift('John');
console.log(friends);
// Remove element last
friends.pop();
const popped = friends.pop();
console.log(popped);
console.log(friends);
friends.shift();
console.log(friends);
console.log(friends.indexOf('Steven'));
// Check if its in the array 
console.log(friends.includes('Steven'));
console.log(friends.includes('Bob'));

// conditionals with arrays
if (friends.includes('Steven')) {
	console.log('You have a friend called Peter');
}

Dag 43 – Objects!

• Objects zijn ook een data structure, net als arrays
• Een object kun je het beste zien als een “Groep”
• Objecten zijn zeer geschikt voor ongeordende data
• Arrays meer voor georderde data
• Elementen een naam geven in een array kan niet. Om dat op te lossen heb je objecten
• In objecten heb je key-value pairs waar je dan de value aan kan hangen.

// object
// Hieronder is de object literal syntax, er zijn andere methodes.
const toine = {
	firstName: 'Toine',
	lastName: 'Branbergen',
	age: 2022 - 1984,
	job: 'Webdeveloper',
	hobbys: ['Developpen', 'Hardlopen', 'Gamen', 'Zeilen'] 
};

Dag 44 – ❌

Gesloopt door slaapgebrek en drukke week, vroeg naar bed. Overdag in mijn werk heb ik wel twee keer javascript gebruikt. Een keer om een modal te laten verschijnen het tonen van de website, in een cookie bij te houden en na 6 pageviews opnieuw te laten zien. En als backdoor om de modal sneller te tonen heb ik een easter egg ingebouwd om hem vervolgens met een aantal toetsen te voorschijn te krijgen.

Dag 45 – Dot versus bracket notation

1. Dot notatie. Eerste manier om een value uit een object te tonen is met de dot. Dit is de makkelijkste en schoonste manier om dit te doen. Zie code 1.
2. Bracket notatie. Hiermee kun je extra truckjes doen die van pas kunnen komen. Zie code 2

Code 1
const toine = {
	firstName: 'Toine',
	lastName: 'Branbergen',
	age: 2022 - 1984,
	job: 'Webdeveloper',
	hobbys: ['Developpen', 'Hardlopen', 'Gamen', 'Zeilen'] 
};
console.log(toine.firstName);
console.log(toine['lastName']); 

Code 2
const toine = {
	firstName: 'Toine',
	lastName: 'Branbergen',
	age: 2022 - 1984,
	job: 'Webdeveloper',
	hobbys: ['Developpen', 'Hardlopen', 'Gamen', 'Zeilen'] 
};
const nameKey = 'Name'; 
console.log(toine['first' + nameKey]);
console.log(toine['last' + nameKey]);

const toine = {
	firstName: 'Toine',
	lastName: 'Branbergen',
	age: 2022 - 1984,
	job: 'Webdeveloper',
	hobbys: ['Developpen', 'Hardlopen', 'Gamen', 'Zeilen'] 
};
const interestedIn = prompt('What do you want to know about Toine? Choose between firstName, lastName, age, job, and hobbys')
console.log(toine[interestedIn]);

Dag 46 – ❌

Hele dag, laatste klussen en partay.

Dag 47 – Object methods

Een functie die gekoppeld is aan een object heet een methode.

const toine = {
	firstName: 'Toine',
	lastName: 'Branbergen',
	birthYear: 1984,
	age: 2022 - 1984,
	job: 'Webdeveloper',
	hobbys: ['Developpen', 'Hardlopen', 'Gamen', 'Zeilen'],
	hasDriverLicense: true,

	calcAge: function(birthYear) {
		return 2022 - birthYear;
	}
};

console.log(toine.calcAge(1984));

Dag 48 – Object methods part #2

• Elke methode krijgt een speciale variable genaamd $this (keyword)
• $This projecteert dat wat voor de dot staat dus wie $this aanroept
• Waarom niet benoemen in plaats van refereren met $this? Omdat de naam van het object kan veranderen maar $this als referentie niet. #dry

const toine = {
	firstName: 'Toine',
	lastName: 'Branbergen',
	birthYear: 1984,
	age: 2022 - 1984,
	job: 'Webdeveloper',
	hobbys: ['Developpen', 'Hardlopen', 'Gamen', 'Zeilen'],
	hasDriverLicense: true,

	calcAge: function(birthYear) {
		this.age = 2022 - this.birthYear;
		return this.age; 
	}
};

console.log(toine.calcAge());
console.log(toine.calcAge());
console.log(toine.calcAge());

Dag 49 – Iteration: the for loop

• Loops zijn een van de controle structuren
• Loops zijn bedoeld om repetatieve taken te automatiseren
• Een for loop heeft een counter

//Niet DRY:
console.log('Lifting weights repetition 1');
console.log('Lifting weights repetition 2');
console.log('Lifting weights repetition 3');
console.log('Lifting weights repetition 4');
console.log('Lifting weights repetition 5');
console.log('Lifting weights repetition 6');
console.log('Lifting weights repetition 7');
console.log('Lifting weights repetition 8');
console.log('Lifting weights repetition 9');
console.log('Lifting weights repetition 10');

// For loop
// for Loop keeps running while condition is TRUE
// rep++ is short voor rep = rep + 1
for(let rep = 1; rep <= 10; rep++) {
	console.log(`Lifting weights repetition ${rep}`);
}

Dag 50 – Looping arrays, breaking and continuing

const toine = [
	'Toine',
 	'Branbergen',
	'18',
	'Webdeveloper',
	'developer, hardlopen, zeilen'
];

// start met 0 want array is zero based
// i++ = i = i + i
// 5 items
// toine[5] bestaat niet
// Dus de counter moet onder de 5 blijven

for(let i = 0; i < 5; i++) {
	console.log(toine[i])
};

Dag 51 – Looping arrays, breaking and continuing – part 2

Pro tip 
Via mijn Collega, mr Dennis aka Woewal

for(let i = 0; i < toine.length; i++) {
    console.log(toine[i])
};

door de 5 als harde grens te vervangen door de .length powerUp kun je dingen aan de array toevoegen zonder de grens aan te passen #dry.

• Missing initializer in const declaration exception error uitzoeken
  • In tegenstelling tot een var en een let moet een const gedefineerd worden

Checken van de type van elke value in een array:
const toine = [
	'Toine',
 	'Branbergen',
	'18',
	'Webdeveloper',
	'developer, hardlopen, zeilen',
	true,
	42
];

// Empty array
const types = [];

for(let i = 0; i < toine.length; i++) {
	console.log(toine[i], typeof toine[i]);

	types[i] = typeof toine[i];
}; 

console.log(types);

Dag 52 – Looping arrays, breaking and continuing – part 3

const years = [1991, 2007, 1969, 2020];
const ages = [];

for (let i = 0; i < years.length; i++) {
 ages.push(2022 - years[i]);	
}
console.log(ages);

Dag 53 – ❌

Dag 54 – Break and continue

• Met continue kun je de array loop filteren op een type value bijvoorbeeld
• Met break kun je hem laten stoppen als er een type value in voor komt.

const toine = [
	'Toine',
 	'Branbergen',
	'18',
	'Webdeveloper',
	'developer, hardlopen, zeilen',
	true,
	42
];
//Continue
const types = [];
console.log('--- ONLY STRINGS ----');
for(let i = 0; i < toine.length; i++) {	
	if(typeof toine[i] !== 'string') continue;
	console.log(toine[i], typeof toine[i]);
}; 
//Break
console.log('--- ONLY NUMBERS ----');
for(let i = 0; i < toine.length; i++) {	
	if(typeof toine[i] === 'number') break ;
	console.log(toine[i], typeof toine[i]);
}; 

Dag 55 – Looping backwards and loops in loops

Looping backwards
const toine = [
	'Toine',
 	'Branbergen',
	'18',
	'Webdeveloper',
	'developer, hardlopen, zeilen',
	true,
	42
];
// 0,1...., 4
// 4,3 0000, 0

// 4 bad idea, hard coded numbers dus lenth = 5  - 1 = 4
// ipv i++ is het i-- 
for (let i = toine.length - 1; i >=0; i--) {
	console.log(i, toine[i]);
}

Loop in loop
for (let excerise = 1; excerise <= 3; excerise++) {
    console.log(`------------ ${excerise}
    `);
    
    for (let rep = 1; rep <= 5; rep++) {
        console.log(`Lifting weight repetition ${rep}
    `);
    }
}

Dag 56 – last but not least, the While loop

🥳 #mijlpaal – Sectie 3 – JavaScript fundamentals – part 2 – afgerond

Vandaag heb ik sectie 3 / 21: JavaScript fundamentals – part 2 afgerond. Les 41 van de 320! En nog steeds heel veel plezier.

• While loop is veelzijdiger dan de for loop
• Te gebruiken in meer situaties
• Heeft geen counter nodig, alleen een condition
• Inzetten wanneer je niet precies weet hoeveel itteraties de loep zal hebben

let dice = Math.trunc(Math.random() * 6) + 1; 
console.log(dice);  

// different from 6
while (dice !== 6) {
console.log(`You rolled a ${dice}`);
dice = Math.trunc(Math.random() * 6) + 1; 

if (dice === 6) console.log('Loop is about to end ...');
};

Dag 57 – Introductie dag vervolg cursus

Vandaag is het eind van de fundamentals en stoom ik door naar de meer advanced lessen. Vandaag heb ik overdag voor het eerst 2 uur lang JavaScript gebruikt om een probleem op te lossen met verschillende uitklap menu’s die over elkaar heen lagen. Een #mijlpaal jet again, en in het algemeen begin ik steeds meer zelf uit mijn hoofd te gebruiken in mijn dagelijkse werk dus dat is vooruitgang! Deze avond besteed ik dan ook aan een aantal algemene lessen zonder code ter voorbereiding op de rest van de cursus.

• VS code instellingen tips
• VS code extensie – Prettier – code formater / Prettier website
• Default formatter instellen – prettier vscode gebruiken
• Format on save – aanzetten
• Prettier past bijvoorbeeld alle ‘ single quotes aan naar ” double quotes. Dit is in te stellen via de config van prettier als je dit niet wilt. Dit kan onder andere door in de projectmap een .prettierrc bestand aan te maken en daar bijvoorbeeld:

{
"singleQuote:" true,
"arrowParens:" avoid,
}

Dag 58 – Avondje Grasshopper

Ter afwisseling een avondje oefenen met Grasshopper.

Dag 59 – Grasshopper #2

Verslavende manier om met code bezig te zijn 😎

Dag 60 – Node.js opzetten van een dev omgeving + learning how to code en fail fast

Dit gedeelte heb ik al onder controle en heel vaak gedaan met verschillende tools op verschillende systemen. Toch heb ik de les gevolgd om te kijken of ik toch nog wat kan bijleren.

Handige extensie voor VS code – LiveReload

#wiehetkleinenieteerdishetgrotenietweerd chrome 100 is uit 🥳

Hoe faal je het hardst bij het leren van javascript?

• Geen duidelijk doel!
• Copyen van code in plaats van zelf typen
• Geen challanges of notities maken
• Geen eigen project ideeen om te oefenen
• Raakte snel zijn motiviatie kwijt omdat hij dacht nooit alles te kunnen leren
• Hij deelde zijn progressie niet
• Hij kreeg geen gig omdat hij geen eigen app kon maken

Dag 61- ❌

Dag 62 – How to think like a developer: become a problem solver

• Problem solving in development betekent niet bugs oplossen maar de stappen zetten om een complex vraagstuk op te lossen.
• Logische en gestructureerde manier (voorkomt stress omdat het bijv niet direct werkt)
• de stappen zo effectief mogelijk uitvoeren om zo de tijdinvestering te beperken (geen tijd verspillen)
• Wordt kalm en neem gas terug
• Mindset – logisch en rationele aanpak

4 step problem-solve framework:

1. 100% begrijpen van het probleem – helikopter view – vraag de juiste vragen
2. Divide and Conquer – een groot probleem opdelen in kleinere subproblemen
3. Wees niet bang om zoveel research te doen als je nodig hebt.Google / SO / MDN gebruiken als je het niet zelf direct kunt tackelen.
4. Voor grotere problemen kun je pseudo-code schrijven voor je de daadwerkelijke code schrijft.

Dag 63 – Leren coderen

• Visualiseer een groot project wat je wilt maken
• Maak een lijst van de technieken die je moet gebruiken
• Leer de technieken, een voor een op een rustige manier
• Copieer niet maar type code over, zo train je je brein
• Maak notities en doe kleine challanges. Ik heb hiervoor mijn blogpost waar ik de notities in stop en een eigen boilerplate project waar ik alles in probeer
• No hurry’s!
• Volg niet alleen cursussen maar gebruik het ook, challange jezelf! Overkom de obstakels.
• Deel je voortgang
• Je bent nooit uitgeleerd!

Mijn eigen tip: Wijk af en toe even van het pad en speel wat met iets wat je mooi vindt.

Three.js:
Zo heb ik vanavond gespeeld met Three.js, die stond al jaren op mijn wenslijst, ver voor ik uberhaupt javascript kon.

Dit awesome voorbeeld wilde ik implementeren samen met Three.js Na een installatie die nog niet helemaal goed gaat omdat ik ook modules moet importen en hiervoor ES6 moet gebruiken. Aangezien ik geen webpack gebruik maar gulp op dit moment moet dit met wat omwegen. De volgende stap in deze obstakel is het implementeren van rollup.js en dit implementeren in mijn Gulp 4 bestand. Gelukkig heb ik een goede Stackoverflow tutorial gevonden … to be continued.

Dag 64 – Debuggen & breakpoints #1

• de term bug komt uit 1940 toen een echte bug voor een probleem zorgde
• iedereen maakt bugs, zelfs de meest ervaren developer
• debuggen is de naam voor het proces om bugs op te lossen en te voorkomen

Het debugging proces

1. Identify
   1. gedurende development of in productie?
   2. gebruik geautomatiseerde testing software
   3. context waarin de bug voorkomt
2. Find
   1. developer console of debugger
3. Fix
   1. vervangen van de verkeerde oplossing met de nieuwe en juiste oplossing
4. Prevent
   1. doorzoek de rest van de codebase of dezelfde bug er nog een keer inzit.
   2. schrijf tests

const measureKelvin = function() {
 const measurement = {
	type: 'temp',
	unit: 'celsius',
	value: promt('Degrees celsius:')
 }

const kelvin = measurement.value + 273;
return kelvin;
}
console.log(measureKelvin());

Debuggen in de console

Je hebt naast console.log nog drie andere types:

1. console.warn
2. console.error
3. console.table

Zij ik drie? Er zijn veel meer console mogelijkheden!

💡Tip! Inhoud van een object weergeven in de console? Gebruik console.table voor een mooie table weergave.

Dag 65 – Debuggen & breakpoints #2

Aan de hand van voorbeeld code en de code aanpassen spelenderwijs de javascript debugger in Chrome leren kennen.

Debugger in chrome:

• Sources tab in console
• klik op het javaScript bestand die je wil debuggen
• breakpoints plaatsen door voor de regelnummer te klikken (rode stip / inmiddels schijnbaar een soort blauwe bookmark in darkmode anyways)
• de executie stop op de regel die je met een breakpoint aangeeft.

Dag 66 – avondje grasshopper

Vanavond voor de afwisseling weer wat JavaScript puzzels in de grasshopper app gedaan 👌

Dag 67 – herhaalrecept

Grasshopper puzzels oplossen.

Dag 68 – Introductie nieuwe sectie – DOM manipulatie!

Begonnen met sectie 7 van de 20 , Javascript in the browser: Dom en Event Fundamentals! 🍺 Nu gaat het echte werk beginnen, we gaan een spelletje maken genaamd Guess my number! 💪

Features:

• geheim nummer raden wat tussen de 10 en de 20 ligt
• score na elke fail gaat naar beneden
• highscore bijhouden
• reset, alles weg behalve highscore

Element met selector en inhoud selecteren en projecteren?

console.log(document.querySelector('.message'));

Wil je alleen de inhoud? Voeg dan de .textContent power-up toe.

console.log(document.querySelector('.message').textContent);

Dag 69 – ❌

Dag 70 – Grasshopper – string looping

Wegens zwangerschaps complicaties en de bijkomende spanningen gister geskiped en vandaag even kort. Voor het eerst een puzzel waarbij ik iets in Grasshopper moet doen wat ik nog niet in de cursus gedaan heb en dat is de for … of loop.

Dag 71 – DOM manipulatie #1 – de basics

• DOM manipulatie
• DOM = Document Object Model, een gestructureerde boom weergave (DOM tree) van het HTML document.
• Begint met het document element(document.queryselector)
• De rest bestaat uit parent en child elements (HTML propety’s)
• De DOM kan gemanipuleerd worden met JavaScript
• DOM & DOM methoden zijn geen! onderdeel van javascript (document.queryselector etc)
• DOM elementen zijn WEB API’s. Deze zijn wel geschreven in javascript en kunnen interacten met javascript

Content aanpassen van een html DOM element:

document.querySelector('.number').textContent = 13;
document.querySelector('.score').textContent = 10;
document.querySelector('.guess').value = 23;

Dag 72 – Handling click events – Event listener

Dik! Weer een mooi stukje javaScript geleerd vandaag! Meer achtergrond informatie over events in javascript

document.querySelector('.check').addEventListener('click', function () {
  console.log(document.querySelector('.guess').value);
});

Dag 73 – grasshopper training

Loopjes trainen ➿

Dag 74 – grasshopper fundamentals 1 afgerond

Ik heb mijn eerste certificaat binnen! 🥳

Dag 75 – grashoperdihop

Gestart met Fundamentals 2.

• .includes powerup om iets in een string te zoeken
• .replaces power up om iets in een string aan te passen

Dag 76 – ❌

Dag 77 – Spielerei met canvas en svg.js – part #1

Spelen met canvas en svg.js om te kunnen tekenen in de browser.

Dag 78 – Spielerei part #2

Met canvas een driehoek in JS getekend.

 <script>
              function draw() {
                var canvas = document.getElementById("canvas");
                if (canvas.getContext) {
                  var ctx = canvas.getContext("2d");

                  ctx.beginPath();
                  ctx.moveTo(75, 50);
                  ctx.lineTo(100, 75);
                  ctx.lineTo(100, 25);
                  ctx.fill();
                }
              }
            </script>

💪 #extraatje1 een JavaScript stack trace in je browser in de console zien? Gebruik console.trace

💪 #extraatje2 console.log meldingen clusteren voor extra overzicht? Gebruik console.group

Dag 79 – verder met de cursus

De logica van het spelletje verder uitwerken. Een waarde uit een input veld ophalen, blijkt een string te zijn. Strings kun je helaas niet optellen bij een nummer … gelukkig is daar een oplossing voor in de vorm van de number functie die ik eerder al heb geleerd. Daarna de eerste check gemaakt of te kijken of er een value ingevuld is en zo niet om dit te melden.

document.querySelector('.check').addEventListener('click', function () {
  const guess = Number(document.querySelector('.guess').value);
  console.log(guess, typeof guess);

  if (!guess) {
    document.querySelector('.message').textContent = '⛔ No number!';
  }
});

Dag 80 – ❌

Dag 81 – Grasshopper

Dag 82 – ❌

Dag 83 – Back on track met de cursus – herhalen van eventListners & eventHandlers

De laatste tijd was wat tumultueus waardoor ik een aantal keer overgeslagen heb en een paar keer Grasshopper ter vervanging. Vanaf nu focus ik mij voor nu weer even alleen op de cursus.

document.querySelector('.btn').addEventListener('click')

• Click is de eventnaam
• 💪#protip los van de cursus heb ik in mijn huidige baan geleerd van mijn team om zelf een class toe te voegen met de prefix js- en de actie op te zetten.
• Lijst met alle events
• Na de event moet er iets gebeuren, er komt een functie na die de eventHandler wordt genoemd.

document.querySelector('.btn').addEventListener('click', function() {
// eventHandler 
console.log(document.querySelector('.gues') 
})

Dag 84 – Manipulating CSS styles

document.querySelector('body').style.backgroundColor = '#000';

// Waarde moet in een string staan
document.querySelector('number').style.width = '50%';

• de selector mag zonder punt omdat het geen class betreft maar een element.
• background-color is de CSS notatie, in javascript is een tweedelige property altijd camelcase dus backgroundColor. Dit gaat op voor alle property’s.

Dag 85 – ❌

Dag 86 – Implementing the game logic #1

• Implementeren van 1 random geheim nummer, tussen de 0 en de 20
• Raden, te laag
• Raden, goed
• Raden, te hoog

const number = Math.trunc(Math.random()*20) +1; 
document.querySelector('.number').textContent = number;

Learnings

• .Math – random nummer
• Truncate van een getal met de .trunc powerup. Math.trunc(Math.random()*20);

Dag 87 – Game logic #2

Vanavond weer wat verder gewerkt achter de logica.

Learning

• Application state omhelst alle data van de applicatie. In het geval van mijn spelletje, de waarde van het te raden getal, de guess, de score etc

const secretNumber= Math.trunc(Math.random()*20) +1;
let score = 20; 
 
document.querySelector('.number').textContent = secretNumber;

document.querySelector('.check').addEventListener('click', function () {
  const guess = Number(document.querySelector('.guess').value);
  console.log(guess, typeof guess);

  if (!guess) {
    document.querySelector('.message').textContent = '⛔ No number!';
  }

 else if (guess === secretNumber) {
    document.querySelector('.message').textContent = '🥳 Correct number!';
  }

 else if (guess > secretNumber) {
    document.querySelector('.message').textContent = '🥳 Too high!!';
  }

 else if (guess > secretNumber) {
    document.querySelector('.message').textContent = '🥳 Too low!!';
  }

});

Dag 88 – ❌

Dag 89 – Game logic #3

Game logic uitgebreid met een game over of winning scenario met achtergrond kleur aanpassingen + een check op de score zodat je niet oneindig kan doorspelen.

'use strict';

const secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;

document.querySelector('.check').addEventListener('click', function () {
  document.querySelector('.number').textContent = secretNumber;

  console.log(secretNumber);

  const guess = Number(document.querySelector('.guess').value);

  document.querySelector('.message').textContent = 'Start guessing!';
  document.querySelector('.number').textContent = '?';

  if (!guess) {
    document.querySelector('.message').textContent = '⛔ No number!';
  } else if (guess === secretNumber) {
    document.querySelector('.message').textContent = '🥳 Correct number!';
    document.querySelector('body').style.backgroundColor = '#7CFC00 ';
  } else if (guess > secretNumber) {
    if (score > 1) {
      document.querySelector('.message').textContent = '📈 Too high!!';
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      document.querySelector('.message').textContent = 'Loser! Game over 💀';
      document.querySelector('.score').textContent = 0;
      document.querySelector('body').style.backgroundColor = '#FF0000 ';
    }
  } else if (guess < secretNumber) {
    if (score > 1) {
      document.querySelector('.message').textContent = '📉 Too low!!';
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      document.querySelector('.message').textContent = 'Loser! Game over 💀';
      document.querySelector('.score').textContent = 0;
      document.querySelector('body').style.backgroundColor = '#FF0000 ';
    }
  }
});

Dag 90 – Game logic #4 – Highscore implementation

Inbouwen van de highscore functie en de reset functie om het spel opnieuw te spelen met behoud van de highscore. Const secretNumer aangepast naar een Let zodat deze aangepast kan worden. Anders kreeg ik een “Uncaught TypeError: Assignment to constant variable.” error.

'use strict';

// document.querySelector('.score').textContent = 11;
//document.querySelector('.guess').value = 23;

let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highscore = 0;

const displayMessage = function (message) {
  document.querySelector('.message').textContent = message;
};

document.querySelector('.check').addEventListener('click', function () {
  document.querySelector('.number').textContent = secretNumber;

  console.log(secretNumber);

  const guess = Number(document.querySelector('.guess').value);

  document.querySelector('.message').textContent = 'Start guessing!';
  document.querySelector('.number').textContent = '?';

  if (!guess) {
    document.querySelector('.message').textContent = '⛔ No number!';
  } else if (guess === secretNumber) {
    document.querySelector('.message').textContent = '🥳 Correct number!';
    document.querySelector('body').style.backgroundColor = '#7CFC00 ';
    document.querySelector('.number').style.width = '30rem';

    if (score > highscore) {
      highscore = score;
      document.querySelector('.highscore').textContent = highscore;
    }
  } else if (guess > secretNumber) {
    if (score > 1) {
      document.querySelector('.message').textContent = '📈 Too high!!';
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      document.querySelector('.message').textContent = 'Loser! Game over 💀';
      document.querySelector('.score').textContent = 0;
      document.querySelector('body').style.backgroundColor = '#FF0000 ';
    }
  } else if (guess < secretNumber) {
    if (score > 1) {
      document.querySelector('.message').textContent = '📉 Too low!!';
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      document.querySelector('.message').textContent = 'Loser! Game over 💀';
      document.querySelector('.score').textContent = 0;
      document.querySelector('body').style.backgroundColor = '#FF0000 ';
    }
  }
});

document.querySelector('.again').addEventListener('click', function () {
  score = 20;
  secretNumber = Math.trunc(Math.random() * 20) + 1;

  // document.querySelector('.message').textContent = 'Start guessing...';
  displayMessage('Start guessing...');
  document.querySelector('.score').textContent = score;
  document.querySelector('.number').textContent = '?';
  document.querySelector('.guess').value = '';

  document.querySelector('body').style.backgroundColor = '#222';
  document.querySelector('.number').style.width = '15rem';
});

Dag 91 – Going DRY on my code

DRY of Dont Repeat Yourself, want je wilt niet op twee plekken iets aan hoeven passen als het ook op een plek kan. Daarnaast, bij een grotere codebase wordt het beheren en lezen van de code een pain in the ***. Dus daarom altijd, nadat je klaar bent en al een beetje tijdens het proces even een DRY sessie er overheen en de code refactoren.

'use strict';

// document.querySelector('.score').textContent = 11;
//document.querySelector('.guess').value = 23;

let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highscore = 0;

const displayMessage = function (message) {
  document.querySelector('.message').textContent = message;
};

document.querySelector('.check').addEventListener('click', function () {
  document.querySelector('.number').textContent = secretNumber;

  console.log(secretNumber);

  const guess = Number(document.querySelector('.guess').value);

  document.querySelector('.message').textContent = 'Start guessing!';
  document.querySelector('.number').textContent = '?';

  if (!guess) {
    document.querySelector('.message').textContent = '⛔ No number!';
  } else if (guess === secretNumber) {
    document.querySelector('.message').textContent = '🥳 Correct number!';
    document.querySelector('body').style.backgroundColor = '#7CFC00 ';
    document.querySelector('.number').style.width = '30rem';

    if (score > highscore) {
      highscore = score;
      document.querySelector('.highscore').textContent = highscore;
    }

// when guess is wrong
  } else if (guess !== secretNumber) {
    if (score > 1) {
      document.querySelector('.message').textContent =
        guess > secretNumber ? '📈 Too high!!' : '📉 Too low!!';
        displayMessage(guess > secretNumber ? '📈 Too high!!' : '📉 Too low!!');
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      document.querySelector('.message').textContent = 'Loser! Game over 💀';
      document.querySelector('.score').textContent = 0;
      document.querySelector('body').style.backgroundColor = '#FF0000 ';
    }
  }
}); 

else if (guess > secretNumber) {
    if (score > 1) {
      document.querySelector('.message').textContent = '📈 Too high!!';
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      document.querySelector('.message').textContent = 'Loser! Game over 💀';
      document.querySelector('.score').textContent = 0;
      document.querySelector('body').style.backgroundColor = '#FF0000 ';
    }
  } else if (guess < secretNumber) {
    if (score > 1) {
      document.querySelector('.message').textContent = '📉 Too low!!';
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      document.querySelector('.message').textContent = 'Loser! Game over 💀';
      document.querySelector('.score').textContent = 0;
      document.querySelector('body').style.backgroundColor = '#FF0000 ';
    }
  }
});

document.querySelector('.again').addEventListener('click', function () {
  score = 20;
  secretNumber = Math.trunc(Math.random() * 20) + 1;

  // document.querySelector('.message').textContent = 'Start guessing...';
  displayMessage('Start guessing...');
  document.querySelector('.score').textContent = score;
  document.querySelector('.number').textContent = '?';
  document.querySelector('.guess').value = '';

  document.querySelector('body').style.backgroundColor = '#222';
  document.querySelector('.number').style.width = '15rem';
});

Dag 92 – New project 🥳 / Modal window

• document.querySelectorAll – als je alle nodes wil pakken met dezelfde class
• niet geleerd in deze sessie maar overdag maar een CSS class mag niet beginnen met cijfers! Ik werk al heel lang met CSS maar dat is nieuw voor mij dus die wilde ik even delen 😁

'use strict';

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnsOpenModal = document.querySelector('.open-modal');
console.log(btnsOpenModal);

for(let i = -; i < btnsOpenModal.length; i++) 
console.log(btnsOpenModal[i].textContent)';

Dag 92 – ❌

Dag 93 – ❌

Dag 94 – ❌

Dag 95 – ❌

Dag 96 – ❌

Dag 97 – ❌

Dag 98 – ❌

Dag 99 – Working with classes

Learnings

• Net als bij het if statement block hoef je bij de for statement niet de andere conditie te gebruiken en voert hij de eerste regel erna uit
• Eventhandler en eventlistner zijn nagenoeg gelijk
• .classlist en property’s doorgenomen. Meerdere opties mogelijk, komma gescheiden (”, ”,) maar let op geen . voor de class.

'use strict';

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnsOpenModal = document.querySelectorAll('.show-modal');
console.log(btnsOpenModal);

for (let i = 0; i < btnsOpenModal.length; i++)
  btnsOpenModal[i].addEventListener('click', function () {
    console.log('Button clicked');

    modal.classList.remove('hidden');
    overlay.classList.remove('hidden');
  });

Dag 100 – Working with classes #2

• Class properties aanpassen? modal.style.display = ‘block’

'use strict';

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnsOpenModal = document.querySelectorAll('.show-modal');
console.log(btnsOpenModal);

for (let i = 0; i < btnsOpenModal.length; i++)
  btnsOpenModal[i].addEventListener('click', function () {
    console.log('Button clicked');

    modal.classList.remove('hidden');
    overlay.classList.remove('hidden');
  });

const closesModal = function () {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
});

btnCloseModal.addEventListener('click', closesModal);
overlay.addEventListener('click', closesModal);

Eind van een challenge & conclusie

Kort door de bocht, de challenge is niet gehaald, maar mijn doel wel! In het totaal heb ik in 100 dagen, 80 dagen, 40 uur besteed aan de challenge . 20 dagen heb ik de challenge overgeslagen, waarvan 7 achter elkaar aan het eind om tot rust te komen voor de bevalling.

Wat heb ik er aan overgehouden? Ik begrijp nu de werking van Javascript en kon het tijdens mijn werk direct toepassen wat een grote vooruitgang is. Daarnaast heeft het mijn oude passie voor webdevelopment nieuw leven in geblazen.

Geproduceerd (so far):

• A bunch of good dev habits
• Een guess the number game
• Functionele modals
• Certificaat voor javaScript fundamentals in de GrassHopper app
• Een eigen boilerplate installatie op basis van HTML, SCSS en Javascript met Gulp 4 etc.

En nu? De challange is voorbij maar we gaan door natuurlijk. De cursus die ik tijdens de challange volgde ben ik op een kwart en dus nog wel even zoet mee! Daarnaast was ik tijdens de cursus al begonnen met een CSS en HTML opfris course, alle properties bij langs en daar ga ik mee door. Daarnaast ben ik een aantal dingen tegen gekomen waar ik verder mee wil spelen waaronder Storybook, webpack en Three.js.