###前提
現在、WordpressでSNS機能を持ったtodoリストwebアプリを作ろうとしています。BuddyPressというプラグインを導入して、SNS機能をつけることには成功し、ToDoリスト機能は現在製作中です。以下がそのコードです。(cssやjsが直接書かれているのにはいろいろ事情があります。)
php
1<!doctype html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #container{ 8 margin: 0 auto; 9 width: 60%; 10 } 11 #memo{ 12 width: 100%; 13 14 } 15 .content{ 16 float: left; 17 width: 90%; 18 word-wrap: break-word; 19 20 } 21 22 h6{ 23 color: red; 24 } 25 li{ 26 list-style: decimal; 27 } 28 .MainWelcome{ 29 30 31 } 32 .ExplainToDo{ 33 text-align: center; 34 } 35 </style> 36 </head> 37 <body> 38 39 40 41 <div id="container"> 42 <h4 class="ExplainToDo">続くToDoリスト</h4> 43 <h6 class="ExplainToDo">*クリックするとそのタスクは消えます。</h6> 44 <textarea id="memo" name="memo"></textarea> 45 <p> 46 <input type="button" id="save" value="保存"> 47 <input type="button" id="clear" value="全消去"> 48 </p> 49 <ul> 50 51 </ul> 52 </div> 53 <script type="text/javascript" src=jquery1.10.1.min.js></script> 54 <script type="text/javascript" > 55 $(function () { 56 // localStorage.setItem('memo','test'); // データセット 57 // localStorage.getItem('memo'); // データ取得 58 // localStorage.removeItem('memo'); // データ削除 59 // localStorage.clear(); // データ全削除 60 61 var list = []; // localStorageの内容をソートして格納するための配列 62 var i = 0; // listのアドレス番号及びlocalStorage保存時のkey 63 64 // 初期読み込み 65 // アルファベット順で格納されている(key:1,10,2,3,4,5 ...)ので、配列に格納してソートする 66 for(var key in localStorage){ 67 list[key] = localStorage.getItem(key); 68 // console.log(list); 69 } 70 for(i in list){ 71 // <li>を生成 72 console.log(i); 73 cleateLi(list[i]); 74 } 75 // 初期読み込み後にiを+1 76 i++; 77 78 // 保存ボタン 79 $('#save').click(function(){ 80 // 入力フィールドの値を取得 81 var memo = $('#memo').val(); 82 83 // 入力フィールドを空の場合は処理しない 84 if(!memo) return; 85 86 // ローカルストレージに保存 87 localStorage.setItem(i, memo); 88 89 // <li>を生成 90 cleateLi(memo); 91 92 // 入力フィールドを空にする 93 $('#memo').val(''); 94 95 // iのカウントアップ 96 i++; 97 }); 98 99 // <li>生成メソッド 100 function cleateLi(value){ 101 // 消去ボタン押下時に要素を特定するためにdata属性を利用する 102 var li = $('<li>').html(value).addClass('todo').attr('data-todo',i); 103 104 // 要素を末尾に追加 105 $('ul').append(li); 106 107 // 動的に生成された要素<li>にonclickイベントを設定 108 $('ul').on('click', '.todo', function(){ 109 localStorage.removeItem($(this).data('todo')); 110 $(this).remove(); 111 console.log($(this).data('todo')); 112 }); 113 } 114 115 // 全消去ボタン 116 $('#clear').click(function(){ 117 localStorage.clear(); 118 $('li').remove(); 119 }); 120 }) 121 122 </script> 123 124 125 </body> 126</html>
###実現したいこと
①レイアウトのバグを直したい
ToDoを作成すると、テキストボックスの下側にリストとしてToDoが増えていくのですが、そこ以外にも変な場所にToDoが表示されます。テキストボックスの下側にだけ表示させるにはどうしたらいいですか?
②ToDoを保存・集計できるようにしたい
このままだと、ToDoを一度消すと記録が残らないので、データベースなどを利用して、保存・集計できるようにしたいです。今はlocalStorageに保存する仕組みなので、これをデータベースに保存する仕組みに変えたほうがいいでしょうか?
③毎日、指定時刻までにToDoが記入されているかチェックしたい。
指定時刻までにその日のToDoが書かれていなかったら、メールを送って知らせるという機能をつけたいのですが、「指定時刻までにToDoが記入されていなかったら〜する」というのはどうしたらいいですか?
###補足情報
現在、ローカル開発環境でサイトを作っているので、サイトをそのまま見せることはできません。曖昧な部分が多いと思いますが、宜しくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/28 07:40