05.javascriptでtodoアプリ:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
05.javascriptでtodoアプリ:index.html [2018/12/08] – [3. todo.htmlファイル(HTMLファイル、ホームページのファイル)を作成] adash333 | 05.javascriptでtodoアプリ:index.html [2018/12/08] – [4.ToDoアイテム追加欄と、ToDoリストをデザイン] adash333 | ||
---|---|---|---|
行 22: | 行 22: | ||
ソースコード | ソースコード | ||
+ | https:// | ||
これから作るもの | これから作るもの | ||
+ | https:// | ||
==== 0.用意するもの(開発環境) ==== | ==== 0.用意するもの(開発環境) ==== | ||
パソコン\\ | パソコン\\ | ||
行 61: | 行 61: | ||
</ | </ | ||
+ | {{: | ||
+ | {{: | ||
- | ==== 4.Bulmaのcolumn(カラム)システムを用いて計算結果とボタンをデザイン ==== | ||
+ | ==== 4.ToDoアイテム追加欄と、ToDoリストをデザイン ==== | ||
+ | -javacript-test/ | ||
+ | -画面右上の『鉛筆ボタン』をクリックして、todo.htmlを編集します。 | ||
- | ===== 参考サイト ===== | + | {{: |
+ | {{: | ||
+ | |||
+ | -コードが編集できるようになるので、『Bulmaテンプレート』を『ToDoアプリ』に変更 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -さらに、『< | ||
+ | |||
+ | < | ||
+ | <div class=" | ||
+ | <p class=" | ||
+ | <input id=" | ||
+ | </p> | ||
+ | <p class=" | ||
+ | <a id=" | ||
+ | </p> | ||
+ | </ | ||
+ | <nav class=" | ||
+ | <div id=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -下の方へ行き、『Commit changes』をクリックすると、変更した内容が保存されます。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | この時点で、以下のようになっています。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Bulmaのフォームについて:https:// | ||
+ | |||
+ | ==== 5.ToDoアイテムの追加と、ToDoリスト表示の関数をJavascriptで記載 ==== | ||
+ | |||
+ | |||
+ | ===== 参考サイト ===== | ||
+ | こちらのサイトのコードを利用させていただきました。 | ||
https:// | https:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | 【JavaScript入門】addEventListener()によるイベント処理の使い方! | ||
+ | 20181205 by マサト | ||
+ | |||
+ | |||
05.javascriptでtodoアプリ/index.html.txt · 最終更新: 2018/12/10 by adash333