You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Create a simple mode form with minimum input fields and a detailed mode form with many input fields.
The GUI image is shown in Figma.
First description page
Create two buttons at the bottom on first description page, "かんたん計算" and "くわしく計算".
Transition from each button to each input form. Display a label at the top of the input form to indicate which mode it is.
Input form
The detailed form is the same as the form so far.
The simple form displays only the following items.
Prefecture/city where "you" are staying (required)
Your annual income (required)
Presence of spouse
Number of your children
(If there is a spouse, the annual income of the "spouse")
(If there are children, age of "children" (required))
It's probably desirable to share the same code as much as possible between detailed and simple form.
(For example, there is a way to select different components for each simple and detailed mode in you.tsx).
The child's age need to be converted to date of birth in the frontend and then posted to the backend as in detailed mode. Any date of birth that would be that age on the current date is fine.
Items that are not entered in the simple form are left as defaults such as 0 or null and do not need to be updated.
Result page
Please display a label at the top of the result page so that users can know which mode the result is.
In case of simple mode, please put a "くわしく計算" button at the bottom so that calculation in detailed mode can be done later. When the button is pressed, it transitions to the input form in detail mode.
Design
Teal 500 from chakra.ci is used for "かんたん計算", and Blue 500 is used for "くわしく計算".
If you know a desirable design or UI, please apply it.
The text was updated successfully, but these errors were encountered:
Create a simple mode form with minimum input fields and a detailed mode form with many input fields.
The GUI image is shown in Figma.
First description page
Create two buttons at the bottom on first description page, "かんたん計算" and "くわしく計算".
Transition from each button to each input form. Display a label at the top of the input form to indicate which mode it is.
Input form
The detailed form is the same as the form so far.
The simple form displays only the following items.
It's probably desirable to share the same code as much as possible between detailed and simple form.
(For example, there is a way to select different components for each simple and detailed mode in
you.tsx
).The child's age need to be converted to date of birth in the frontend and then posted to the backend as in detailed mode. Any date of birth that would be that age on the current date is fine.
Items that are not entered in the simple form are left as defaults such as 0 or null and do not need to be updated.
Result page
Please display a label at the top of the result page so that users can know which mode the result is.
In case of simple mode, please put a "くわしく計算" button at the bottom so that calculation in detailed mode can be done later. When the button is pressed, it transitions to the input form in detail mode.
Design
Teal 500 from chakra.ci is used for "かんたん計算", and Blue 500 is used for "くわしく計算".
If you know a desirable design or UI, please apply it.
The text was updated successfully, but these errors were encountered: