to-do list作業
終於上完課了...
今天花了4.5hr寫基本的to-do list作業,
雖然離真正可上市的to-do list功能還有很多進階的功能沒做,
但已寫的滿累的...@@
完整code如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>to do list</title>
<style>
span {
cursor: pointer;
display: inline-block;
vertical-align: middle;
color: #ddd;
margin: 0 2px;
}
</style>
</head>
<body>
<div>
<header>
<h3>My To-do List</h3>
</header>
<ul id="list"></ul>
<div>
<div>
<div>
<input id="addItem" type="text" placeholder="Add to-do items here">
</div>
<div>
<button id="addBtn">Add</button>
</div>
</div>
<p id="errorZone"></p>
</div>
</div>
<script>
window.onload = function() {
var addItem = document.getElementById("addItem");
var addBtn = document.getElementById("addBtn");
var list = document.getElementById("list");
var errorZone = document.getElementById("errorZone");
toAdd();
};
function toAdd() {
var arr = [];
addBtn.addEventListener("click", function() {
if (!addItem.value) {
return;
}
if (arr.indexOf(addItem.value) == -1) {
arr.push(addItem.value);
errorZone.innerHTML = "";
var span = document.createElement("SPAN");
var removeIcon = document.createTextNode("X");
span.appendChild(removeIcon);
var li = document.createElement("LI");
var item = document.createTextNode(addItem.value);
li.appendChild(item);
li.appendChild(span);
list.appendChild(li);
addItem.value = "";
span.addEventListener("click", function() {
list.removeChild(span.parentNode);
var ans = arr.findIndex(checkItem);
function checkItem(val) {
return val == span.parentNode.childNodes[0].textContent;
}
if (ans > -1) {
arr.splice(ans, 1);
}
});
} else {
errorZone.innerHTML = "The item is already in the to-do list."
}
});
}
</script>
</body>
</html>
今天花了4.5hr寫基本的to-do list作業,
雖然離真正可上市的to-do list功能還有很多進階的功能沒做,
但已寫的滿累的...@@
完整code如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>to do list</title>
<style>
span {
cursor: pointer;
display: inline-block;
vertical-align: middle;
color: #ddd;
margin: 0 2px;
}
</style>
</head>
<body>
<div>
<header>
<h3>My To-do List</h3>
</header>
<ul id="list"></ul>
<div>
<div>
<div>
<input id="addItem" type="text" placeholder="Add to-do items here">
</div>
<div>
<button id="addBtn">Add</button>
</div>
</div>
<p id="errorZone"></p>
</div>
</div>
<script>
window.onload = function() {
var addItem = document.getElementById("addItem");
var addBtn = document.getElementById("addBtn");
var list = document.getElementById("list");
var errorZone = document.getElementById("errorZone");
toAdd();
};
function toAdd() {
var arr = [];
addBtn.addEventListener("click", function() {
if (!addItem.value) {
return;
}
if (arr.indexOf(addItem.value) == -1) {
arr.push(addItem.value);
errorZone.innerHTML = "";
var span = document.createElement("SPAN");
var removeIcon = document.createTextNode("X");
span.appendChild(removeIcon);
var li = document.createElement("LI");
var item = document.createTextNode(addItem.value);
li.appendChild(item);
li.appendChild(span);
list.appendChild(li);
addItem.value = "";
span.addEventListener("click", function() {
list.removeChild(span.parentNode);
var ans = arr.findIndex(checkItem);
function checkItem(val) {
return val == span.parentNode.childNodes[0].textContent;
}
if (ans > -1) {
arr.splice(ans, 1);
}
});
} else {
errorZone.innerHTML = "The item is already in the to-do list."
}
});
}
</script>
</body>
</html>
留言
張貼留言