🕸️
[BA] Web Programming
  • Introductie
  • Cursus
    • TypeScript
      • Waarom TypeScript?
      • Nieuw project
      • Wat is een tsconfig.json?
      • Input lezen
      • Type Systeem
        • Basic types
        • Arrays
        • Functions
        • Class
        • Interface
      • Conditionele blok
      • Loops
      • Array methods
      • Exceptions
      • Modules
      • Asynchroon Programmeren
        • Promises
        • Async/Await
        • Fetch
        • JSON
    • Frontend
      • DOM Manipulatie
      • VITE
      • Deployment met Surge
    • Backend
      • Express.js
        • Basis
        • Nodemon
        • Statische Bestanden
        • Request
        • Response
        • Router
      • MySQL
    • Fullstack
      • Van Form tot Database
      • CORS
  • Labos
    • 1. TS: Basis
      • Hello Name
      • BMI Calculator
      • Interest Calculator
      • Uren en Minuten
      • Wisselgeld
      • Name from Email
      • Text Box
    • 2. TS: Arrays & functions
      • Som van getallen
      • Math Fun
      • Array Sum
      • Puntenboek
      • Rot13
      • Pokemon Team
      • Todo List String
      • Tick Tac Toe
      • BMI Calculator Multi
    • 3. TS: Interfaces & classes
      • Recepten
      • Transportmiddelen
      • Movies
      • Filter Numbers
    • 4. TS: Async & fetch
      • Promise All
      • Slow Sum
      • Cocktails Promise All
      • Joke API
      • School API
      • Cocktails API
      • Unix Timestamp API
    • 5. TS: Modules & NPM
      • Math Module
      • Cowsay Module
      • Cat GPT
      • Rainbow Chalk
    • 6. Frontend: VITE & DOM
      • Verander achtergrond
      • Verander tekst
      • Verander divs
      • Verander kleuren
      • Verander kleuren random
    • 7. Frontend: APIs & DOM
      • Cocktail API met Vite
      • Weather API
      • Uitvinders
      • Rick and Morty
    • 8. Backend: Express & Requests
      • Hello Express
      • DadJoke Express
      • Reiskosten server
    • 9. Backend: MySQL & Routing
      • Reiskosten server
      • Taken server
      • Taken server met prioriteit
    • 10. Fullstack: Forms & Express & MySQL
      • Reiskosten app
      • Taken app
      • Pokémon app
Powered by GitBook

AP

On this page
  1. Labos
  2. 5. TS: Modules & NPM

Rainbow Chalk

PreviousCat GPTNext6. Frontend: VITE & DOM

Last updated 1 month ago

Maak een nieuw project aan met de naam rainbow-chalk.

Installeer de volgende npm packages:

  • chalk@4 (https://www.npmjs.com/package/chalk)

  • rainbow-colors-array-ts (https://www.npmjs.com/package/rainbow-colors-array-ts)

Bekijk goed de documentatie van de packages om te zien hoe je deze packages kunt gebruiken.

Maak een nieuwe file aan met de naam index.ts. Importeer de packages die je hebt geïnstalleerd. Gebruik de packages om een regenboog van kleuren te loggen naar de console.

Volg het volgende stappenplan om de oefening te maken:

  1. Importeer de RgbColor en rainbow functies uit de rainbow-colors-array-ts module.

  2. Importeer de chalk module.

  3. Bepaal de hoogte en breedte van de terminal. Dit kan je doen aan de hand van de process.stdout.rows en process.stdout.columns eigenschappen.

  4. Genereer een array van kleuren aan de hand van de rainbow functie. Gebruik de hoogte van de terminal als eerste argument en "rgb" als tweede argument. Kijk zeker eerst naar wat exact de functie teruggeeft. Je kan dit doen door de console log functie te gebruiken op de array van kleuren.

  5. Loop over de array van kleuren en print een regel met een achtergrondkleur voor elke kleur. Gebruik hiervoor de bgRgb functie van de chalk module. Gebruik de breedte van de terminal om te bepalen hoeveel karakters je moet printen.

  6. Sit back and enjoy the rainbow!

Voorbeeld interactie

alt text