🕸️
[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. 10. Fullstack: Forms & Express & MySQL

Reiskosten app

Previous10. Fullstack: Forms & Express & MySQLNextTaken app

Last updated 5 months ago

Maak twee projecten aan : reiskosten-client en reiskosten-server.

De reiskosten-server heb je vorig labo al gemaakt.

De reiskosten-client is een VITE project.

Voorzie in je client :

  • formulier om een nieuwe reis in te voeren

  • formulier om voor één reis de kosten in te voeren

  • tabel van al je reizen

  • tabel van de kosten van één reis

Tips:

  • Maak eerst je reizen tabel en de form om een reis in te voeren

  • Zorg vervolgens voor een functie die kan detecteren op welke reis je klikt, kijk voor inspiratie hier eens :

  • Als je op een reis hebt geklikt, dan zou je de kostentabel en formulier zichtbaar kunnen maken of naar een andere pagina gaan. Als je een element zichtbaar wilt maken, dat kan je op deze manier doen :

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_tr_rowindex
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp