├── assets
├── img
│ └── favicon.ico
├── javascript
│ └── script.js
└── stylesheets
│ └── index.css
├── index.html
└── license.txt
/assets/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chintan0513/ToDo-List/c35f9f5b2055bcc620190be34e58169cfc8ef513/assets/img/favicon.ico
--------------------------------------------------------------------------------
/assets/javascript/script.js:
--------------------------------------------------------------------------------
1 | const input = document.querySelector('.search')
2 | const btn = document.querySelector("#add")
3 | const list = document.querySelector('#list_item')
4 |
5 | if(!localStorage.getItem("Data")){
6 | localStorage.setItem("Data","[]")
7 | }
8 |
9 | let data = JSON.parse(localStorage.getItem("Data"))
10 | if(data.length > 0){
11 | for(let text of data){
12 | console.log(text)
13 | AddElement(text)
14 | }
15 | }
16 |
17 | input.addEventListener('keydown', e => {
18 | if(e.key === 'Enter') {
19 | console.log('Enter Key');
20 | handleAdd()
21 | }
22 | })
23 |
24 | const handleAdd = () => {
25 | if(input.value.length>0) {
26 | AddElement(input.value)
27 | let currentData = JSON.parse(localStorage.getItem("Data"))
28 | localStorage.setItem("Data",JSON.stringify([...currentData,input.value]))
29 | input.value = '' }
30 | else {
31 | window.alert("task cant be edit")
32 | }
33 | }
34 |
35 | function AddElement(text){
36 | const ele = document.createElement('li')
37 | const text_node = document.createElement("span")
38 | text_node.innerText = text
39 | ele.appendChild(text_node)
40 | ele.style.margin="20px 20px 20px 20px"
41 | list.appendChild(ele)
42 |
43 | //create a dynamic button element
44 | const button = document.createElement('button')
45 | button.innerHTML = " Delete ";
46 | button.style.margin="3px 3px 3px 3px "
47 | button.style.cursor="pointer"
48 | button.style.border= "2px solid white";
49 | button.style.backgroundColor="#4db8ff"
50 | button.style.borderRadius="5px"
51 | ele.appendChild(button)
52 | button.addEventListener("onclick",(e) =>{
53 | deleteElement(e)
54 | })
55 | }
56 |
57 | function deleteElement(ele){
58 | let text = ele.parentElement.parentElement.querySelector("span").innerText
59 | console.log(text)
60 | let currentData = JSON.parse(localStorage.getItem("Data"))
61 |
62 | localStorage.setItem("Data",JSON.stringify(currentData.filter(el => el !== text)))
63 |
64 | ele.parentElement.parentElement.remove()
65 | }
66 |
67 | btn.addEventListener('click', (handleAdd))
68 |
69 | const dark_btn = document.querySelector('.btn')
70 | const body = document.querySelector('body')
71 |
72 | dark_btn.addEventListener('click', () => {
73 | body.classList.toggle('dark')
74 | })
--------------------------------------------------------------------------------
/assets/stylesheets/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
6 | }
7 | body {
8 | background: #9796f0; /* fallback for old browsers */
9 | background: -webkit-linear-gradient(to right, #fbc7d4, #9796f0); /* Chrome 10-25, Safari 5.1-6 */
10 | background: linear-gradient(to right, #fbc7d4, #9796f0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
11 | }
12 | .bg-cover{
13 | background: url('https://i2.wp.com/files.123freevectors.com/wp-content/original/113998-light-blue-horizontal-striped-background-vector.jpg?w=420') no-repeat center;
14 | height: 250px;
15 | width: 100%;
16 | background-attachment: fixed;
17 | background-size: cover;
18 | }
19 | .container {
20 | display: flex;
21 | justify-content: center;
22 | position: relative;
23 | align-items: center;
24 | }
25 | .container header{
26 | display: flex;
27 | justify-content: space-around;
28 | bottom: 50px;
29 | width: 40%;
30 | position: absolute;
31 | }
32 | .switch {
33 | position: relative;
34 | display: inline-block;
35 | width: 60px;
36 | height: 34px;
37 | }
38 | .switch input {
39 | opacity: 0;
40 | width: 0;
41 | height: 0;
42 | }
43 | .slider {
44 | position: absolute;
45 | cursor: pointer;
46 | top: 0;
47 | left: 0;
48 | right: 0;
49 | bottom: 0;
50 | background-color: #ccc;
51 | -webkit-transition: .4s;
52 | transition: .4s;
53 | }
54 | .slider:before {
55 | position: absolute;
56 | content: "";
57 | height: 26px;
58 | width: 26px;
59 | left: 4px;
60 | bottom: 4px;
61 | background-color: white;
62 | -webkit-transition: .4s;
63 | transition: .4s;
64 | }
65 | input:checked + .slider {
66 | background-color: #2196F3;
67 | }
68 | input:focus + .slider {
69 | box-shadow: 0 0 1px #2196F3;
70 | }
71 | input:checked + .slider:before {
72 | -webkit-transform: translateX(26px);
73 | -ms-transform: translateX(26px);
74 | transform: translateX(26px);
75 | }
76 | .slider.round {
77 | border-radius: 34px;
78 | }
79 | .slider.round:before {
80 | border-radius: 50%;
81 | }
82 | .inputs {
83 | display: flex;
84 | position: absolute;
85 | justify-content: space-between;
86 | background: whitesmoke;
87 | height: 32px;
88 | width: 400px;
89 | opacity: 1;
90 | border-radius: 5px;
91 | }
92 | .inputs input {
93 | margin: 0px 5px;
94 | padding: 5px 15px;
95 | border: none;
96 | background: transparent;
97 | flex-basis: 95%;
98 | }
99 | input:focus {
100 | border: none;
101 | outline: none;
102 | }
103 | input::placeholder {
104 | font-size: 15px;
105 | color: black;
106 | opacity: 0.7;
107 | }
108 | .inputs i {
109 | position: relative;
110 | top: 5px;
111 | margin: 3px 10px;
112 | flex-basis: 5%;
113 | font-size: 18px;
114 | }
115 | #list_item {
116 | display: flex;
117 | justify-content: center;
118 | position: relative;
119 | top: 30px;
120 | }
121 | .links{
122 | position: absolute;
123 | display: flex;
124 | bottom: 0px;
125 | padding: 10px;
126 | justify-content: space-between;
127 | width: 100%;
128 | align-items: center;
129 | }
130 | .links a{
131 | color: blueviolet;
132 | text-decoration: none;
133 | font-weight: 600;
134 | }
135 | .extrnl {
136 | display: flex;
137 | position: relative;
138 | }
139 | .extrnl img{
140 | height: 20px;
141 | margin: 0px 5px;
142 | width: 20px;
143 | }
144 |
145 | /* dark mode */
146 |
147 | body.dark {
148 | background: #000;
149 | opacity: 1;
150 | transition: 1s ease-in;
151 | }
152 |
153 | ol#list_item button {
154 | margin-left: 15px;
155 | background: #705AB2;
156 | color: #fff;
157 | padding: 5px 10px;
158 | border: 1px solid #705AB2;
159 | border-radius: 4px;
160 | }
161 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | To-Do List
8 |
15 |
16 |
17 |
18 |
25 |
26 |
29 |
38 | 
39 | 
40 |