05.javascriptでtodoアプリ:index.html

差分

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

この比較画面へのリンク

--- 05.javascriptでtodoアプリ:index.html [2018/12/08] – [方針をたてる] 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|こちらのサイト]]のソースコードを利用させていただこうと思います。
@@ 行 83: / 行 83: @@
 <code>
-      <div class="field has-addons">
+      <div class="field is-grouped">
-        <div class="control">
+        <p class="control is-expanded">
           <input id="task" class="input" type="text" placeholder="すること">
-        </div>
+        </p>
-        <div class="control">
+        <p class="control">
-          <a id="add" class="button is-info">
+          <a id="add" class="button is-primary">追加</a>
-            追加
+        </p>
-          </a>
-        </div>
       </div>
-      <hr class="hr">
+      <nav class="panel">
-      <div id="todos"></div>
+        <div id="todos"></div>
+      </nav>
 </code>
@@ 行 105: / 行 104: @@
 この時点で、以下のようになっています。
-{{:05.javascriptでtodoアプリ:pasted:20181208-170329.png}}
+{{:05.javascriptでtodoアプリ:pasted:20181209-005617.png}}
-Bulmaのフォームについて（公式サイト）：https://bulma.io/documentation/form/general/
+Bulmaのフォームについて：https://bulma.io/documentation/form/general/
 ==== 5.ToDoアイテムの追加と、ToDoリスト表示の関数をJavascriptで記載 ====
@@ 行 113: / 行 112: @@
 ===== 参考サイト =====
+こちらのサイトのコードを利用させていただきました。
 https://code-maven.com/todo-in-html-and-javascript
+https://www.sejuku.net/blog/57625
+【JavaScript入門】addEventListener()によるイベント処理の使い方！
+20181205　by マサト

05.javascriptでtodoアプリ/index.html.1544272252.txt.gz · 最終更新: 2018/12/08 by adash333