サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


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


差分

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

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
05.javascriptでtodoアプリ:index.html [2018/12/08]
adash333 [4.ToDoアイテム追加欄と、ToDoリストをデザイン]
05.javascriptでtodoアプリ:index.html [2018/12/10] (現在)
adash333 [方針をたてる]
行 16: 行 16:
   -データはブラウザ上の『localStorage』という場所に保存(異なるスマホ・パソコン間では共有しない)   -データはブラウザ上の『localStorage』という場所に保存(異なるスマホ・パソコン間では共有しない)
  
-ものとします。なお、異なるパソコン間でデータを共有するためには、サーバー関連の知識が必要になります。当サイトでも次の回で、Firebase(一部無料のサーバーサービス)を用いたToDoアプリの解説を行いたいと思います。+ものとします。なお、異なるパソコン間でデータを共有するためには、サーバー関連の知識が必要になります。当サイトでも、別機会にFirebase(一部無料のサーバーサービス)を用いたToDoアプリの解説を行いたいと思います。
  
 今回は、[[https://code-maven.com/todo-in-html-and-javascript|こちらのサイト]]のソースコードを利用させていただこうと思います。 今回は、[[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.用意するもの(開発環境) ==== ==== 0.用意するもの(開発環境) ====
 パソコン\\ パソコン\\
行 83: 行 83:
  
 <code> <code>
-      <div class="field has-addons"> +      <div class="field is-grouped"> 
-        <div class="control">+        <class="control is-expanded">
           <input id="task" class="input" type="text" placeholder="すること">           <input id="task" class="input" type="text" placeholder="すること">
-        </div+        </p
-        <div class="control"> +        <class="control"> 
-          <a id="add" class="button is-info"> +          <a id="add" class="button is-primary">追加</a> 
-            追加 +        </p>
-          </a> +
-        </div>+
       </div>       </div>
-      <hr class="hr"> +      <nav class="panel"> 
-      <div id="todos"></div>+        <div id="todos"></div
 +      </nav>
 </code> </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で記載 ==== ==== 5.ToDoアイテムの追加と、ToDoリスト表示の関数をJavascriptで記載 ====
行 113: 行 112:
  
 ===== 参考サイト ===== ===== 参考サイト =====
 +こちらのサイトのコードを利用させていただきました。
  
 https://code-maven.com/todo-in-html-and-javascript https://code-maven.com/todo-in-html-and-javascript
 +
 +
 +
 +
 +https://www.sejuku.net/blog/57625
 +【JavaScript入門】addEventListener()によるイベント処理の使い方!
 +20181205 by マサト
 +
 +
  
  
  
  


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