Skip to content

Instantly share code, notes, and snippets.

@ChenPaulYu

ChenPaulYu/index.html

Created April 22, 2017 04:59
Show Gist options
  • Save ChenPaulYu/d45a8d83c7c738b3fd32c389bae8416f to your computer and use it in GitHub Desktop.
Save ChenPaulYu/d45a8d83c7c738b3fd32c389bae8416f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/nuqixoy
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One" rel="stylesheet"
<title>JS Bin</title>
<style id="jsbin-css">
body{
background-image:url('http://ideapit.net/timg/364.jpg');
background-repeat: no-repeat;
background-position:right,center;
background-size:100%;
}
#MainArea{
font-family: 'Rubik Mono One', sans-serif;
width:480px;
height:720px;
text-align:center;
border:1px solid;
border-radius: 40px;
box-shadow: 10px 10px 5px rgb(100,100,100);
}
.js-editbtn,.js-delbtn{
float:right;
}
#ularea{
list-style: none;
}
.list{
background-color:white;
padding:5px;
text-align:left;
margin:5px;
margin-right:50px;
}
.js-date{
font-size:10px;
}
</style>
</head>
<body>
<div id='MainArea'>
<h1>ToDoList</h1>
<input type="text" id='input'>
<button id='btn'>加入</button>
<ul id='ularea'>
<li class='list'>
<input type="checkbox" class='js-check'>
<span class="js-content">123</span>
<span class="js-date"></span>
<button class='js-editbtn'>編輯</button>
<button class='js-delbtn'>刪除</button>
</li>
</ul>
共有<span id='total-task-number'>1</span>各事項
<button id='js-delallbtn'>刪除所有完成事項</button>
<hr>
<button id='show-finished'>顯示已完成事項</button>
<button id='show-unfinished'>顯示未完成事項</button>
<button id='show-all'>顯示所有事項</button>
</div>
<script id="jsbin-javascript">
function add(){
var value = $('#input').val();
value = " "+value
var date = new Date();
var dateString =" "+ date.getFullYear()+"/"+date.getMonth()+"/"+date.getDate()+" "+date.getHours()+":"+date.getMinutes();
var dataHtmlString = createHtmlString(value,dateString);
if(value !=''){
$('#ularea').append(dataHtmlString);
$('#input').val('');
updateNumber()
}
}
function createHtmlString(value,dateString){
var htmlstring = '<li class="list"><input class="js-check" type="checkbox"><span class="js-content">'+value+'</span><span class="js-date">'+dateString+'</span><button class="js-editbtn">編輯</button><button class="js-delbtn">刪除</button></li>'
return htmlstring
}
function del(){
$(this).closest('li').remove();
updateNumber()
}
function edit(){
var $task = $(this).closest("li");
var originTaskContent = $task.find(".js-content").text();
var newTask = prompt('將 "'+originTaskContent+'" 改成：');
$task.find(".js-content").text(newTask);
}
function delall(){
$('.js-check:checked').closest('li').remove();
updateNumber()
}
function updateNumber(){
var total = $(".js-check").length;
$("#total-task-number").text(total);
}
function showfinished(){
$(".js-check").closest("li").hide();
$(".js-check:checked").closest("li").show();
}
function showunfinished(){
$(".js-check").closest("li").show();
$(".js-check:checked").closest("li").hide();
}
function showall(){
$(".js-check").closest("li").show();
}
$('#btn').on('click',add);
$('ul').on('click','.js-delbtn',del);
$('ul').on('click','.js-editbtn',edit);
$('#js-delallbtn').on('click',delall);
$('#show-finished').on('click',showfinished);
$('#show-unfinished').on('click',showunfinished);
$('#show-all').on('click',showall);
</script>
<script id="jsbin-source-css" type="text/css">body{
background-image:url('http://ideapit.net/timg/364.jpg');
background-repeat: no-repeat;
background-position:right,center;
background-size:100%;
}
#MainArea{
font-family: 'Rubik Mono One', sans-serif;
width:480px;
height:720px;
text-align:center;
border:1px solid;
border-radius: 40px;
box-shadow: 10px 10px 5px rgb(100,100,100);
}
.js-editbtn,.js-delbtn{
float:right;
}
#ularea{
list-style: none;
}
.list{
background-color:white;
padding:5px;
text-align:left;
margin:5px;
margin-right:50px;
}
.js-date{
font-size:10px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">function add(){
var value = $('#input').val();
value = " "+value
var date = new Date();
var dateString =" "+ date.getFullYear()+"/"+date.getMonth()+"/"+date.getDate()+" "+date.getHours()+":"+date.getMinutes();
var dataHtmlString = createHtmlString(value,dateString);
if(value !=''){
$('#ularea').append(dataHtmlString);
$('#input').val('');
updateNumber()
}
}
function createHtmlString(value,dateString){
var htmlstring = '<li class="list"><input class="js-check" type="checkbox"><span class="js-content">'+value+'</span><span class="js-date">'+dateString+'</span><button class="js-editbtn">編輯</button><button class="js-delbtn">刪除</button></li>'
return htmlstring
}
function del(){
$(this).closest('li').remove();
updateNumber()
}
function edit(){
var $task = $(this).closest("li");
var originTaskContent = $task.find(".js-content").text();
var newTask = prompt('將 "'+originTaskContent+'" 改成：');
$task.find(".js-content").text(newTask);
}
function delall(){
$('.js-check:checked').closest('li').remove();
updateNumber()
}
function updateNumber(){
var total = $(".js-check").length;
$("#total-task-number").text(total);
}
function showfinished(){
$(".js-check").closest("li").hide();
$(".js-check:checked").closest("li").show();
}
function showunfinished(){
$(".js-check").closest("li").show();
$(".js-check:checked").closest("li").hide();
}
function showall(){
$(".js-check").closest("li").show();
}
$('#btn').on('click',add);
$('ul').on('click','.js-delbtn',del);
$('ul').on('click','.js-editbtn',edit);
$('#js-delallbtn').on('click',delall);
$('#show-finished').on('click',showfinished);
$('#show-unfinished').on('click',showunfinished);
$('#show-all').on('click',showall);
</script></body>
</html>
Raw
jsbin.nuqixoy.css
body{
background-image:url('http://ideapit.net/timg/364.jpg');
background-repeat: no-repeat;
background-position:right,center;
background-size:100%;
}
#MainArea{
font-family: 'Rubik Mono One', sans-serif;
width:480px;
height:720px;
text-align:center;
border:1px solid;
border-radius: 40px;
box-shadow: 10px 10px 5px rgb(100,100,100);
}
.js-editbtn,.js-delbtn{
float:right;
}
#ularea{
list-style: none;
}
.list{
background-color:white;
padding:5px;
text-align:left;
margin:5px;
margin-right:50px;
}
.js-date{
font-size:10px;
}
Raw
jsbin.nuqixoy.js
function add(){
var value = $('#input').val();
value = " "+value
var date = new Date();
var dateString =" "+ date.getFullYear()+"/"+date.getMonth()+"/"+date.getDate()+" "+date.getHours()+":"+date.getMinutes();
var dataHtmlString = createHtmlString(value,dateString);
if(value !=''){
$('#ularea').append(dataHtmlString);
$('#input').val('');
updateNumber()
}
}
function createHtmlString(value,dateString){
var htmlstring = '<li class="list"><input class="js-check" type="checkbox"><span class="js-content">'+value+'</span><span class="js-date">'+dateString+'</span><button class="js-editbtn">編輯</button><button class="js-delbtn">刪除</button></li>'
return htmlstring
}
function del(){
$(this).closest('li').remove();
updateNumber()
}
function edit(){
var $task = $(this).closest("li");
var originTaskContent = $task.find(".js-content").text();
var newTask = prompt('將 "'+originTaskContent+'" 改成：');
$task.find(".js-content").text(newTask);
}
function delall(){
$('.js-check:checked').closest('li').remove();
updateNumber()
}
function updateNumber(){
var total = $(".js-check").length;
$("#total-task-number").text(total);
}
function showfinished(){
$(".js-check").closest("li").hide();
$(".js-check:checked").closest("li").show();
}
function showunfinished(){
$(".js-check").closest("li").show();
$(".js-check:checked").closest("li").hide();
}
function showall(){
$(".js-check").closest("li").show();
}
$('#btn').on('click',add);
$('ul').on('click','.js-delbtn',del);
$('ul').on('click','.js-editbtn',edit);
$('#js-delallbtn').on('click',delall);
$('#show-finished').on('click',showfinished);
$('#show-unfinished').on('click',showunfinished);
$('#show-all').on('click',showall);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment