/PlantSwap-connecting-people-realtime-web-app

Ontwerp en maak voor een opdrachtgever een realtime omgeving waar gebruikers kunnen samenwerken.

Primary LanguageJavaScriptMIT LicenseMIT

Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md

PlantSwap Amsterdam - Trivia

PlantSwap Amsterdam is een boeiende website vol met plantenweetjes en trivia, waar plantenliefhebbers kunnen genieten van een wereld vol groene kennis en ontdekkingen.

voorbeeld-plantswap-trivia

Inhoudsopgave

Beschrijving

Stap in de wereld van groene kennis en spanning met het online en realtime trivia-spel van PlantSwap Amsterdam! Doe mee met plantenliefhebbers van over de hele stad terwijl je je kennis test over plantensoorten, verzorgingstips en botanische feiten. Met uitdagende vragen biedt dit interactieve spel een leuke en educatieve ervaring voor alle deelnemers. Bereid je voor om je groene duim te laten zien en je plantenkennis te laten bloeien in dit boeiende PlantSwap Amsterdam trivia-avontuur!

Gebruik

De user-story van dit project:

  • Als gebruiker van PlantSwap wil ik gebruik kunnen maken van een functie waarbij ik met andere gebruikers interactie kan hebben

Kenmerken

Installatie

  • Om deze repository te installeren, volg je deze stappen:
  1. Klik op de groene knop "Code" en kopieer de URL van de repository.
  2. Open een terminalvenster op je computer en navigeer naar de locatie waar je de repository wilt installeren.
  3. Typ "git clone" gevolgd door de URL die je hebt gekopieerd en druk op Enter.
  4. De repository wordt nu gekloond naar de opgegeven locatie op je computer.

Deeltaak UI stack

Voor het ontwerpen van de verschillende states zijn we begonnen met het bedenken welke verschillende states onze pagina heeft, en hoe dit eruit komt te zien. We zijn begonnen met een mobile first schets in Figma. Voor de styling van de pagina's hebben we de huisstijl van onze vorige pagina aangehouden.

Vervolgens hebben we bedacht welke code er nodig is voor het uitwerken van deze states. Dit is in het zwart bij de elementen neergezet. Wanneer we de exacte code niet wisten hebben we het algemeen gehouden. Van te voren wisten we bijvoorbeeld nog niet wat er precies in het if else statement kwam te staan voor de quiz. We wisten wel dat er een if else statement nodig was, en hebben dit neergezet bij de juiste elementen.

Bekijk hieronder de wireflow en breakdown van de states. Of bekijk de complete wireflow op Figma

image

image

Bronnen

Voor het bouwen van de trivia | https://simplestepscode.com/javascript-quiz-tutorial/

Licentie

This project is licensed under the terms of the MIT license.