-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathToDoProject.html
121 lines (103 loc) · 3.87 KB
/
ToDoProject.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My First Java Script Project</title>
<style>
#todoList ul {margin:0; padding:0; list-style-type:none;}
#todoList ul li {
margin: 3px;
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
border-radius: 8px;
background-color: #CCCCCC;
border: 1px solid #3333;
}
#todoList ul li {height:30px;}
#todoList ul li span.title {float:left; display:inline-block; padding:5px;}
#todoList ul li span.action {float:right;inline-block;}
#todoList ul li.done {background-color:#00CC00;}
#todoList ul li a {font-family:Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none;
display:inline-block; border-radius:8px; background-color:#333333; padding:5px 8px; color:#fff;}
#todoList ul li a:hover {background-color:#eee; color:#000;}
</style>
<script>
var todoList=[];
function addTodo(frm)
{
var todo = frm.txtTodo;
if(todo.value !="")
{
todoList.push({"title":todo.value,"status":1});
//alert("Todo item has been added");
todo.value="";
todo.focus();
displayTodoItems();
}
else
{
alert("Todo item should not be blank");
return false;
}
return false;
}
function todoAction(no,action)
{
if(no != null)
{
todoList[no].status = action;
}
displayTodoItems();
}
function todoDelete(no)
{
if(no != null && no >= 0)
{
todoList.splice(no,1);
displayTodoItems();
}
}
function displayTodoItems()
{
var contStart = "<ul>";
var listItems = "";
var contEnd = "</ul>";
if(todoList.length > 0)
{
for(i=0;i<todoList.length;i++)
{
var setStatus = todoList[i].status==0?1:0;
var setClass = todoList[i].status==0?"done":"pending";
listItems += "<li class='"+setClass+"'><span class='title'>"+todoList[i].title+"</span>";
listItems += "<span class='action'>";
listItems+= "<a href='javascript:void(0);' onClick='todoAction("+i+","+setStatus+");'>";
listItems+= todoList[i].status=="0"?"Mark Pending":"Mark Done";
listItems+= "</a>";
listItems+= " <a href='javascript:void(0);' onClick='todoDelete("+i+");'>";
listItems+= " X ";
listItems+= "</a>";
listItems += "</span>";
listItems += "</li>";
}
}
else
{
listItems += "<li>No pending works to do.</li>";
}
document.getElementById("todoList").innerHTML = contStart + listItems + contEnd;
}
</script>
</head>
<body>
<div style="padding:10; width:600px; margin:0 auto; font-family: Arial, Helvetica, sans-serif; font-size: 14px;">
<form method="post" action="#" onSubmit="return addTodo(this)">
<input type="text" id="txtTodo" name="txtTodo" size=50 maxlength=50 placeholder="Add new todo item"
style="font-family: Arial, Helvetica, sans-serif; font-size:16px; padding:5px 8px; border:1px solid #ccc;
border-radius:8px;" />
<button type="submit" style="font-family: Arial, Helvetica, sans-serif; font-size:14px;
border-radius:8px; border:1px solid #ccc;padding:5px 20px;">Add</button>
</form>
<div id="todoList"></div>
</div>
</body>
</html>