├── .vscode
└── settings.json
├── index.html
├── index.js
└── style.css
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5501
3 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | APP TO DO LIST
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
Hola, Rajesh Daya
20 |
Vamos a cumplir tus metas
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
Estas son tus Tareas Pendientes
31 |
43 |
44 |
${tarea}
37 |
38 |
39 | `
40 | lista.insertAdjacentHTML("beforeend",elemento)
41 |
42 | }
43 |
44 |
45 | // funcion de Tarea Realizada
46 |
47 | function tareaRealizada(element) {
48 | element.classList.toggle(check)
49 | element.classList.toggle(uncheck)
50 | element.parentNode.querySelector('.text').classList.toggle(lineThrough)
51 | LIST[element.id].realizado = LIST[element.id].realizado ?false :true //Si
52 | // console.log(LIST)
53 | // console.log(LIST[element.id])
54 | // console.log(LIST[element.id].realizado)
55 | }
56 |
57 | function tareaEliminada(element){
58 | // console.log(element.parentNode)
59 | // console.log(element.parentNode.parentNode)
60 | element.parentNode.parentNode.removeChild(element.parentNode)
61 | LIST[element.id].eliminado = true
62 | console.log(LIST)
63 | }
64 |
65 |
66 |
67 |
68 |
69 | // crear un evento para escuchar el enter y para habilitar el boton
70 |
71 | botonEnter.addEventListener('click', ()=> {
72 | const tarea = input.value
73 | if(tarea){
74 | agregarTarea(tarea,id,false,false)
75 | LIST.push({
76 | nombre : tarea,
77 | id : id,
78 | realizado : false,
79 | eliminado : false
80 | })
81 | localStorage.setItem('TODO',JSON.stringify(LIST))
82 | id++
83 | input.value = ''
84 | }
85 |
86 | })
87 |
88 | document.addEventListener('keyup', function (event) {
89 | if (event.key=='Enter'){
90 | const tarea = input.value
91 | if(tarea) {
92 | agregarTarea(tarea,id,false,false)
93 | LIST.push({
94 | nombre : tarea,
95 | id : id,
96 | realizado : false,
97 | eliminado : false
98 | })
99 | localStorage.setItem('TODO',JSON.stringify(LIST))
100 |
101 | input.value = ''
102 | id++
103 | console.log(LIST)
104 | }
105 | }
106 |
107 | })
108 |
109 |
110 | lista.addEventListener('click',function(event){
111 | const element = event.target
112 | const elementData = element.attributes.data.value
113 | console.log(elementData)
114 |
115 | if(elementData == 'realizado') {
116 | tareaRealizada(element)
117 | }
118 | else if(elementData == 'eliminado') {
119 | tareaEliminada(element)
120 | console.log("elimnado")
121 | }
122 | localStorage.setItem('TODO',JSON.stringify(LIST))
123 | })
124 |
125 |
126 |
127 |
128 | let data = localStorage.getItem('TODO')
129 | if(data){
130 | LIST = JSON.parse(data)
131 | console.log(LIST)
132 | id = LIST.length
133 | cargarLista(LIST)
134 | }else {
135 | LIST = []
136 | id = 0
137 | }
138 |
139 |
140 | function cargarLista(array) {
141 | array.forEach(function(item){
142 | agregarTarea(item.nombre,item.id,item.realizado,item.eliminado)
143 | })
144 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* * {
2 | box-sizing: border-box;
3 | padding: 0;
4 | margin: 0;
5 | }
6 |
7 |
8 | :root {
9 | --white: #fafafb;
10 | --purple:#9a67ea;
11 | --blue-light:#04d4c3;
12 | --blue-dark:#2a73c2;
13 | --green: #2c7b90;
14 | }
15 | body {
16 | background: linear-gradient(to bottom, var(--purple) , var(--blue-light));
17 | height: 100vh;
18 | font-family: 'Prompt', sans-serif;
19 | }
20 |
21 |
22 | .container {
23 | max-width:100%;
24 | width: 400px;
25 | height: 600px;
26 | margin: 0 auto;
27 | padding: 0 30px;
28 |
29 | } */
30 |
31 |
32 | /*//Perfil ///*/
33 |
34 | /* .perfil h1 {
35 | color: var(--white) ;
36 |
37 | }
38 | .perfil span {
39 | color: var(--white);
40 | letter-spacing: 1px;
41 | }
42 |
43 | #fecha {
44 | color: var(--white);
45 | padding: 50px 15px 5px 0px;
46 | } */
47 |
48 |
49 |
50 |
51 |
52 | /*////////////AGREGAR TAREA //////////////////*/
53 | /*
54 | .agregar-tarea {
55 | background-color: var(--white) ;
56 | width: 100%;
57 | height: 70px;
58 | border-radius: 15px;
59 | padding: 10px 10px;
60 | display: flex;
61 | align-items: center;
62 | gap: 70px;
63 | margin: 40px 0;
64 |
65 | }
66 |
67 | .agregar-tarea i {
68 | font-size: 50px;
69 | color: var(--purple) ;
70 |
71 | }
72 | .agregar-tarea i:hover {
73 | transform: scale(1.1);
74 | cursor: pointer;
75 | }
76 |
77 | .agregar-tarea input {
78 | width: 100%;
79 | height: 100%;
80 | border-radius: 8px;
81 | border: none;
82 | background-color: var(--white);
83 | padding-left:10px ;
84 |
85 |
86 | }
87 |
88 | .agregar-tarea input::placeholder {
89 | font-size: 1.1rem;
90 | color: var(--purple);
91 | } */
92 |
93 | /*///seccion de tarea////*/
94 |
95 | /* .seccion-tarea h3 {
96 | margin-bottom: 20px;
97 | color: var(--white);
98 | }
99 |
100 | .seccion-tarea li {
101 | display: flex;
102 | align-items: center;
103 | justify-content: space-between;
104 | background: linear-gradient(to bottom, var(--blue-dark) , var(--green));
105 | border-radius:15px ;
106 | color: var(--white);
107 | padding: 10px;
108 | margin: 5px 0;
109 |
110 |
111 | }
112 |
113 | .seccion-tarea > ul p {
114 | font-size: 1.2rem;
115 | }
116 | .seccion-tarea i {
117 | font-size: 20px;
118 | }
119 |
120 | .seccion-tarea i:hover {
121 | color: var(--blue-light);
122 | cursor: pointer;
123 | }
124 | .line-through{
125 | text-decoration: line-through;
126 | color : var(--blue-light);
127 | } */
128 |
129 |
130 |
131 | * {
132 | box-sizing: border-box;
133 | padding: 0;
134 | margin: 0;
135 | }
136 |
137 | :root {
138 | --white: #fafafb;
139 | --purple:#9a67ea;
140 | --blue-light:#04d4c3;
141 | --blue-dark:#2a73c2;
142 | --green: #2c7b90;
143 |
144 | }
145 |
146 | body {
147 | background: linear-gradient(to bottom,var(--purple),var(--blue-light));
148 | height: 100vh;
149 | font-family: 'Prompt', sans-serif;
150 | }
151 |
152 | .container {
153 | max-width: 80%;
154 | width: 400px;
155 | height: 600px;
156 | margin: 0 auto;
157 | }
158 |
159 | /*PERFIL*/
160 |
161 |
162 |
163 | .perfil h1 {
164 | color: var(--white);
165 | }
166 |
167 | .perfil span {
168 | color: var(--white);
169 | letter-spacing: 1px;
170 | }
171 |
172 | #fecha {
173 | color: var(--white);
174 | padding: 50px 0 5px 0px;
175 |
176 | }
177 |
178 |
179 |
180 |
181 | /*AGREGAR TAREA*/
182 |
183 | .agregar-tarea {
184 | background-color: var(--white) ;
185 | border-radius: 15px;
186 | height: 70px;
187 | display: flex;
188 | align-items: center;
189 | gap: 70px;
190 | padding: 10px;
191 | margin: 40px 0;
192 | }
193 |
194 | .agregar-tarea input {
195 | width: 100%;
196 | height: 100%;
197 | border-radius: 8px;
198 | border: none;
199 | background-color: var(--white);
200 | padding-left: 10px;
201 |
202 | }
203 | .agregar-tarea input::placeholder {
204 | font-size: 1.1rem;
205 | color: var(--purple);
206 | }
207 |
208 | .agregar-tarea i{
209 | font-size: 50px;
210 | color: var(--purple);
211 |
212 | }
213 | .agregar-tarea i:hover {
214 | transform: scale(1.1);
215 | cursor: pointer;
216 | }
217 |
218 |
219 |
220 | /*SECCION DE TAREA */
221 |
222 | .seccion-tarea h3 {
223 | color: var(--white);
224 | margin-bottom: 20px;
225 | }
226 |
227 | .seccion-tarea li {
228 | display: flex;
229 | align-items: center;
230 | justify-content: space-between;
231 | background: linear-gradient(to bottom,var(--blue-dark),var(--green));
232 | border-radius: 15px;
233 | padding: 10px;
234 | color: var(--white);
235 | margin: 5px 0;
236 |
237 | }
238 | .seccion-tarea i {
239 | font-size: 25px;
240 | }
241 |
242 | .seccion-tarea > ul p {
243 | font-size: 1.2rem;
244 |
245 | }
246 |
247 |
248 | .seccion-tarea i:hover {
249 | color: var(--blue-light);
250 | cursor: pointer;
251 | }
252 |
253 | .line-through{
254 | text-decoration: line-through;
255 | color : var(--blue-light);
256 | }
257 |
258 |
259 |
260 |
261 |
262 |
--------------------------------------------------------------------------------