差分

このページの2つのバージョン間の差分を表示します。

--- 05.javascriptでtodoアプリ:index.html [2018/12/08] – [3. todo.htmlファイル（HTMLファイル、ホームページのファイル）を作成] adash333
+++ 05.javascriptでtodoアプリ:index.html [2018/12/10] (現在) – [方針をたてる] adash333
@@ 行 16: / 行 16: @@
   -データはブラウザ上の『localStorage』という場所に保存(異なるスマホ・パソコン間では共有しない)
-ものとします。なお、異なるパソコン間でデータを共有するためには、サーバー関連の知識が必要になります。当サイトでもこの次の回で、Firebase(一部無料のサーバーサービス)を用いたToDoアプリの解説を行いたいと思います。
+ものとします。なお、異なるパソコン間でデータを共有するためには、サーバー関連の知識が必要になります。当サイトでも、別の機会にFirebase(一部無料のサーバーサービス)を用いたToDoアプリの解説を行いたいと思います。
 今回は、[[https://code-maven.com/todo-in-html-and-javascript|こちらのサイト]]のソースコードを利用させていただこうと思います。
@@ 行 22: / 行 22: @@
 ソースコード
+https://github.com/adash333/javascript-test/blob/master/todo.html
 これから作るもの
+https://adash333.github.io/javascript-test/todo.html
 ==== 0.用意するもの（開発環境） ====
 パソコン\\
@@ 行 67: / 行 67: @@
-==== 4.Bulmaのcolumn(カラム)システムを用いて計算結果とボタンをデザイン ====
+==== 4.ToDoアイテム追加欄と、ToDoリストをデザイン ====
+  -javacript-test/リポジトリの画面でtodo.htmlをクリック（スマホではなくパソコンで開きます。）
+  -画面右上の『鉛筆ボタン』をクリックして、todo.htmlを編集します。
+{{:05.javascriptでtodoアプリ:pasted:20181208-162710.png}}
+{{:05.javascriptでtodoアプリ:pasted:20181208-162804.png}}
-===== 参考サイト =====
+  -コードが編集できるようになるので、『Bulmaテンプレート』を『ToDoアプリ』に変更
+{{:05.javascriptでtodoアプリ:pasted:20181208-164237.png}}
+  -さらに、『<!-- ここにコンテンツを記載 -->』の部分を、以下に書き換え（大変ですが、キーボードで打ち込むのが上達の近道です。）
+<code>
+      <div class="field is-grouped">
+        <p class="control is-expanded">
+          <input id="task" class="input" type="text" placeholder="すること">
+        </p>
+        <p class="control">
+          <a id="add" class="button is-primary">追加</a>
+        </p>
+      </div>
+      <nav class="panel">
+        <div id="todos"></div>
+      </nav>
+</code>
+{{:05.javascriptでtodoアプリ:pasted:20181208-165718.png}}
+  -下の方へ行き、『Commit changes』をクリックすると、変更した内容が保存されます。
+{{:05.javascriptでtodoアプリ:pasted:20181208-165938.png}}
+この時点で、以下のようになっています。
+{{:05.javascriptでtodoアプリ:pasted:20181209-005617.png}}
+Bulmaのフォームについて：https://bulma.io/documentation/form/general/
+==== 5.ToDoアイテムの追加と、ToDoリスト表示の関数をJavascriptで記載 ====
+===== 参考サイト =====
+こちらのサイトのコードを利用させていただきました。
 https://code-maven.com/todo-in-html-and-javascript
+https://www.sejuku.net/blog/57625
+【JavaScript入門】addEventListener()によるイベント処理の使い方！
+20181205　by マサト