#author("2024-12-06T16:29:26+09:00;2024-12-06T16:14:13+09:00","default:member","member") #author("2024-12-11T15:43:54+09:00;2024-12-06T16:14:13+09:00","default:member","member") [[伊藤みらの/卒業研究]]の別記事です。 ~ [[あたらしいレシピサイトをつくりたい！>http://newresipe.starfree.jp/]] ~ **構造について -サイトマップ・ディレクトリ |#IMAGE(サイトマップ.png)|#IMAGE(ディレクトリ.png)| -Javascriptは機能ごとに分け、個別に読み込ませています。 ~ //**レイアウトについて ~ **機能について ***材料欄 #IMAGE(zairyou1.png,40%) -増減アイコンを押すと１ずつ増減する(０が最低値) -材料の分量にもフォームがあり、全体の人数分を逆算できる テンプレート <!-- 材料名 --><div class="ingredient" data-unit="単位" data-base="初期値(num)"> <label for="piecesInput">材料名</label> <input type="number" class="ingredient-input" name="en単位" value="初期値(num)" step="any"> <span class="unit">単位</span> </div> spanタグの中には大さじなど頭に足したい文字がある時に使います。何もない場合でもCSSを適用させるために入れておきます。 ***タイマー -スタート、ストップ、リセットボタンがある -カウントが0になると「時間が経ちました」のアラートが表示される -リセットボタンを押すと「リセットしますか？」のダイアログボタンが表示される - ~ ***進捗バー ***