Coders Camp 2021 | Projekt Zespołowy | Javascript

Zespół projektowy

Zespół pracował w ramach kursu CodersCamp.
Aplikację wykonali uczestnicy kursu przy pomocy mentora. Zachęcamy do odwiedzenia profili członków zespołu, w celu zapoznania się z ich portfolio.

Mentor: Michał Ciborowski

Uczestnicy:

• Barbara Korytkowska
• Joanna Grala
• Magda Zaniewska-Ciecierska
• Michał Kowalczyk
• Roman Pavlenko
• Zuza Wypych

Demo

Zobaczyć efekt naszej pracy i sprawdzić swoją wiedzę w różnych kategoriach możesz TUTAJ.

O projekcie słów kilka

Zmiany względem proponowanego projektu

Zamiast stwórzyć Quiz poświęcony jedynie Gwiezdnym Wojnom, zespół wraz z klientem zdecydował się stworzyć aplikację dla większego grona odbiorców. Tym samym z proponowanego projektu pozostał tylko pomysł na rodzaj aplikacji, a cały jej wygląd jest autorskim dziełem zespołu.

Cel projektu

Celem projektu było dostarczenie aplikacji pozwalającej sprawdzić swoją wiedzę w 10 różnych kategoriach i porównać wyniki ze znajomymi.

Aplikacja została wykonana wg dostarczonych przez organizatorów CodersCamp wymagań.

Strona startowa

Pierwszy widok jaki zastaniemy po przejściu do aplikacji służy do wyboru poziomu trudności Quizu z Menu oraz interesującej nas kateogrii pytań

Strona startu quizu

Po wyborze kategorii użytkownik przechodzi na stronę startu quizu. Użytkownik może wprowadzić swoje imię i zacząć tryb rozgrywki po kliknięciu przycisku 'Start Quiz', lub sprawdzić wyniki dla danej kategorii i poziomu trudności klikając w przycisk 'Scores'.

Rozgrywka

Rozgrywka polega na udzieleniu odpowiedzi na pytanie poniżej wyznaczonego czasu. Za każdą dobrą odpowiedź gracz otrzymuje punkt, a po skończeniu gry jego wynik zostaje zapisany wraz z podaną wcześniej nazwą.

Tabela wyników

Dla każdej kategorii możemy sprawdzić wszystkie wyniki graczy biorących udział w rozgrywce na danym urządzeniu - wyniki przechowywane są w LocalStorage

Wykorzystane technologie

• HTML
• CSS (SCSS)
• JavaScript
• SessionStorage oraz LocalStorage
• Fetch API

API

W projekcie zostało wykorzystane zewnętrzne API od Open Trivia Database.

Z API pobierane są:

• Lista, wybranych przez zespół, kategorii, które zostają następnie zapisane w SessionStorage, aby ograniczyć liczbę requestów
• Pytania dla wybranej przez użytkownika kategorii
• Liczba wszystkich pytań łącznie dla wybranej kategorii, jak i dla konkretnego poziomu trudności Quizu
• Token sesji, który odpowiada za niepowtarzalność pytań oraz obsługę błędnego requestu, który również zostaje zapisany w SessionStorage

Uruchomienie projektu

Aby uruchomić aplikację na lokalnej maszynie należy wykonać następujące kroki:

1. Zainstalować zależności używając polecenia npm install
2. Wystartować serwer developerski poleceniem npm run start

Aplikacja będzie dostępna pod adresem localhost:8080

Zrealizowane wymagania projektu

• zmienne ✔️
• operatory porównania ✔️
• pętle ✔️
• obiekty, atrybuty ✔️
• warunki ✔️
• funkcje ✔️
• operatory logiczne ✔️
• tablice ✔️
• iteracja i/lub rekurencja ✔️
• console ✔️
• return ✔️
• "===" vs "==" ✔️
• integracja z zewnętrznym REST API ✔️
• interakcja z domem ✔️
• odwoływanie się do elementów DOM z JavaScript ✔️
• zmiana stylów z poziomu JSa ✔️
• zmiana zawartości HTML z poziomu JSa ✔️
• animacje ✔️
• zewnętrzne biblioteki ✔️
• async await i/lub Promise ✔️
• funkcje callback ✔️
• metody HTTP ✔️