testone/index.html at 13a7b0344ea14c1b2625307350a5c492421fe89e · projectlumos/testone · GitHub

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
122
123
124
125
126
127
128
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
	<title>Todo list</title>
	<style>
	body{
		background-image: url("http://slodive.com/wp-content/uploads/2012/04/wood-background/wood-dark-background.jpg");
	}
		ul{
		list-style: none;
		padding: 10px;
		margin: 20px;
		width: 40%;
		height: 100%;
		float: left;
		border: 1px solid #333;
		background-image: url("http://image.naldzgraphics.net/2012/08/28-Pristine.jpg");
		text-align: center;
		font-size: 25px;
		color: black;
		font-family: comic sans ms;

		margin-left: 60px;
		margin-top: 30px;
		}
		h1{
			font-family: georgia;
			font-size: 35px;
			font-weight: bold;
			color: red;
			margin-left: 560px;

		}
		#input{
			margin-left: 510px;
			font-size: 20px;
		}
		#btn{
			margin-left: 10px;
			font-size: 20px;
			font-family: georgia;
			border-radius: 50%	;
		}
		li{
			margin: 10px;
			font-size: 30px;
		}
		img{
			width: 20%;
			height: 20%;
		}

	</style>
</head>
<body>
<h1>ToDo List </h1>
<input type="text" id="input"/>
<button id="btn"> ADD</button>


<ul id="todo"><span style="font-family: georgia; font-weight: bold; color: blue;"> Things Remaining</span><hr/></ul>
<ul id="done"><span style="font-family: georgia; font-weight: bold; color: blue; "> Things Done</span><hr/></ul>

<script>
	(function(){
		var input=document.getElementById('input');
		var btn=document.getElementById('btn');
		var lists={
			todo:document.getElementById('todo'),
			done:document.getElementById('done')
		};
		var makeTaskHtml = function(str, onCheck){
			var el = document.createElement('li');
			var checkbox = document.createElement('input');
			var label = document.createElement('span');

			label.textContent=str;
			checkbox.type='checkbox';
			checkbox.addEventListener('click',onCheck);
			el.appendChild(checkbox);
			el.appendChild(label);


			return el;
		};

		var addTask = function( task){
			lists.todo.appendChild(task);

		};


		var onCheck = function(event){
			var task = event.target.parentElement;
			var list= task.parentElement.id;
			lists[list === 'done' ? 'todo' : 'done'].appendChild(task);

			this.checked =false;

		};

		var onInput = function(){
			var str=input.value.trim();

			if (str.length>0){
				addTask(makeTaskHtml(str,onCheck));

				input.value='';
				input.focus()

			}
		};

		btn.addEventListener('click',onInput);
		input.addEventListener('keyup',function(event){
			var code= event.keyCode;

			if(code === 13){
				onInput();
			}

		});
		input.focus();
	}());
</script>

</body>
</html>