User Story 2 - Flashcard Creation

User Story -2 Flashcard Creation

As an student I want to add and see my own Flashcards with my own pairs of words So that I can learn my own subjects

[ ] user sees the Navigation bar on the bottom with the Homepage-Link and the "new Cards"-Link on all pages
[ ] by clicking on navigation icon to create new card, user sees a form and a button to submit
[ ] user can write your own pair of words an submit them
[ ] User sees own data on homescreen
[ ] For now the own created cards by user appear on top of the list
[ ] After submitting user stays on the "New/Neu" -Page to create more cards

[x] Create a new branch "FlashcardCreation"
[x] Create a Navigation Component Navigation.js
[x] Create a Layout Component Layout.js with the prop "children", which returns the Header and the Navigation Components.
[x] The Layout Component is returned in _app.js
[x] Create a Form Component Form.js, which returns a form and a submit-button
[x] create a new page in pages/new.js
[x] The Form Component is returned in pages/new.js
[x] The form-fields are required
[x] reset form with event.target.reset(), add focus with event.target.elements.question.focus()
[x] store the new data in a state variable using localStorageState in _app.js
[x] create const with setCards in _app.js
[ ] create a function addCard(data) in app.js, use nanoid(), install nanoid
[ ] the new.js returnes the Form component use Form onSubmit={addCard}
[ ] create a export default function Form({ onSubmit, card = {} }) in Form.js, that includes a handleSubmit(event) (see frontend-crud-recap)