Code Monkey home page Code Monkey logo

plantswap-connecting-people-realtime-web-app's Introduction

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.

plantswap-connecting-people-realtime-web-app's People

Contributors

demivdm avatar joelle78 avatar joostf avatar ju5tu5 avatar rosahoffer avatar

Forkers

rosahoffer

plantswap-connecting-people-realtime-web-app's Issues

Maak een .gitignore file aan

Met .gitignore kan je voorkomen dat bepaalde mappen geüploaded worden. Het is sowieso handig om de map ./node_modules op te nemen en als teamgenoten op apple machines werken is ook .DS_Store handig om toe te voegen. Ik zie ook een .idea map, hierin staan de settings van IntelliJ, neem deze ook op want niet al je teamgenoten gebruiken dezelfde editor.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.