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

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

ユーザ用ツール

サイト用ツール


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


差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
05.javascriptでtodoアプリ:index.html [2018/12/08]
adash333 [3. todo.htmlファイル(HTMLファイル、ホームページのファイル)を作成]
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.用意するもの(開発環境) ====
 パソコン\\ パソコン\\
行 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://code-maven.com/todo-in-html-and-javascript
 +
 +
 +
 +
 +https://www.sejuku.net/blog/57625
 +【JavaScript入門】addEventListener()によるイベント処理の使い方!
 +20181205 by マサト
 +
 +
  
  
  
  


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