Skip to content

Commit e676c84

Browse files
IvanPerez9IvanPerez9
committed
Init groceryList
1 parent ef91a10 commit e676c84

File tree

6 files changed

+205
-0
lines changed

6 files changed

+205
-0
lines changed

‎GroceryList.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width"/>
7+
<title>Grocery List</title>
8+
<link rel="stylesheet" href="assets/css/grocery.css">
9+
</head>
10+
<body>
11+
12+
<div class="container">
13+
<div class="grocery-list">
14+
<h2> Mi lista de la compra <img src="assets/images/icon.png" alt="" ></h2>
15+
<div class="row">
16+
<input type="text" id="input-box" placeholder="Añadir producto">
17+
<button onclick="addTask()">+</button>
18+
</div>
19+
<ul id="list-container"">
20+
<li class="checked">Ejemplo</li>
21+
</ul>
22+
</div>
23+
</div>
24+
25+
<script src="assets/js/grocery.js"></script>
26+
</body>
27+
</html>

‎assets/css/grocery.css

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Poppins', sans-serif;
5+
box-sizing: border-box;
6+
}
7+
8+
.container{
9+
width: 100%;
10+
min-height: 100vh;
11+
background: linear-gradient(135deg, #153677, #4e085f);
12+
padding: 10px;
13+
}
14+
15+
.grocery-list{
16+
width: 100%;
17+
max-width: 540px;
18+
background: #fff;
19+
margin: 80px auto 20px;
20+
padding: 40px 30px 70px;
21+
border-radius: 10px;
22+
}
23+
24+
.grocery-list h2{
25+
color: #002765;
26+
display: flex;
27+
align-items: center;
28+
margin-bottom: 20px;
29+
}
30+
31+
.grocery-list h2 img{
32+
width: 30px;
33+
margin-left: 10px;
34+
}
35+
36+
.row{
37+
display: flex;
38+
align-items: center;
39+
justify-content: space-between;
40+
background: #edeef0;
41+
border-radius: 30px;
42+
padding-left: 20px;
43+
margin-bottom: 20px;
44+
}
45+
46+
input{
47+
flex: 1;
48+
border: none;
49+
outline: none;
50+
background: transparent;
51+
padding: 8px;
52+
font-weight: 14px;
53+
}
54+
55+
button{
56+
border: none;
57+
outline: none;
58+
padding: 16px 30px;
59+
/*background: #ff5954;*/
60+
background: #f0575f;
61+
color: #fff;
62+
font-size: 17px;
63+
font-weight: bolder;
64+
cursor: pointer;
65+
border-radius: 40px;
66+
}
67+
68+
ul li {
69+
list-style: none;
70+
font-size: 16px;
71+
padding: 12px 8px 12px 40px;
72+
user-select: none;
73+
cursor: pointer;
74+
position: relative;
75+
}
76+
77+
ul li::before{
78+
content: '';
79+
position: absolute;
80+
height: 22px;
81+
width: 22px;
82+
border-radius: 50%;
83+
background-image: url(../images/unchecked.png);
84+
background-size: cover;
85+
background-position: ccenter;
86+
top:12px;
87+
left: 8px;
88+
}
89+
90+
/*Tacha cuando checked*/
91+
ul li.checked{
92+
color: #555;
93+
text-decoration: line-through;
94+
}
95+
96+
/*Rellena el circulo con una imagen si checked*/
97+
ul li.checked::before{
98+
background-image: url(../images/checked.png);;
99+
}
100+
101+
ul li span{
102+
position: absolute;
103+
right: 0;
104+
top: 5px;
105+
width: 40px;
106+
height: 40px;
107+
font-size: 22px;
108+
color: #555;
109+
line-height: 40px;
110+
text-align: center;
111+
border-radius: 50%;
112+
}
113+
114+
ul li span:hover{
115+
background: #edeef0;
116+
}

‎assets/images/checked.png

2.34 KB
Loading

‎assets/images/icon.png

4.26 KB
Loading

‎assets/images/unchecked.png

2.13 KB
Loading

‎assets/js/grocery.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
const inputBox = document.getElementById("input-box")
2+
const listContainer = document.getElementById("list-container")
3+
4+
/*
5+
Funcion que controla el añadido a la lista
6+
*/
7+
function addTask(){
8+
// Si no he escrito nada, no hacer nada
9+
if(inputBox.value === ''){
10+
11+
} else {
12+
// Crea el elemento de la lista
13+
let li = document.createElement("li");
14+
li.innerHTML = inputBox.value;
15+
listContainer.appendChild(li);
16+
// Le añade una cruz para el borrado
17+
let span = document.createElement("span");
18+
span.innerHTML = "\u00d7";
19+
li.appendChild(span)
20+
}
21+
22+
// Limpiar la entrada despues de añadir
23+
inputBox.value = "";
24+
// Almacena lo añadido
25+
saveData();
26+
}
27+
28+
/*
29+
Funciona para escuchar distintos click en la app
30+
*/
31+
listContainer.addEventListener("click", function(e){
32+
// Mira si hacemos click en un LI
33+
// Cambiamos o quitamos el checked
34+
if(e.target.tagName === "LI"){
35+
e.target.classList.toggle("checked");
36+
saveData();
37+
// Si hacemos click en un SPAN
38+
// Borra el elemento
39+
} else if (e.target.tagName === "SPAN"){
40+
e.target.parentElement.remove();
41+
saveData();
42+
}
43+
44+
} , false);
45+
46+
/*
47+
Funciona para almacenar lo escrito en sesiones
48+
Lo guardamos en local como "data"
49+
*/
50+
function saveData(){
51+
localStorage.setItem("data", listContainer.innerHTML);
52+
}
53+
54+
/*
55+
Funcion para ver siempre "data" cuando recargemos la web
56+
*/
57+
function showDataList(){
58+
listContainer.innerHTML = localStorage.getItem("data");
59+
}
60+
61+
// Llamada para recuperar siempre los datos
62+
showDataList();

0 commit comments

Comments
 (0)