Implement Local Storage

Value proposition

As a User
I want to be able to submit a form
So that I can see a new goal on the goal list page
I also want to be able to delete a goal
So that I don't see it on the goal list page, even after refreshing

Description

Acceptance criteria

• When clicking the submit button the form data should be validated and processed.
• After submitting, the User should be redirected to the goal list page
• The goal should be added to the data.js
• After returning to the goal list page the goal should be visible
• When refreshing the page the goal should still be there
• On deleting a goal it should be erased from the data.js
• After deletion it should stay deleted, even when refreshing the page

Refactor Header

Value proposition

As a User
I want to be able to see a header on every page
So that I can see what page I am currently visiting

Description

Acceptance criteria

• A header is visible on every page
• The headline of the header should change, depending on the current page

Form Functionality

Value proposition

As a User
I want to be able to submit a form
So that the a new goal is created

Description

Acceptance criteria

• When clicking the submit button the form data should be validated and processed.
• A new goal should be created with the submitted data and added to the list of goals on the goal list page
• After submitting, the User should be redirected to the goal list page
• The goal shouldn't be visible as I will implement the localStorage capability in the next US

List of goals

Value proposition

As a User
I want to be able to delete a goal
So that I can remove it from my list of goals after i have completed it

Description

Acceptance criteria

• A button exists that is called "Delete"
• On clicking the delete button a confirmation dialogue should appear
• On cancel, the confirmation dialogue should close and the process should be cancelled
• On confirm the Goal should be deleted
• In the List of goals the deleted goal should be gone

Tasks

• Create a feature branch
• Create a ConfirmationDialog component
• Integrate the ConfirmationDialog component in the GoalDetail page
• Set up state using React's useState to manage the visibility of the confirmation dialog.
• Implement the event handler for the "Delete" button that opens the confirmation dialog.
• Implement a handleConfirmDelete function to perform the deletion action.
• Implement a handleCancelDelete function to close the confirmation dialog.

List of goals

Value proposition

As a User
I want to be able to see a form with descriptions
So that I can fill in the different input fields

Description

Acceptance criteria

• A header called create should exist
• A Form with 6 Input fields and 6 labels should exist
• Each of the input fields should have a description for the user
• At the bottom of the form there should be a button called Submit
• The button should have no function at this point

Footer

Value proposition

As a User
I want to have footer on certain pages
So that I can have a better user experience

Description

Acceptance criteria

• Different Footer components exist (Formpage, GoalDetailpage,Editpage)
• These Footers have different Icons, depending on their location
• The Footer on the Formpage should have a Save Icon and a Back arrow
• The Footer on the Goaldetailpage should have an Edit Icon, a Delete Icon and a Back arrow
• The Footer on the Editpage should have a Cancel and a Save Icon
• Clicking the Icons should call the linked functions

Tasks

• Create a feature branch footer
• create three footer components
• import necessary SVGs
• rewrite the existing functions for going back, editing,saving,deleting and cancelling

Fetch Quotes

Value proposition

As a User
I want to be able to see a quote on the Homepage
So that I can get inspired

Description

Acceptance criteria

• A "quote of the day" is fetched from an API
• The "quote of the day" is visible on the Homepage

Form Styling/Refactoring

Value proposition

As a User
I want to be able to see a styled form
So that I can have a nice experience

Description

The current version of the Form is one page with 6 questions in their own fieldsets. I want to create a card that contains one question per card and style it.

Acceptance criteria

• FormCard component exists
• it is rendered for each question when creating a new goal or editing an existing goal
• the styling fits the theme of the app

Tasks

• Create a feature branch formstyling
• create a FormCard component
• render the component in every part of the app the form is present

BurgerMenu

Value proposition

As a User
I want to be able to see a burger menu on every page with links to other pages
So that I can easily move through the app

Description

Acceptance criteria

• A header is visible on every page
• Inside the header a burger menu exists
• The burger menu has an animated icon so the three stripes become an X
• Links to different sections of the app are rendered as a list in the burger menu
• The Links direct the user to the different pages

Goal Details

Value proposition

As a User
I want to be able to view the details of a specific goal when I click on it in the list of goals
So that I can see the detailed objectives of that goal

Description

Acceptance criteria

• Clicking a goal should lead to the details of that goal
• The details page should show a list of the details
• It should contain a header and the associated details section
• The details must contain 5 Headings and 5 details
• The details should be vertical list items
• At the bottom of the details page there should be a button that leads back to the list of goals

Tasks

• Create a feature branch
• Create a new page GoalDetails
• Make the goals clickable with a link to the GoalDetails page
• Create a card component that returns the details of a specific goal
• Render the card component in the GoalDetails page
• Align the goals vertically
• Create a Button that leads back to the list of goals

Edit Goals

Value proposition

As a User
I want to be able to edit a goal
So that I can save the updated goal and see it on the goal list page

Description

Acceptance criteria

• When clicking the edit button the User is redirected to the edit form
• Inside the edit form the values of the old goal should still be visible
• After editing the user can save the edited form
• The edited goal should be visible on the goal list page and the content updated
• When refreshing the page the goal should still be there

Styling/Refactoring

Value proposition

As a User
I want to be able to see a styled goallist/goaldetailpage
So that I can have a nice experience

Description

I want the list of goals on the goallist page to look nice. Same goes for a specific goal on the goaldetail page

Acceptance criteria

• The goallist page and the goaldetail page have a nice styling

Tasks

• Create a feature branch goalstyling

Mindfulness Page

Value proposition

As a User
I want to be able to visit the mindfulness page
So that I can get some tips on how to stay mindful

Description

Acceptance criteria

• A header called Be Mindful exists
• On the page there are different exercises to be mindful
• each exercise has its own card

Tasks

• Create a feature branch mindfulnesspage
• create a mindfulness page component
• create cards to display the exercises/tips
• add exercises/tips to the cards

Form Styling/Refactoring

Value proposition

As a User
I want to be able to see a styled form
So that I can have a nice experience

Description

The current version of the Form is one page with 6 questions in their own fieldsets. I want to create a card that contains one question per card and style it.

Acceptance criteria

• FormCard component exists
• it is rendered for each question when creating a new goal or editing an existing goal
• the styling fits the theme of the app

Tasks

• Create a feature branch formstyling
• create a FormCard component
• render the component in every part of the app the form is present

Homepage

Value proposition

As a User
I want to be able to see a Homepage and a button.
So that I can see the name of the app and a short description of the SMART Method and click on the button to create a new goal.

Description

Acceptance criteria

• A Homepage with a Header exists
• There is a short description of the SMART Method
• There is a Button that directs the user to the form to create a new goal

List of goals

Value proposition

As a User
I want to see a list of my goals
So that I can remember and track them

Description

Acceptance criteria

• The page has a heading called "my Goals"
• The goals each have their own card
• The list should be vertically sorted
• Every card contains the title of the goal

Tasks

• Create a feature branch
• Create a GoalList page
• Create a component that returns a heading
• Create a card component that returns the name of the goal
• Render both in the GoalList page