Zap! Recall Project

WIP

Web Development Project using React and Sass
JSX code» - SCSS code»

Requirements

• General
  • Vanilla React
  • Github public Repository and page deploy
  • Commit every requirement
• Layout
  • Mobile layout structured using given template
• Data Componentization
  • Page elements must be componentized with React in separate files
  • Dynamic data (decks, cards, etc.) must be JS arrays or objects, and must be rendered on screen
  • Quizzes layout according to template on Figma. Upon clicking on a quizz, first screen must give place to second screen
  • Upon Clicking on "Create Quizz", first screen must give place to third screen
• Start up
  • A home screen must be displayed on start up
  • Upon clicking the "Iniciar Recall!", the deck of cards must be displayed on screen
• Flashcards
  • Cards must be shuffled on each playthrough
  • All flashcards must show up face-down and indexed, "hiding" the given question within
  • Upon clicking on a card, the matching question must be displayed (Bonus: card-flip animation)
  • Upon clicking the "turn card" icon, the answer must be shown
    • There should be three buttons beneath the answer: "não lembrei" (did not remember), "quase não lembrei" (almost could not remember), and "Zap!". Each must be given an assigned color: red, orange and green (respectively).
    • Right after an option is chosen, card should turn once again and return to default, with its initial display question having a corresponding line-through color and icon for status
• Bonus (optional)
  • Restart
    • After a round, a "Restart Recall" button should allow the user to re-play through the game without a page reload
  • Goal of "Zaps!"
    • A input on the home screen should allow the user to determine the minimum number of "Zaps!" to be met (minimum of one). This should determine which results message the user will get
  • Multiple Decks
    • The user should be able to choose which deck to play within a given list of different decks

Built With

Study Playlist

In this section I included all Youtube content I used or refered to while studying for this project. Keep in mind that most of these videos contain information that was not previously studied during class, which may affect some parts of the code that contain these extras.

Contact