Coders Camp 2021 | Project Team | JavaScript: Star Wars Quiz

--> See original repository <--

Project Team

Our team collaborated as part of CodersCamp course. The Star Wars quiz was coded by students with help of our Mentor. Please feel free to check all collaborator's Github profiles to get to know their portfolios.

Mentor: Mateusz Ossoliński

Students:

• Agnieszka Urbanowicz - Tech Lead
• Justyna Dąbrowska - Development Manager
• Magdalena Piotrowska - Product Owner
• Magdalena Kostrzewa
• Hanna Kozak
• Krzysztof Kos

Star Wars Quiz

Mockups and prototypes

Screenshots

Videos

swquizvideo1p.mov

swquizvideo2p.mov

Project's goal

The goal of this project was to deliver the app with a Star Wars quiz functionality. The User can test his/her knowledge about Star Wars characters, vehicles and starships. During the play, the User competes against a computer player.

App functionality

Main Menu

The User can choose a mode of the game (default "people"):

• People: recognizing what character from the Star Wars universe is shown on the image
• Vehicles — recognizing what vehicle from the Star Wars universe is shown on the image
• Starships — recognizing what starship from the Star Wars universe is shown on the image

The game — Quiz

To play the game, the User has to click the button "Play the game". The game is about guessing who or what is shown on the image on the left. The User has four answers to choose from. Only one answer is correct. During the play, a computer is trying to guess (the logic behind it is simple: one number from a total of four is randomly drawn by the algorithm). At the end of the game, the modal with correct and wrong guesses is displayed and the User's and computer's results are compared.

The game continues until the time is over (1 minute and 30 seconds). The time left is shown by lightsaber and text below answer cards. The User can guess as many times as he/she is able during the given time.

Hall of Fame

After clicking the "Hall of Fame" button, the User can see the three best results for the mode he is currently in. The results are stored in LocalStorage.

Built with:

• HTML
• CSS
• media queries for RWD
• JavaScript
• JS modules
• LocalStorage
• rest API
• JSON server

The app was coded in compliance with CodersCamp's requirements.

In regards to technologies used we were required to code our app in Javascript. We decided to code HTML dynamically with JS as well. The app is created with components similar to those in React, we used JS modules to mimic them. Every component has a separate CSS file for styling. The goal to code it this way was to understand better how React works behind the scenes.

How to run the app

To run the app follow steps below on your local machine:

1. Clone git repository and open file on your local device in Code editor.
2. Run npm install command to install all npm packages.
3. To run json-server, run cd swapi-json-server to open swapi-json-server folder, install npm packages with npm install and run npm run start.
4. Open new terminal in your code editor and run npm run start:dev to open developers mode.

The app will run on port localhost:8765/index.html