├── index.html
├── script.js
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Oh Crud! Things I Forgot To-Do
6 |
7 |
8 |
9 |
10 |
11 |
12 |
Oh Crud!
13 |
Things I forgot to do:
14 |
';
15 | data += '| '+(i+1)+". " + this.tasks[i] + ' | ';
16 | data += ' | ';
17 | data += ' | ';
18 | data += '
';
19 | }
20 | }
21 |
22 | this.Count(this.tasks.length);
23 | return this.el.innerHTML = data;
24 | };
25 |
26 | this.Add = function () {
27 | el = document.getElementById('add-todo');
28 | // Get the value
29 | var task = el.value;
30 |
31 | if (task) {
32 | // Add the new value
33 | this.tasks.push(task.trim());
34 | // Reset input value
35 | el.value = '';
36 | // Dislay the new list
37 | this.FetchAll();
38 | }
39 | };
40 |
41 | this.Edit = function (item) {
42 | var el = document.getElementById('edit-todo');
43 | // Display value in the field
44 | el.value = this.tasks[item];
45 | // Display fields
46 | document.getElementById('edit-box').style.display = 'block';
47 | self = this;
48 |
49 | document.getElementById('save-edit').onsubmit = function() {
50 | // Get value
51 | var task = el.value;
52 |
53 | if (task) {
54 | // Edit value
55 | self.tasks.splice(item, 1, task.trim());
56 | // Display the new list
57 | self.FetchAll();
58 | // Hide fields
59 | CloseInput();
60 | }
61 | }
62 | };
63 |
64 | this.Delete = function (item) {
65 | // Delete the current row
66 | this.tasks.splice(item, 1);
67 | // Display the new list
68 | this.FetchAll();
69 | };
70 |
71 | this.Count = function(data) {
72 | var el = document.getElementById('counter');
73 | var name = 'Tasks';
74 |
75 | if (data) {
76 | if(data ==1){
77 | name = 'Task'
78 | }
79 | el.innerHTML = data + ' ' + name ;
80 | }
81 | else {
82 | el.innerHTML = 'No ' + name;
83 | }
84 | };
85 |
86 | }
87 |
88 | app.FetchAll();
89 |
90 | function CloseInput() {
91 | document.getElementById('edit-box').style.display = 'none';
92 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 |
2 | .title{
3 | text-align: center;
4 | margin-top: 25px;
5 | }
6 |
7 | .form{
8 | margin: auto;
9 | max-width:400px;
10 | text-align: center
11 | }
12 |
13 | input[type='submit'], button, [aria-label]{
14 | cursor: pointer;
15 | }
16 | #edit-box{
17 | display: none;
18 | max-width: 80%;
19 | margin: auto;
20 | margin-top: 10px;
21 | }
22 |
23 | td{
24 | background-color: aliceblue;
25 | padding-right: 10px;
26 | text-align: left;
27 | }
28 |
29 | .to-do{
30 | background: transparent !important;
31 | }
32 |
33 |
--------------------------------------------------------------------------------