# Project 001 - Web App UI

➜ [See codepen demonstration](https://codepen.io/jyo2105/pen/jOrOaXP)

## :memo: Problem
I like to code along while learning a new programming language by books or through online tutorials. Later when I need to work on projects independently, I often find it difficult to recall the correct syntax.

## :memo: Solution
The web application I created, codingCards, is a flashcard application targeting programmers who are learning new programming languages, to help them engage in active recalls of syntaxes, terms, concepts, and processes.

## :memo: User Interface
codingCards contains three major components: *create card*, *my collections*, and *study cards*.

### :lower_left_crayon: *create card*:
- The top section is *create card*.
- It includes three text fields and a *create card* button.
- The three text fields are for user inputs of *collection*, *deck*, and *code*.

### :lower_left_crayon: *my collections*:
- The middle section is *my collections*.
- It is a collection of card views of decks that users have created.
- Each deck card view includes three parts: header, body, and footer.
- The header shows the collection which the deck belongs to.
- The body contains information regarding the name of the deck, the number of flashcards created, and the deck creation date. It also contains a review button.
- The footer includes two pieces of information: progress and accuracy.
- Progress indicates the percentage of the deck that users have already answered.
- Accuracy indicates the percentage of questions users answered correctly.

### :lower_left_crayon: *study cards*:
- The bottom section is the *study cards*.
- It includes two major parts: a group of progress buttons a list view of flashcards.
- There are four progress buttons: *All*, *X To Go*, *Y Correct*, and *Z Wrong*.
- *All* represent all flashcards of the current deck.
- *X To Go* represents that there are X flashcards to be learned.
- *Y Correct* indicates that users have answered Y flashcards correctly.
- *Z Wrong* indicates that users have answered Z flashcards incorrectly.
- The second part of the *study cards* is a list view of flashcards, and each flashcard is displayed in two parts.
- The left part with black background is the content of the flashcard, and the code that users want to be tested when creating the card using ```{{}}``` is replaced by a text area where users can type in their answers.
- The right part contains three buttons: a yellow *Answer* button, a green *Correct* button, and a red *Wrong* button.

## :memo: Specification

### :lower_left_crayon: creating a card:
- Users can choose to either enter existing collection and deck names to create a new flashcard, which will change the number of cards in the deck card view in *my collections*; or enter new collection or deck names to create a flashcard to, which will add a new deck card view in *my collection* section.
- Entering values in the code text field will change the content of a flashcard. Users can use the markdown syntax ```{{}}``` surrouding the code that they want to be tested on, then the content surrounded by ```{{}}``` will be replaced by a text field in the flashcard in the *study cards* section.
- Pushing the *create card* button will create a flashcard. Once a flashcard is created, a success message will appear at the top of *create card*, and contents of the collection, deck, and code text fields in the text fields of *create card* will disappear.

### :lower_left_crayon: selecting a deck:
- When users push the *review* button on the deck card view, it will take them to the *study cards* section.

### :lower_left_crayon: studying a flashcard:
- Users can interact with the four progress buttons at the top of the *study cards* section.
- Pushing the *All* button will display all flashcards of the deck.
- Pushing the *To Go* button will filter the deck to show flashcards that users haven't answered.
- Pushing the *Correct* button will change the flashcard list to display those that are answered correctly by users.
- Pushing the *Incorrect* button will change the flashcard list to display those that users had answered incorrectly.
- Inside each flashcard, users can provide their answers in the text field.
- Users can check their answers manually by clicking on the yellow *Answer* button, the answer will be displayed.
- If their answer is correct, they can click on the green *Correct* button, which will increase the number on the green progress button by 1 unit.
- If their answer is incorrect, they can click on the red *Wrong* button, which will cause the number on the red progress button to increase by 1 unit.
- Regardless of the correctness of users' answers, pushing the yellow *Answer* button will lead to a decrease in the number of flashcards on the *To Go* button by 1 unit.
- Every time users answer a flashcard question, the progress and accuracy information on the deck card view in *my collections* will be updated.

## :memo: Reflection
My next step forward is learning about Javascript to make *codingCards* functional and interactive, and the back-end of web development such as databases. Furthermore, I want to learn how to make the flashcards in *my collection* interactive so that it can run on a Python server for a Python flashcard or an R server for R, and to replace manual answer check-up with an auto check.

This project provides me a great opportunity to learn how to build a website from scratch. Personally, one of the challenges comes from the UI/UX aspect, because I don't have much experience in this area. I have tried to build three different versions of *codingCards*. It occurs to me that web development is not just about coding, it also touches on UI/UX design, psychology, instructional design, and other areas. To become a good web designer and developer, I need to extend my knowledge.