Our group this semester, we have created many things including a functional and reusable button and a learning objectives card. To wrap up our final project, we have taken on the creation of a flashcard.
Beginning
We were given a starting point of a flashcard, in which our group took the time to dissect this card and break it down into multiple parts. We decided that this flashcard would have an image area, the body that holds the user input, the checking button of the answer, and a retry button.
The Journey
Our group spent many weeks figuring out the styling, functionality, and performance of this flashcard.
The above image is our replica of the example flashcard. We made sure to include all possible features and functionality that a flashcard should have if you were to see one out on the web. Below are the checking of the user input and the retry functionality.
Our group wanted to display whether or not the user correctly or incorrectly answered the flashcard question, using icons showing a checkmark for correct and a red X for incorrect. We used simple colors for our styling on our flashcard.
My Role
My job on this flashcard started out with the creation of the check answer and retry buttons, while also adding their correct functionality when input was included by the user. Using past projects, I was able to go back and figure out how to create something simple, like a small button, and make it look like our example flashcard.
Below is some of the checking answer functionality of the check answer button.
The End
If you want to take a more deeper dive into this flashcard creation, our Github (and soon our NPM) will be linked below.
Top comments (0)