Team project "EventBooster"

completed after finished the JS Module course Full Stack Developer Bootcamp 23 Online by GoIt

Figma

Task List:

1. Background display (phone, tablet, desktop)
2. Logo display (phone, tablet, desktop)
3. Displaying the title (phone, tablet, desktop)
4. Layout and styles of the card container (phone, tablet, desktop)
5. Markup of the search bar
6. Search string logic by event name
7. Marking of the country selection line
8. Dropdown logic with country selection (to start, see information about which countries the API returns)
9. The logic of loading and displaying events by name
10. Animation of displaying events during the first visit to the main page
11. Layout and styles of one event card
12. The logic of loading events when the page is first loaded
13. Markup and pagination styles
14. Pagination logic, switching pages
15. Animation of the movement of the selected page in pagination
16. Markup and footer styles
17. Modal appearance animation
18. Markup and modal styles of a specific event
19. Darkening and blurring of the background when the modal is open
20. The logic of loading and displaying event data in open mode
21. Placement of event links in ticket purchase buttons
22. The logic of loading and displaying events after clicking the "More from this author" button
23. The logic of closing the modal when clicking on the cross and beyond it

Technologies used to implement the project:

• vs code
• git
• npm
• parcel
• HTML 5
• SASS
• CSS grid
• JS

Project implemented:

• all items according to: TASK LIST

• additionally:

  • customize scroll
  • loader
  • smooth scroll to the top
  • dark/light theme toggle

Development team:

Katherine Dudar (Team-Lead)

• background display (phone, tablet, desktop)
• layout and styles of one event card
• loader
• smooth scroll to the top
• dark/light theme toggle

Andrii Klochko (Scrum Master)

• markup and pagination styles
• pagination logic, switching pages
• animation of the movement of the selected page in pagination

Denys Dashkevych (Full Stack Dev)

• search string logic by event name
• the logic of loading and displaying events by name
• the logic of loading events when the page is first loaded
• the logic of loading and displaying event data in open mode
• the logic of closing the modal when clicking on the cross and beyond it

Vyacheslav Ushakov (Full Stack Dev)

• logo display (phone, tablet, desktop)
• displaying the title (phone, tablet, desktop)
• markup of the search bar
• marking of the country selection line
• dropdown logic with country selection (to start, see information about which countries the API returns)
• animation of displaying events during the first visit to the main page
• markup and footer styles

Sergii Gulaga (Full Stack Dev)

• markup and modal styles of a specific event
• darkening and blurring of the background when the modal is open
• the logic of loading and displaying event data in open mode
• placement of event links in ticket purchase buttons
• the logic of loading and displaying events after clicking the "More from this author" button
• the logic of closing the modal when clicking on the cross and beyond it
• customize scroll

Maksym Perlovskyi (Full Stack Dev)

• Modal appearance animation for team
• Markup and modal styles for team