# Week 1

# Triangle

Maak een bestand triangle.js aan in de reeds aangemaakt folder week-1.

Genereer een driehoek op basis van de breedte (variable b) en de hoogte (variable h). De waarde van de hoogte is gelijk aan de waarde van de breedte. Specificeer ook het het teken dat gebruikt wordt de rechthoek op te vullen – in dit voorbeeld is het een asterisk (*). Specificeer ook het teken dat gebruikt wordt als separator tussen de kolommen – in dit voorbeeld een spatie ().

Tip

Gebruik een for-lus

Resultaat

*  *  *  *  *  *  *  *  *  *  *
*  *  *  *  *  *  *  *  *  *
*  *  *  *  *  *  *  *  *
*  *  *  *  *  *  *  *
*  *  *  *  *  *  *
*  *  *  *  *  *
*  *  *  *  *
*  *  *  *
*  *  *
*  *
*

**Oplossing 1**:

./artevelde/pgm-code/pgm-1/week-2/triangle.js

/*
 * Triangle
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 2
 * Developed by: Philippe De Pauw - Waterschoot
 * Last updated: 21/09/2020
 */
const b = 11;
const h = 11;
const bit = "*";
const gap = "  ";
let tempStr = "";

for (let r = 0; r < b; r++) {
  for (let c = 0; c < h; c++) {
    if (c > 0) {
      tempStr += gap;
    }

    if (c < b - r) {
      tempStr += bit;
    }
    // niet nodig
    // } else {
    //   tempStr += " ";
    // }
  }
  tempStr += "\n";
}
console.log(tempStr);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

**Oplossing 2**:

./artevelde/pgm-code/pgm-1/week-2/triangle_shorter.js

/*
 * Triangle
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 2
 * Developed by: Philippe De Pauw - Waterschoot
 * Last updated: 21/09/2020
 */
const b = 11;
const h = 11;
const bit = "*";
const gap = "  ";
let tempStr = "";

for (let r = 0; r < b; r++) {
  for (let c = 0; c < h; c++) {
    tempStr += (c > 0 ? gap : "") + (c < b - r ? bit : " ");
  }
  tempStr += "\n";
}
console.log(tempStr);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

**Oplossing 3**:

./artevelde/pgm-code/pgm-1/week-2/triangle_alt.js

/*
 * Triangle
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 2
 * Developed by: Thibault Fouquaert
 * Last updated: 30/09/2020
 */
const b = 11;
const h = 11;
const bit = "*";
const gap = "  ";
let tempStr = "";

//onderstaande oplossing werkt met een omgekeerde teller, plaats uit uit commentaar om te testen en plaats bovenstaande for-lus in commentaar
for (let r = b; r >= 0; r--) {
  //tellen met r van 11 naar 1 ipv O naar 10
  for (let c = 0; c < r; c++) {
    //merk op: c < r als conditie. We willen de lus evenveel uitvoeren als onze teller  in de buitenste lus (r): voor de 1e rij (r=11) 11 keer (c:0,1,...,10), voor de 2e rij (r=10) 10 keer (c:0,1,...,9), voor de 11e rij (r=0) 1 keer (c:0)
    tempStr += (c > 0 ? gap : "") + bit; //het eerste deel na += checkt of we de eerste ster/kolom zetten, want die hoeft niet vooraf gegaan worden door een spatie. Na al dan niet de spatie volgt de effectieve ster ( + bit )
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Triangle reverse

Maak een bestand triangle_reverse.js aan in de reeds aangemaakt folder week-1.

Genereer een omgekeerde driehoek op basis van de breedte (variable b) en de hoogte (variable h). De waarde van de hoogte is gelijk aan de waarde van de breedte. Specificeer ook het het teken dat gebruikt wordt de rechthoek op te vullen – in dit voorbeeld is het een asterisk (*). Specificeer ook het teken dat gebruikt wordt als separator tussen de kolommen – in dit voorbeeld een spatie ().

Tip

Gebruik een for-lus

Resultaat

*
*  *
*  *  *
*  *  *  *
*  *  *  *  *
*  *  *  *  *  *
*  *  *  *  *  *  *
*  *  *  *  *  *  *  *
*  *  *  *  *  *  *  *  *
*  *  *  *  *  *  *  *  *  *
*  *  *  *  *  *  *  *  *  *  *

**Oplossing 1**:

./artevelde/pgm-code/pgm-1/week-2/triangle_reverse.js

/*
 * Triangle Reverse
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 2
 * Developed by: Philippe De Pauw - Waterschoot
 * Last updated: 21/09/2020
 */
const b = 11;
const h = 11;
const bit = "*";
const gap = "  ";
let tempStr = "";

for (let r = 0; r < b; r++) {
  for (let c = 0; c < h; c++) {
    if (c > 0) {
      tempStr += gap;
    }

    if (c <= r) {
      tempStr += bit;
    } else {
      tempStr += " ";
    }
  }
  tempStr += "\n";
}
console.log(tempStr);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

**Oplossing 2**:

./artevelde/pgm-code/pgm-1/week-2/triangle_reverse_shorter.js

/*
 * Triangle Reverse
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 2
 * Developed by: Philippe De Pauw - Waterschoot
 * Last updated: 21/09/2020
 */
const b = 11;
const h = 11;
const bit = "*";
const gap = "  ";
let tempStr = "";

for (let r = 0; r < b; r++) {
  for (let c = 0; c < h; c++) {
    tempStr += (c > 0 ? gap : "") + (c <= r ? bit : " ");
  }
  tempStr += "\n";
}
console.log(tempStr);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

**Oplossing 3**:

./artevelde/pgm-code/pgm-1/week-2/triangle_reverse_alt.js

/*
 * Triangle Reverse
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 2
 * Developed by: Thibault Fouquaert
 * Last updated: 30/09/2020
 */
const b = 11;
const h = 11;
const bit = "*";
const gap = "  ";
let tempStr = "";

//onderstaande oplossing werkt door de binnenste lus niet telkens evenveel (bv 10 keer) uit te voeren per iteratie van de buitsenste lus, maar slechts evenveel iteraties als er bits nodig zijn.
// hoeveel bits(*) zijn er nodig per rij? evenveel als de n-de rij (rij 1 -> *, rij 2 -> **,...)
for (let r = 0; r < b; r++) {
  for (let c = 0; c <= r; c++) {
    //merk op: c <= r als conditie. We willen de lus evenveel uitvoeren als onze teller in de buitenste lus (r): voor de 1e rij (r=0) 1 keer (c:0), voor de 2e rij (r=1) 2 keer (c:0,1), voor de 11e rij (r=0) 11 keer (c:0,1,...,10))
    tempStr += (c > 0 ? gap : "") + bit; //het eerste deel na += checkt of we de eerste ster/kolom zetten, want die hoeft niet vooraf gegaan worden door een spatie. Na al dan niet de spatie volgt de effectieve ster ( + bit )
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Border rectangle

Maak een bestand border_rectangle.js aan in de reeds aangemaakt folder week-1.

Genereer een lege rechthoek met enkel een zichtbare border op basis van het aantal kolommen (variable nCols) en het aantal rijen (variable nRows).

Tip

Gebruik een for-lus
Gebruik het conditionele statement if … else if … else
Gebruik optioneel de ternary operator (conditie) ? value1 : value2

Resultaat

*  *  *  *  *  *  *  *
*                    *
*                    *
*  *  *  *  *  *  *  *

**Oplossing 1**:

./artevelde/pgm-code/pgm-1/week-2/border_rectangle.js

/*
 * Border rectangle
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 2
 * Developed by: Philippe De Pauw - Waterschoot
 * Last updated: 21/09/2020
 */
const nCols = 8;
const nRows = 4;
const bit = "*";
const gap = "  ";
let tempStr = "";

for (let r = 0; r < nRows; r++) {
  for (let c = 0; c < nCols; c++) {
    if (c > 0) {
      tempStr += gap;
    }

    if (r === 0 || r === nRows - 1 || c === 0 || c === nCols - 1) {
      tempStr += bit;
    } else {
      tempStr += " ";
    }
  }
  tempStr += "\n";
}
console.log(tempStr);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

**Oplossing 2**:

./artevelde/pgm-code/pgm-1/week-2/border_rectangle_shorter.js

/*
 * Border rectangle
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 2
 * Developed by: Philippe De Pauw - Waterschoot
 * Last updated: 21/09/2020
 */
const nCols = 8;
const nRows = 4;
const bit = "*";
const gap = "  ";
let tempStr = "";

for (let r = 0; r < nRows; r++) {
  for (let c = 0; c < nCols; c++) {
    tempStr +=
      (c > 0 ? gap : "") +
      "" +
      (r === 0 || r === nRows - 1 || c === 0 || c === nCols - 1
        ? bit
        : " ");
  }
  tempStr += "\n";
}
console.log(tempStr);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# Switch

Maak een bestand switch.js aan in de reeds aangemaakt folder week-1.

Genereer een lege rechthoek met enkel een zichtbare border op basis van het aantal kolommen (variable nCols) en het aantal rijen (variable nRows). Vul vanaf het midden (Y-as) alle posities met het opgegeven teken.

Tip

Gebruik een for-lus
Gebruik het conditionele statement if…else if…else
Gebruik optioneel de ternary operator (conditie) ? value1 : value2

Resultaat

*  *  *  *
*        *
*        *
*        *
*  *  *  *
*  *  *  *
*  *  *  *
*  *  *  *

**Oplossing**:

./artevelde/pgm-code/pgm-1/week-2/switch_shorter.js

const nCols = 4;
const nRows = 8;
const bit = "*";
const gap = "  ";
let tempStr = "";

for (let r = 0; r < nRows; r++) {
  for (let c = 0; c < nCols; c++) {
    tempStr +=
      (c > 0 ? gap : "") +
      "" +
      (r === 0 || r === nRows - 1 || r >= Math.floor(nRows / 2)
        ? bit
        : c === 0 || c === nCols - 1
        ? bit
        : " ");
  }
  tempStr += "\n";
}
console.log(tempStr);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Close square

Maak een bestand close_square.js aan in de reeds aangemaakt folder week-1.

Genereer een leeg vierkant met enkel een zichtbare border op basis van een gelijk aantal kolommen (variable nCols) en rijen (variable nRows). In het vierkant geven we een kruis weer gelijkaardig met een sluitknop. Het aantal rijen en kolommen zijn steeds oneven.

Tip

Gebruik een for-lus
Gebruik het conditionele statement if … else if … else
Gebruik optioneel de ternary operator (conditie) ? value1 : value2
De oplossing moet enkel werken voor een vierkant (nRows === nCols)

Resultaat

*  *  *  *  *  *  *
*  *           *  *
*     *     *     *
*        *        *
*     *     *     *
*  *           *  *
*  *  *  *  *  *  *

**Oplossing 1**:

./artevelde/pgm-code/pgm-1/week-2/close_square.js

/*
 * Close square
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 2
 * Developed by: Philippe De Pauw - Waterschoot
 * Last updated: 21/09/2020
 */
const nCols = 5;
const nRows = 5;
const bit = "*";
const gap = "  ";
let tempStr = "";

for (let r = 0; r < nRows; r++) {
  for (let c = 0; c < nCols; c++) {
    if (c > 0) {
      tempStr += gap;
    }

    if (
      r === 0 ||
      r === nRows - 1 ||
      c === 0 ||
      c === nCols - 1 ||
      c + r * nCols === r + r * nCols ||
      c + r * nCols === (r + 1) * nCols - (r + 1)
    ) {
      tempStr += bit;
    } else {
      tempStr += " ";
    }
  }
  tempStr += "\n";
}
console.log(tempStr);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

**Oplossing 2**:

./artevelde/pgm-code/pgm-1/week-2/close_square_shorter.js

/*
 * Close square
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 2
 * Developed by: Philippe De Pauw - Waterschoot
 * Last updated: 21/09/2020
 */
const nCols = 5;
const nRows = 5;
const bit = "*";
const gap = "  ";
let tempStr = "";

for (let r = 0; r < nRows; r++) {
  for (let c = 0; c < nCols; c++) {
    tempStr +=
      (c > 0 ? gap : "") +
      "" +
      (r === 0 || r === nRows - 1
        ? bit
        : c === 0 ||
          c === nCols - 1 ||
          c + r * nCols === r + r * nCols ||
          c + r * nCols === (r + 1) * nCols - (r + 1)
        ? bit
        : " ");
  }
  tempStr += "\n";
}
console.log(tempStr);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Credit card validator

Valideer een credit card met de volgende restricties

Nummer moet bestaan uit 16 digits, allemaal getallen.
Tenminste twee getallen moeten verschillend zijn.
De laatste digit moet een even getal zijn.
De som van de digits moet groter zijn dan 16.

Stappenplan:

Maak een bestand credit_card_validator.js aan in de reeds aangemaakt folder week-1.
Schrijf een functie genaamd verifyCreditCardNumber dat:
- 1 argument bevat: credit card nummer
- functie geeft de waarde true of false terug

Tip

Gebruik methode for ... of (opens new window) uit een array
Met de methode split (opens new window) kunnen we een string converteren naar een array op basis van het splitsen of splijten op een opgegeven teken
Met de methode isNaN (opens new window) kunnen we nagaan of een waarde gelijk is aan NaN of niet
Gebruik de functieparseInt om een een string te converteren naar een geheel getal

**Mogelijke oplossing**:

./artevelde/pgm-code/pgm-1/week-4/credit_card_validator.js

/*
 * Credit Card Validator
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 3
 * Developed by: Philippe De Pauw - Waterschoot
 * Last updated: 27/09/2020
 * ===================================================================
 * In this project you'll write a script that validates whether or not a credit card number is valid.
 *
 * Here are the rules for a valid number:
 *
 * - Number must be 16 digits, all of them must be numbers.
 * - You must have at least two different digits represented (all of the digits cannot be the same).
 * - The final digit must be even.
 * - The sum of all the digits must be greater than 16.
 */
let creditCardNumber = 9999777788880000;
console.log(
  `The credit card number ${creditCardNumber} is ${
    verifyCreditCardNumber(creditCardNumber) ? "valid" : "invalid"
  }.`
);
creditCardNumber = 6666666666661666;
console.log(
  `The credit card number ${creditCardNumber} is ${
    verifyCreditCardNumber(creditCardNumber) ? "valid" : "invalid"
  }.`
);
creditCardNumber = "a92332119c011112";
console.log(
  `The credit card number ${creditCardNumber} is ${
    verifyCreditCardNumber(creditCardNumber) ? "valid" : "invalid"
  }.`
);
creditCardNumber = 4444444444444444;
console.log(
  `The credit card number ${creditCardNumber} is ${
    verifyCreditCardNumber(creditCardNumber) ? "valid" : "invalid"
  }.`
);
creditCardNumber = 1111111111111110;
console.log(
  `The credit card number ${creditCardNumber} is ${
    verifyCreditCardNumber(creditCardNumber) ? "valid" : "invalid"
  }.`
);
creditCardNumber = 6666666666666661;
console.log(
  `The credit card number ${creditCardNumber} is ${
    verifyCreditCardNumber(creditCardNumber) ? "valid" : "invalid"
  }.`
);

function verifyCreditCardNumber(number) {
  const creditCardNumberAsString = number.toString();
  if (creditCardNumberAsString.length !== 16) {
    return false;
  }

  if (isNaN(parseInt(creditCardNumberAsString))) {
    return false;
  }

  if (parseInt(creditCardNumberAsString[creditCardNumberAsString.length - 1]) % 2 !== 0) {
    return false;
  }
  const uniqueChars = [];
  let sumOfChars = 0;
  const chars = creditCardNumberAsString.split("");
  chars.forEach(function (c) {
    if (uniqueChars.indexOf(c) === -1) {
      uniqueChars.push(c);
    }
    sumOfChars += parseInt(c);
  });
  if (uniqueChars < 2 || sumOfChars <= 16) {
    return false;
  }
  return true;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

# Scrambled text

Met deze applicatie veranderen we de positie van tekens in een string, bijv. webmaster wordt sreabewmt.

Stappenplan:

Maak een bestand scrambled_text.js aan in de reeds aangemaakt folder week-1.
Schrijf een functie genaamd scrambleText dat:
- 1 argument bevat: de tekst die herschikt zal worden
- geeft herschikte text terug

Voorbeeld

The word "website" scrambled is "webstie"
The word "webdevelopment" scrambled is "eepwmovnbeeltd"
The word "programming" scrambled is "mprigagmorn"

**Mogelijke oplossing**:

./artevelde/pgm-code/pgm-1/week-4/scrambled_text.js

/*
 * Scrambled Text
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 3
 * Developed by: Philippe De Pauw - Waterschoot
 * Last updated: 04/10/2020
 */

/**
 * Scrambled Text
 */
function scrambleText(txt) {
  let scrambled = "";
  let c = "";
  let i = 0;
  while (txt.length > 0) {
    i = Math.floor(Math.random() * txt.length); // 5
    c = txt.charAt(i); // t
    scrambled += c;
    txt = txt.substring(0, i) + txt.substring(i + 1);
  }
  return scrambled;
}

let word = "website";
console.log(`The word "${word}" scrambled is "${scrambleText(word)}"`);
word = "webdevelopment";
console.log(`The word "${word}" scrambled is "${scrambleText(word)}"`);
word = "programming";
console.log(`The word "${word}" scrambled is "${scrambleText(word)}"`);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Globally Unique Identifier (GUID)

Deze applicatie genereert paswoorden, bijv.: A26dY26zQ.

Maak een bestand guid.js aan in de reeds aangemaakt folder week-1.
Schrijf een functie genaamd generateGUID dat:
- 1 argument bevat: het aantal tekens dat het paswoord moet bevatten
- geeft het gegenereerd paswoord terug (string)
Roep deze functie 2 keer aan, steeds met een andere waarde voor het argument
Log het resultaat van elke aanroep naar de console.

Tip

# Sorting array of objects

Schrijf een JavaScript programma waarmee een array van objecten gesorteerd (opens new window) kan worden op een bepaalde eigenschap (property) van het object.

Gegeven volgende array:

const library = [
  {
    title: "The Road Ahead",
    author: "Bill Gates",
    libraryID: 1254,
  },
  {
    title: "Gem Squash Tokoloshe",
    author: "Zadok Rachel",
    libraryID: 3245,
  },
  {
    title: "Walter Isaacson",
    author: "Steve Jobs",
    libraryID: 4264,
  },
];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Sorteer de array
1. alfabetisch op de eigenschap author. Output het resultaat – de gesorteerde array – naar de console.
2. omgekeerd alfabetisch (Eng. reverse alphabetical) op de eigenschap author. Output het resultaat (de gesorteerde array) naar de console.
3. oplopend op libraryID. Output het resultaat (de gesorteerde array) naar de console.
4. aflopend op libraryID. Output het resultaat (de gesorteerde array) naar de console.

Tip

Maak voor het alfabetisch sorteren van strings gebruik van de methode String.prototype.localeCompare() (opens new window)

Voorbeeld Output

---Alfabetisch sorteren----
[
  { title: 'The Road Ahead', author: 'Bill Gates', libraryID: 1254 },
  { title: 'Walter Isaacson', author: 'Steve Jobs', libraryID: 4264 },
  {
    title: 'Gem Squash Tokoloshe',
    author: 'Zadok Rachel',
    libraryID: 3245
  }
]
---Omgkeerd alfabetisch sorteren----
[
  {
    title: 'Gem Squash Tokoloshe',
    author: 'Zadok Rachel',
    libraryID: 3245
  },
  { title: 'Walter Isaacson', author: 'Steve Jobs', libraryID: 4264 },
  { title: 'The Road Ahead', author: 'Bill Gates', libraryID: 1254 }
]
---Sorteren op getallen (libraryID)----
[
  { title: 'The Road Ahead', author: 'Bill Gates', libraryID: 1254 },
  {
    title: 'Gem Squash Tokoloshe',
    author: 'Zadok Rachel',
    libraryID: 3245
  },
  { title: 'Walter Isaacson', author: 'Steve Jobs', libraryID: 4264 }
]
---Omgkeerd sorteren op getallen (libraryID)----
[
  { title: 'Walter Isaacson', author: 'Steve Jobs', libraryID: 4264 },
  {
    title: 'Gem Squash Tokoloshe',
    author: 'Zadok Rachel',
    libraryID: 3245
  },
  { title: 'The Road Ahead', author: 'Bill Gates', libraryID: 1254 }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

**Mogelijke oplossing**:

./artevelde/pgm-code/pgm-1/week-4/sorting_array_of_objects.js

/*
 * Sorting array of objects
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 4
 * Developed by: Philippe De Pauw - Waterschoot
 * Last updated: 27/09/2020
 * ===================================================================
 */

// Define a library variable with a list of objects (books)
const library = [
  {
    title: "The Road Ahead",
    author: "Bill Gates",
    libraryID: 1254,
  },
  {
    title: "Walter Isaacson",
    author: "Steve Jobs",
    libraryID: 4264,
  },
  {
    title: "Mockingjay: The Final Book of The Hunger Games",
    author: "Suzanne Collins",
    libraryID: 3245,
  },
];

// Sort the array, sort order based on the author
library.sort(function(obj1, obj2) {
  if (obj1.author > obj2.author) return -1;
  // Place after
  else if (obj1.author < obj2.author) return 1;
  // Place before
  else return 0; // Stay on place within the array
});

console.log(library); // Log the object to the console

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# Digital clock is ticking

Maak een bestand digital_clock_ticking.js aan in de reeds aangemaakt folder week-1.

In deze applicatie maken we een digitale clock die tikt. Gebruik de ingebouwde setInterval() (opens new window) methode met een delay van 1000 milliseconden.

Stappenplan:

Beschrijf een functie generateDigitalClockUTCAsString() met:
- 1 parameter utc waarin we de tijdszone specifieren
- 1 parameter cityName waarin we de naam van de stad specifieren
- geeft de string representatie van de tijd terug bijv. 17:53:45
Beschrijf een functie ticking() waaring we de klok laten tikken. Deze functie wordt aangeroepen in de setInterval() methode.

Voorbeeld

The time in Ghent is 18:23:21
The time in Ghent is 18:23:22
The time in Ghent is 18:23:24
The time in Ghent is 18:23:25
The time in Ghent is 18:23:26
The time in Ghent is 18:23:27
The time in Ghent is 18:23:28

**Mogelijke oplossing**:

./artevelde/pgm-code/pgm-1/week-4/digital_clock_ticking.js

/*
Digital Clock ticking
===================================================================
Course: Programming 1: Essentials
Week: 3
Developed by: Philippe De Pauw - Waterschoot
Last updated: 04/10/2020
===================================================================
*/
function generateDigitalClockUTCAsString (utc, cityName) {
    const date = new Date();
    date.setHours(date.getHours() + utc + date.getTimezoneOffset()/60);
    return `The time in ${cityName} is ${toAmountOfDigits(date.getHours(), 2)}:${toAmountOfDigits(date.getMinutes(), 2)}:${toAmountOfDigits(date.getSeconds(), 2)}`;
  }
  
  function toAmountOfDigits (number, amount) {
    let str = String(number);
    while (str.length < amount) {
      str = `0${str}`;
    }
    return str;
  }
  
  function ticking () {
    console.log(`${generateDigitalClockUTCAsString(2, 'Ghent')}`);
  }
  setInterval(ticking, 1000);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Week 2