2
To-Doアイテムをすべてローカルストレージに保存し、コンピュータを再起動したりページを更新したりするときは、すべてのアイテムがそのページに表示されます。元の注文。？To-DoリストデータをHTMLでローカルストレージに保存する
//check of spec
$("ol").on("click", "li", function(){
$(this).toggleClass("completed");
});
//click on X to delete To-DO
$("ol").on("click", "span", function(event){
\t $(this).parent().fadeOut(500,function(){
\t \t $(this).remove();
\t });
\t event.stopPropagation();
});
$("input[type='text'").keypress(function(event){
\t if(event.which === 13) {
\t \t //grabbing the text typed
\t \t var todoText = $(this).val();
\t \t $(this).val("");
\t \t //create a new LI and add to UL
\t \t $("ol").append("<li><span><i class='fa fa-trash'></i></span> " + todoText +"</li>")
\t }
});
$(".fa-plus").click(function(){
\t $("input[type='text'").fadeToggle();
});h1 {
\t background: #2980b9;
\t color: white;
\t margin: 0;
\t padding: 10px 15px;
\t text-transform: uppercase;
\t font-size: 24px;
\t font-weight: normal;
}
iframe {
\t float: left;
}
ol {
\t /* THE BULLET POINTS
\t list-style: none;
\t */
\t margin: 0;
\t padding: 0;
\t font-size: 18px;
}
body {
background-color: rgb(13, 168, 108);
}
li {
\t background: #fff;
\t height: 30px;
\t line-height: 30px;
\t color: #666;
}
li:nth-child(2n){
\t background: #d3d3d3;
}
span {
\t height: 30px;
\t width: 0px;
\t margin-right: 20px;
\t text-align: center;
\t color:white;
\t display: inline-block;
\t transition: 0.2s linear;
\t opacity:0;
\t background: #e74c3c
\t
}
li:hover span {
\t width: 30px;
\t opacity: 1.0;
}
input {
\t font-size: 18px;
\t width: 100%;
\t padding: 13px 13px 13px 20px;
\t box-sizing: border-box;
\t border: 3px solid rgba(0,0,0,0);
\t color: #2980b9;
\t background-color: #e4e4e4;
}
input:focus {
\t background: white;
\t border: 3px solid green;
\t /*OUTLINE OF INPUT BOX
\t outlin: none; */
}
.fa-plus {
\t float: right;
}
#container {
\t
\t width: 360px;
\t margin: 60px auto;
\t background: #d3d3d3;
\t box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
.completed {
\t color: red;
\t text-decoration: line-through;
}<!DOCTYPE html>
<html>
<head>
\t <title>ToDo List</title>
\t <link rel="stylesheet" type="text/css" href="utd.css">
\t <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
\t <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
\t <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
\t <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
\t <script>
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
</script>
</head>
<body>
\t <iframe src="http://free.timeanddate.com/clock/i5zr5d5i/n1991/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhc00f/hhs2/hmcf00/hms2/hsv0" frameborder="0" width="110" height="110"></iframe>
\t <div id="container">
\t \t <h1>To-do List <i class="fa fa-plus"></i></h1>
\t \t <form id="task-list">
\t \t <input type="text" placeholder="Add a To-Do" id="task">
\t </form>
\t \t <ol id="sortable">
\t \t \t <li><span><i class="fa fa-trash"></i></span> EXAMPLE</li>
\t \t \t
\t \t </ol>
\t </div>
\t
<script type="text/javascript" src="Utd.js"></script>
</body>
</html>
申し訳ありません、これは私がここに初めて参加したことであり、タイトルがつぶれています。ごめんなさい。 –
質問を編集して修正できますか？それはぎこちないタイトルだけではありません。 – roelofs
どうしたのですか？本当にごめんなさい。このウェブサイトには本当にごめんなさい。 –