Market Sop

├── README.md ├── index.html ├── js ├── app.js ├── carrito.js └── products.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # marketshop 2 | 3 | This project was created to show the step by step in a list of video tutorials on how to make a store using pure javascript with local storage. 4 | 5 | Always looking for the simplest possible way to make the code so that those who are starting in programming can follow it. 6 | 7 | You can see the youtube playlist here : [on the code YouTube](https://www.youtube.com/playlist?list=PLizlJ35EN043b6tBgQCPM7qdaLdlBYwN4) 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Market Sop 9 | 10 | 11 | 12 |

13 | 17 |

18 | 19 | 20 | 26 | 27 | 28 |

29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | const shopContent = document.getElementById("shopContent"); 2 | const verCarrito = document.getElementById("verCarrito"); 3 | const modalContainer = document.getElementById("modal-container"); 4 | const showAlert = document.getElementById("showAlert"); 5 | const cantidadCarrito = document.getElementById("cantidadCarrito"); 6 | 7 | let carrito = JSON.parse(localStorage.getItem("carrito")) || []; 8 | 9 | productos.forEach((product) => { 10 | let content = document.createElement("div"); 11 | content.className = "card"; 12 | content.innerHTML = ` 13 |

14 |

${product.nombre}

15 |

${product.precio} $

16 | `; 17 | 18 | shopContent.append(content); 19 | 20 | let comprar = document.createElement("button"); 21 | comprar.innerText = "comprar"; 22 | comprar.className = "comprar"; 23 | 24 | content.append(comprar); 25 | 26 | comprar.addEventListener("click", () => { 27 | const repeat = carrito.some((repeatProduct) => repeatProduct.id === product.id); 28 | 29 | if (repeat) { 30 | carrito.map((prod) => { 31 | if (prod.id === product.id) { 32 | prod.cantidad++; 33 | } 34 | }); 35 | } else { 36 | carrito.push({ 37 | id: product.id, 38 | img: product.img, 39 | nombre: product.nombre, 40 | precio: product.precio, 41 | cantidad: product.cantidad, 42 | }); 43 | console.log(carrito); 44 | console.log(carrito.length); 45 | carritoCounter(); 46 | saveLocal(); 47 | } 48 | }); 49 | }); 50 | 51 | //set item 52 | const saveLocal = () => { 53 | localStorage.setItem("carrito", JSON.stringify(carrito)); 54 | }; 55 | 56 | //get item 57 | -------------------------------------------------------------------------------- /js/carrito.js: -------------------------------------------------------------------------------- 1 | const pintarCarrito = () => { 2 | modalContainer.innerHTML = ""; 3 | modalContainer.style.display = "flex"; 4 | const modalHeader = document.createElement("div"); 5 | modalHeader.className = "modal-header"; 6 | modalHeader.innerHTML = ` 7 | 8 | `; 9 | modalContainer.append(modalHeader); 10 | 11 | const modalbutton = document.createElement("h1"); 12 | modalbutton.innerText = "x"; 13 | modalbutton.className = "modal-header-button"; 14 | 15 | modalbutton.addEventListener("click", () => { 16 | modalContainer.style.display = "none"; 17 | }); 18 | 19 | modalHeader.append(modalbutton); 20 | 21 | carrito.forEach((product) => { 22 | let carritoContent = document.createElement("div"); 23 | carritoContent.className = "modal-content"; 24 | carritoContent.innerHTML = ` 25 |

26 |

${product.nombre}

27 |

${product.precio} $

28 | - 29 | 30 |

${product.cantidad}

31 | + 32 |

Total: ${product.cantidad * product.precio} $

33 | ❌ 34 | `; 35 | 36 | modalContainer.append(carritoContent); 37 | 38 | let restar = carritoContent.querySelector(".restar"); 39 | 40 | restar.addEventListener("click", () => { 41 | if (product.cantidad !== 1) { 42 | product.cantidad--; 43 | } 44 | saveLocal(); 45 | pintarCarrito(); 46 | }); 47 | 48 | let sumar = carritoContent.querySelector(".sumar"); 49 | sumar.addEventListener("click", () => { 50 | product.cantidad++; 51 | saveLocal(); 52 | pintarCarrito(); 53 | }); 54 | 55 | let eliminar = carritoContent.querySelector(".delete-product"); 56 | 57 | eliminar.addEventListener("click", () => { 58 | eliminarProducto(product.id); 59 | }); 60 | 61 | // let eliminar = document.createElement("span"); 62 | // eliminar.innerText = "❌"; 63 | // eliminar.classList = "delete-product"; 64 | // carritoContent.append(eliminar); 65 | 66 | // eliminar.addEventListener("click", eliminarProducto); 67 | }); 68 | 69 | const total = carrito.reduce((acc, el) => acc + el.precio * el.cantidad, 0); 70 | 71 | const totalBuying = document.createElement("div"); 72 | totalBuying.className = "total-content"; 73 | totalBuying.innerHTML = `Total a pagar: ${total} $`; 74 | modalContainer.append(totalBuying); 75 | }; 76 | 77 | verCarrito.addEventListener("click", pintarCarrito); 78 | 79 | const eliminarProducto = (id) => { 80 | const foundId = carrito.find((element) => element.id === id); 81 | 82 | console.log(foundId); 83 | 84 | carrito = carrito.filter((carritoId) => { 85 | return carritoId !== foundId; 86 | }); 87 | 88 | carritoCounter(); 89 | saveLocal(); 90 | pintarCarrito(); 91 | }; 92 | 93 | const carritoCounter = () => { 94 | cantidadCarrito.style.display = "block"; 95 | 96 | const carritoLength = carrito.length; 97 | 98 | localStorage.setItem("carritoLength", JSON.stringify(carritoLength)); 99 | 100 | cantidadCarrito.innerText = JSON.parse(localStorage.getItem("carritoLength")); 101 | }; 102 | 103 | carritoCounter(); 104 | -------------------------------------------------------------------------------- /js/products.js: -------------------------------------------------------------------------------- 1 | const productos = [ 2 | { 3 | id: 1, 4 | nombre: "Harina", 5 | precio: 50, 6 | img: 7 | "https://imgs.search.brave.com/0rADYsSqCFD-yqCFOUMxwOROnbXHQOzX6yzH2pzLuQU/rs:fit:474:225:1/g:ce/aHR0cHM6Ly90c2U0/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5B/bUJIUFJEUjNKVXRT/MVRqY0lTVnVRSGFI/YSZwaWQ9QXBp", 8 | cantidad: 1, 9 | }, 10 | { 11 | id: 2, 12 | nombre: "Galletitas", 13 | precio: 100, 14 | img: 15 | "https://imgs.search.brave.com/55gNtIZbX6WBcYtNlQj2RALgF7MGXj5-inCG7S7AQno/rs:fit:1200:1200:1/g:ce/aHR0cHM6Ly93d3cu/ZGlzdHJpYnVpZG9y/YXBvcC5jb20uYXIv/d3AtY29udGVudC91/cGxvYWRzLzIwMjAv/MDUvZ2FsbGV0aXRh/cy1jYWNoYWZhei5q/cGc", 16 | cantidad: 1, 17 | }, 18 | { 19 | id: 3, 20 | nombre: "Cerveza", 21 | precio: 150, 22 | img: 23 | "https://imgs.search.brave.com/lc3-PPZWksqJxFiD1l6eNOo9mrEMhzxuih1JKx2BDp8/rs:fit:474:225:1/g:ce/aHR0cHM6Ly90c2Uy/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5M/YXJZdUNORkFtX20w/Q09YT1JJRXFnSGFI/YSZwaWQ9QXBp", 24 | cantidad: 1, 25 | }, 26 | { 27 | id: 4, 28 | nombre: "Leche", 29 | precio: 200, 30 | img: 31 | "https://imgs.search.brave.com/PhMcsRWeRAxZ1FGNiP_W_31dJNkZz1vmgwvtjQqs-YI/rs:fit:423:225:1/g:ce/aHR0cHM6Ly90c2Ux/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC4x/Y0JHYm00cWViT3hB/NDVLZzBmTnJnQUFB/QSZwaWQ9QXBp", 32 | cantidad: 1, 33 | }, 34 | ]; 35 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0px; 3 | } 4 | /*navbar*/ 5 | .nav-container { 6 | position: sticky; 7 | z-index: 3; 8 | top: 0; 9 | } 10 | .navbar { 11 | display: flex; 12 | justify-content: space-between; 13 | height: 12vh; 14 | background-color: #1b1b1b; 15 | } 16 | 17 | .navbar-logo { 18 | justify-self: start; 19 | margin-left: 20px; 20 | color: #fff; 21 | margin-top: 4vh; 22 | cursor: pointer; 23 | } 24 | 25 | .ver-carrito { 26 | font-size: 25px; 27 | margin-right: 20px; 28 | margin-top: 3.5vh; 29 | cursor: pointer; 30 | } 31 | 32 | /*Banner styles*/ 33 | .banner { 34 | background-size: cover; 35 | background-position: center; 36 | height: 100vh; 37 | background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 38 | url("https://images.unsplash.com/photo-1553546895-531931aa1aa8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80"); 39 | } 40 | 41 | .banner-container { 42 | text-align: center; 43 | padding: 15% 0; 44 | } 45 | 46 | .banner h1 { 47 | margin: 0; 48 | color: white; 49 | text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); 50 | font-size: 62px; 51 | font-weight: bold; 52 | } 53 | 54 | .banner p { 55 | font-size: 30px; 56 | color: white; 57 | opacity: 0.7; 58 | text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); 59 | } 60 | 61 | /*product cards*/ 62 | .shop-content { 63 | display: flex; 64 | justify-content: space-around; 65 | flex-wrap: wrap; 66 | margin-top: 30px; 67 | margin-left: 60px; 68 | margin-right: 60px; 69 | } 70 | .card { 71 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 72 | max-width: 300px; 73 | margin: auto; 74 | text-align: center; 75 | font-family: arial; 76 | margin: 10px; 77 | } 78 | 79 | .card > img { 80 | width: 90%; 81 | height: 250px; 82 | } 83 | 84 | .price { 85 | color: grey; 86 | font-size: 22px; 87 | } 88 | 89 | .card button { 90 | border: none; 91 | outline: 0; 92 | padding: 12px; 93 | color: white; 94 | background-color: #000; 95 | text-align: center; 96 | cursor: pointer; 97 | width: 100%; 98 | font-size: 18px; 99 | } 100 | 101 | .card button:hover { 102 | opacity: 0.7; 103 | } 104 | 105 | /*modal content*/ 106 | .modal-container { 107 | width: 80%; 108 | margin: 0 10%; 109 | max-height: 88vh; 110 | color: #fff; 111 | background-color: #121212; 112 | display: flex; 113 | flex-direction: column; 114 | align-items: center; 115 | /*for the top*/ 116 | position: fixed; 117 | overflow: auto; 118 | z-index: 9; 119 | top: 12vh; 120 | scrollbar-color: none; 121 | } 122 | 123 | .modal-container::-webkit-scrollbar { 124 | display: none; 125 | } 126 | .modal-header { 127 | display: flex; 128 | justify-content: space-around; 129 | background-color: #0a0909; 130 | color: #fff; 131 | width: 100%; 132 | } 133 | 134 | .modal-header-title { 135 | justify-self: start; 136 | } 137 | 138 | .modal-header-button { 139 | cursor: pointer; 140 | } 141 | 142 | .modal-container > .modal-content { 143 | display: flex; 144 | flex-direction: row; 145 | justify-content: space-around; 146 | align-items: center; 147 | width: 70%; 148 | margin: 10px; 149 | } 150 | 151 | .modal-container > div > img { 152 | height: 120px; 153 | width: 120px; 154 | } 155 | 156 | .total-content { 157 | font-size: 25px; 158 | padding: 20px; 159 | text-align: center; 160 | padding-top: 20px; 161 | } 162 | 163 | /*se agregaron unas lineas de css con media querys para que se adapte mejor al responsive :)*/ 164 | 165 | @media only screen and (max-width: 750px) { 166 | .modal-container { 167 | width: 100%; 168 | margin: 0; 169 | min-height: 88vh; 170 | } 171 | 172 | .modal-container > .modal-content { 173 | justify-content: space-between; 174 | width: 100%; 175 | margin: 2px; 176 | } 177 | 178 | .modal-container > div > img { 179 | height: 80px; 180 | width: 80px; 181 | } 182 | } 183 | 184 | /*delete button product*/ 185 | .delete-product { 186 | cursor: pointer; 187 | } 188 | 189 | /*CarritoCounter*/ 190 | .cantidad-carrito { 191 | background-color: red; 192 | color: white; 193 | border-radius: 50%; 194 | font-size: 12px; 195 | padding: 4px; 196 | top: 37px; 197 | right: 14px; 198 | position: absolute; 199 | display: none; 200 | } 201 | 202 | .sumar { 203 | cursor: pointer; 204 | } 205 | 206 | .restar { 207 | cursor: pointer; 208 | } 209 | --------------------------------------------------------------------------------

SuperMarket Shop

${product.nombre}

Carrito.

${product.nombre}