生成{
完全なコードの作成;
javascriptを使用;
画像は使用せず、文字、CSSのみで制作;
以下全ての処理を導入した完全版htmlを生成する;
htmlファイルを作成し、ダウンロードできるようにする;
｝
HomeUI{
背景は薄い黄色にする;
右上に作成ボタンを作成;
画面中央部あたりに作成したものを追加できるスペースを空ける=[space];
}
作成UI{
作成ボタンをクリックしたら画面切り替え;
上から文字入力欄を追加上部に入力欄上部に小さく"タイトル"と書く;
期限の欄を追加、年を含めた日付を年、月、日ごとにプルダウン形式で入力できるようにする;
進行度の追加{
文字入力欄を追加;
最大文字数は20文字;
入力欄外上部には小さく目標と書く;
入力欄外の下部に+ボタンを追加する;
最低一つの目標欄を作るように制限をかける;
+ボタンを押したら文字入力欄を追加するようにする;
-ボタンで削除機能も追加
増やした行は最大10行までとする
}
進行度設定の追加{
以下の[]の内容をプルダウン形式で設定できるようにする;
内容は"
[1，2，3，4，5，6，7]日ごとに"と"実績を[0,0.5,1,1.5,2,2.5,3]減らす"
とで二つプルダウンのボタンを追加しておく;
}
進行度設定の下にはメモの欄を追加;
左下に作成ボタン追加;
作成ボタンの左に削除ボタンも追加;
削除は編集時にはそのデータを削除、追加時には追加を取り消す;
作成ボタンを押した際目標が一つも設定されていない場合"目標を設定してください”と赤文字で作成ボタン下に生成する;
画面をHomeUIに戻しspaceに作ったものを追加ローカルディスクを用いて保存する;
｝
space{
作成データに基づきタイトルを枠左上に;
タイトルの2行下から目標を行ごとに並べていく:
目標の右に☆を10個並べる;
星をメータのようにとらえてクリックすると反応するようにする;}
☆のクリック{
クリックするごとに0，　0.5，　1,　0と変える;
クリックされた☆より左の☆✮★は全て★にする右にある☆✮★は全て☆にする;
実績値により☆のデザインを変える;
0で☆、0.5で✮、1で★と変えていく;
目標星数を参照して左側から☆の下に"―"を表示する;
枠右上には"..."のマークを追加してクリックすると作成UIに移動し編集を可能とする;
実績値が替えられた場合に保存ボタン右下に追加、更新日も保存しておく;
枠外右側に設定日と現在の日付を参照し”期限まで（day）日”と表示する;
}
起動時{
HomeUIを表示；
現在の日付と各目標の更新日を参照し進行度設定に基づき実績を減らし☆に反映させる
}