Skip to content

Instantly share code, notes, and snippets.

@frontsitoz

frontsitoz/index.html

Created August 19, 2022 02:55
Show Gist options
  • Save frontsitoz/3ab957485dbc42fa984f5cb906abdaef to your computer and use it in GitHub Desktop.
Save frontsitoz/3ab957485dbc42fa984f5cb906abdaef to your computer and use it in GitHub Desktop.
Download ZIP
Shopping Cart with LocalStorage
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header id="header" class="header">
<div class="container">
<div class="row">
<div class="four columns">
<h5 style='color: tomato; font-weight: bold;'> UNIVERSIDAD</h5>
</div>
<div class="two columns u-pull-right">
<ul>
<li class="submenu">
<img src="https://www.nadaincluido.com/wp-content/uploads/carritou.png" width=33 id="img-carrito">
<div id="carrito">
<table id="lista-carrito" class="u-full-width">
<thead>
<tr>
<th>Imagen</th>
<th>Nombre</th>
<th>Precio</th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
<a href="#" id="vaciar-carrito" class="button u-full-width">Vaciar Carrito</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
<div id="hero">
<div class="container">
<div class="row">
<div class="six columns">
<div class="contenido-hero">
<h2>Aprende algo nuevo</h2>
<p>Todos los cursos a $15</p>
<form action="#" id="busqueda" method="post" class="formulario">
<input class="u-full-width" type="text" placeholder="¿Que te gustaría Aprender?" id="buscador">
<input type="submit" id="submit-buscador" class="submit-buscador">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="barra">
<div class="container">
<div class="row">
<div class="four columns icono icono1">
<p>20,000 Cursos en línea <br>
Explora los temas más recientes</p>
</div>
<div class="four columns icono icono2">
<p>Instructores Expertos <br>
Aprende con distintos estilos</p>
</div>
<div class="four columns icono icono3">
<p>Acceso de por vida <br>
Aprende a tu ritmo</p>
</div>
</div>
</div>
</div>
<div id="lista-cursos" class="container">
<h1 id="encabezado" class="encabezado">Cursos En Línea</h1>
<div class="row">
<div class="four columns">
<div class="card">
<img src="https://placeimg.com/265/165/tech" class="imagen-curso u-full-width">
<div class="info-card">
<h4>HTML5, CSS3, JavaScript para Principiantes</h4>
<p>Juan Pedro</p>
<img src="https://lh3.googleusercontent.com/K4GjE8jMIuawtvUtdNuNlUmQNShAkaZ7rRiWNOdbyBfDfJ8aX5KwH9kbpHiXkyHZ8UAZ48E=s82">
<p class="precio">$200 <span class="u-pull-right ">$15</span></p>
<a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="1">Agregar
Al Carrito</a>
</div>
</div>
<!--.card-->
</div>
<div class="four columns">
<div class="card">
<img src="https://placeimg.com/265/165/people" class="imagen-curso u-full-width">
<div class="info-card">
<h4>Curso de Comida Vegetariana</h4>
<p>Juan Pedro</p>
<img src="https://lh3.googleusercontent.com/K4GjE8jMIuawtvUtdNuNlUmQNShAkaZ7rRiWNOdbyBfDfJ8aX5KwH9kbpHiXkyHZ8UAZ48E=s82">
<p class="precio">$200 <span class="u-pull-right ">$15</span></p>
<a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="2">Agregar
Al Carrito</a>
</div>
</div>
</div>
<div class="four columns">
<div class="card">
<img src="https://placeimg.com/265/165/nature" class="imagen-curso u-full-width">
<div class="info-card">
<h4>Guitarra para Principiantes</h4>
<p>Juan Pedro</p>
<img src="https://lh3.googleusercontent.com/K4GjE8jMIuawtvUtdNuNlUmQNShAkaZ7rRiWNOdbyBfDfJ8aX5KwH9kbpHiXkyHZ8UAZ48E=s82">
<p class="precio">$200 <span class="u-pull-right ">$15</span></p>
<a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="3">Agregar
Al Carrito</a>
</div>
</div>
<!--.card-->
</div>
</div>
<!--.row-->
<div class="row">
<div class="four columns">
<div class="card">
<img src="https://placeimg.com/265/165/animals" class="imagen-curso u-full-width">
<div class="info-card">
<h4>Huerto en tu casa</h4>
<p>Juan Pedro</p>
<img src="https://lh3.googleusercontent.com/K4GjE8jMIuawtvUtdNuNlUmQNShAkaZ7rRiWNOdbyBfDfJ8aX5KwH9kbpHiXkyHZ8UAZ48E=s82">
<p class="precio">$200 <span class="u-pull-right ">$15</span></p>
<a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="4">Agregar
Al Carrito</a>
</div>
</div>
<!--.card-->
</div>
<div class="four columns">
<div class="card">
<img src="https://placeimg.com/265/165/arch" class="imagen-curso u-full-width">
<div class="info-card">
<h4>Decoración con productos de tu hogar</h4>
<p>Juan Pedro</p>
<img src="https://lh3.googleusercontent.com/K4GjE8jMIuawtvUtdNuNlUmQNShAkaZ7rRiWNOdbyBfDfJ8aX5KwH9kbpHiXkyHZ8UAZ48E=s82">
<p class="precio">$200 <span class="u-pull-right ">$15</span></p>
<a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="5">Agregar
Al Carrito</a>
</div>
</div>
<!--.card-->
</div>
<div class="four columns">
<div class="card">
<img src="https://placeimg.com/265/165/grayscale" class="imagen-curso u-full-width">
<div class="info-card">
<h4>Diseño Web para Principiantes</h4>
<p>Juan Pedro</p>
<img src="https://lh3.googleusercontent.com/K4GjE8jMIuawtvUtdNuNlUmQNShAkaZ7rRiWNOdbyBfDfJ8aX5KwH9kbpHiXkyHZ8UAZ48E=s82">
<p class="precio">$200 <span class="u-pull-right ">$15</span></p>
<a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="6">Agregar
Al Carrito</a>
</div>
</div>
<!--.card-->
</div>
</div>
<!--.row-->
<div class="row">
<div class="four columns">
<div class="card">
<img src="https://placeimg.com/265/165/arch" class="imagen-curso u-full-width">
<div class="info-card">
<h4>Comida Mexicana para principiantes</h4>
<p>Juan Pedro</p>
<img src="https://lh3.googleusercontent.com/K4GjE8jMIuawtvUtdNuNlUmQNShAkaZ7rRiWNOdbyBfDfJ8aX5KwH9kbpHiXkyHZ8UAZ48E=s82">
<p class="precio">$200 <span class="u-pull-right ">$15</span></p>
<a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="7">Agregar
Al Carrito</a>
</div>
</div>
<!--.card-->
</div>
<div class="four columns">
<div class="card">
<img src="https://placeimg.com/265/165/animals" class="imagen-curso u-full-width">
<div class="info-card">
<h4>Estudio Musical en tu casa</h4>
<p>Juan Pedro</p>
<img src="https://lh3.googleusercontent.com/K4GjE8jMIuawtvUtdNuNlUmQNShAkaZ7rRiWNOdbyBfDfJ8aX5KwH9kbpHiXkyHZ8UAZ48E=s82">
<p class="precio">$200 <span class="u-pull-right ">$15</span></p>
<a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="8">Agregar
Al Carrito</a>
</div>
</div>
<!--.card-->
</div>
<div class="four columns">
<div class="card">
<img src="https://placeimg.com/265/165/nature" class="imagen-curso u-full-width">
<div class="info-card">
<h4>Cosecha tus propias frutas y verduras</h4>
<p>Juan Pedro</p>
<img src="https://lh3.googleusercontent.com/K4GjE8jMIuawtvUtdNuNlUmQNShAkaZ7rRiWNOdbyBfDfJ8aX5KwH9kbpHiXkyHZ8UAZ48E=s82">
<p class="precio">$200 <span class="u-pull-right ">$15</span></p>
<a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="9">Agregar
Al Carrito</a>
</div>
</div>
<!--.card-->
</div>
</div>
<!--.row-->
<div class="row">
<div class="four columns">
<div class="card">
<img src="https://placeimg.com/265/165/tech" class="imagen-curso u-full-width">
<div class="info-card">
<h4>Prepara galletas caseras</h4>
<p>Juan Pedro</p>
<img src="https://lh3.googleusercontent.com/K4GjE8jMIuawtvUtdNuNlUmQNShAkaZ7rRiWNOdbyBfDfJ8aX5KwH9kbpHiXkyHZ8UAZ48E=s82">
<p class="precio">$200 <span class="u-pull-right ">$15</span></p>
<a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="10">Agregar
Al Carrito</a>
</div>
</div>
<!--.card-->
</div>
<div class="four columns">
<div class="card">
<img src="https://placeimg.com/265/165/sepia" class="imagen-curso u-full-width">
<div class="info-card">
<h4>JavaScript Moderno con ES6</h4>
<p>Juan Pedro</p>
<img src="https://lh3.googleusercontent.com/K4GjE8jMIuawtvUtdNuNlUmQNShAkaZ7rRiWNOdbyBfDfJ8aX5KwH9kbpHiXkyHZ8UAZ48E=s82">
<p class="precio">$200 <span class="u-pull-right ">$15</span></p>
<a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="11">Agregar
Al Carrito</a>
</div>
</div>
<!--.card-->
</div>
<div class="four columns">
<div class="card">
<img src="https://placeimg.com/265/165/arch" class="imagen-curso u-full-width">
<div class="info-card">
<h4>100 Recetas de Comida Natural</h4>
<p>Juan Pedro</p>
<img src="https://lh3.googleusercontent.com/K4GjE8jMIuawtvUtdNuNlUmQNShAkaZ7rRiWNOdbyBfDfJ8aX5KwH9kbpHiXkyHZ8UAZ48E=s82">
<p class="precio">$200 <span class="u-pull-right ">$15</span></p>
<a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="12">Agregar
Al Carrito</a>
</div>
</div>
<!--.card-->
</div>
</div>
<!--.row-->
</div>
<footer id="footer" class="footer">
<div class="container">
<div class="row">
<div class="four columns">
<nav id="principal" class="menu">
<a class="enlace" href="#">Para tu Negocio</a>
<a class="enlace" href="#">Conviertete en Instructor</a>
<a class="enlace" href="#">Aplicaciones Móviles</a>
<a class="enlace" href="#">Soporte</a>
<a class="enlace" href="#">Temas</a>
</nav>
</div>
<div class="four columns">
<nav id="secundaria" class="menu">
<a class="enlace" href="#">¿Quienes Somos?</a>
<a class="enlace" href="#">Empleo</a>
<a class="enlace" href="#">Blog</a>
</nav>
</div>
</div>
</div>
</footer>
</body>
</html>
Raw
script.js
// Variables
const carrito = document.getElementById('carrito');
const cursos = document.getElementById('lista-cursos');
const listaCursos = document.querySelector('#lista-carrito tbody');
const vaciarCarritoBtn = document.getElementById('vaciar-carrito');
// Event Listeners
cargarEventListeners();
function cargarEventListeners() {
// Se activa cuando se presiona "Agregar Carrito"
cursos.addEventListener('click', comprarCurso);
// Cuando se elimina un curso del carrito
carrito.addEventListener('click', eliminarCurso);
// Al vaciar el carrito
vaciarCarritoBtn.addEventListener('click', vaciarCarrito);
// Al cargar el documento mostrar LS
document.addEventListener('DOMContentLoaded', leerLocalStorage);
}
// Funciones
// Funcion que añade el curso al carrito
function comprarCurso(e) {
e.preventDefault();
// Delegation para agregar-carrito
if(e.target.classList.contains('agregar-carrito') ) {
const curso = e.target.parentElement.parentElement;
// Enviamos el curso seleccionado para obtener sus datos
leerDatosCurso(curso);
}
}
// Lee los datos del curso
function leerDatosCurso(curso) {
const infoCurso = {
imagen: curso.querySelector('img').src,
titulo: curso.querySelector('h4').textContent,
precio: curso.querySelector('.precio span').textContent,
id: curso.querySelector('a').getAttribute('data-id')
};
insertarCarrito(infoCurso);
}
// Muestra el curso seleccionado en el carrito
function insertarCarrito(curso) {
const row = document.createElement('tr');
row.innerHTML = `<td>
<img src="${curso.imagen}" width=100>
</td>
<td>${curso.titulo}</td>
<td>${curso.precio}</td>
<td>
<a href="#" class="borrar-curso" data-id="${curso.id}">X</a>
</td>`;
listaCursos.appendChild(row);
guardarCursoLocalStorage(curso);
}
// Elimina el curso del carrito en el DOM
function eliminarCurso(e) {
e.preventDefault();
let curso, cursoID;
if(e.target.classList.contains('borrar-curso')) {
e.target.parentElement.parentElement.remove();
curso = e.target.parentElement.parentElement;
cursoID = curso.querySelector('a').getAttribute('data-id');
}
eliminarCursoLocalStorage(cursoID);
}
// Elimina los cursos del carrito en el DOM
function vaciarCarrito(e) {
// Forma lenta con menos codigo
// listaCursos.innerHTML = '';
// Forma rapida con mas codigo (recomendada)
while(listaCursos.firstChild) {
listaCursos.removeChild(listaCursos.firstChild);
}
// Vaciar localStorage
vaciarLocalStorage();
return false;
}
// Almacena cursos en el carrito a Local Storage
function guardarCursoLocalStorage(curso) {
let cursos;
// Toma el valor de un arreglo con datos de LS o vacio
cursos = obtenerCursosLocalStorage();
//console.log(cursos);
// el curso seleccionado se agrega al arreglo
cursos.push(curso);
localStorage.setItem('cursos', JSON.stringify(cursos) );
}
// Comprueba que haya elementos en Local Storage
function obtenerCursosLocalStorage() {
let cursosLS;
// comprobamos si hay algo en localStorage
if(localStorage.getItem('cursos') === null) {
cursosLS = [];
} else {
cursosLS = JSON.parse( localStorage.getItem('cursos') );
}
return cursosLS;
}
// Imprime los cursos de LS en el carrito
function leerLocalStorage() {
let cursosLS;
cursosLS = obtenerCursosLocalStorage();
cursosLS.forEach(function(curso) {
// Construir el template
const row = document.createElement('tr');
row.innerHTML = `<td>
<img src="${curso.imagen}" width=100>
</td>
<td>${curso.titulo}</td>
<td>${curso.precio}</td>
<td>
<a href="#" class="borrar-curso" data-id="${curso.id}">X</a>
</td>`;
listaCursos.appendChild(row);
});
}
// Eliminar el curso por el ID en localStorage
function eliminarCursoLocalStorage(curso) {
let cursosLS;
// Obtenemos el arreglo de cursos
cursosLS = obtenerCursosLocalStorage();
// Iteramos comparando el ID del curso borrado con los del LS
cursosLS.forEach(function(cursoLS, index) {
if(cursoLS.id === curso) {
cursosLS.splice(index, 1);
}
});
// Añadimos el arreglo actual a LS
localStorage.setItem('cursos', JSON.stringify(cursosLS) );
}
// Elimina todos los cursos de localStorage
function vaciarLocalStorage() {
localStorage.clear();
}
Raw
style.sass
body
background-color: #fff6f6
h1
text-align: center
h4
font-size: 16px
font-weight: 700
header
padding: 20px 0 0 0
background: white
text-align: center
@media (min-width: 750px)
header
text-align: left
.borrar-curso
background-color: red
border-radius: 50%
padding: 5px 10px
text-decoration: none
color: white
font-weight: bold
ul
list-style: none
#hero
background-image: url(https://placeimg.com/1500/551/arch)
height: 350px
#encabezado
margin: 30px 0
.submenu
position: relative
#carrito
display: none
&:hover #carrito
display: block
position: absolute
right: 0
top: 100%
z-index: 1
background-color: white
padding: 20px
min-height: 400px
min-width: 300px
.vacio
padding: 10px
background-color: crimson
text-align: center
border-radius: 10px
color: white
.contenido-hero
margin-top: 80px
color: white
form
position: relative
margin-bottom: 0
#buscador
height: 50px
margin-bottom: 0
.submit-buscador
position: absolute
right: 0
top: 0
height: 100%
padding: 0
display: block
text-indent: -9999px
width: 50px
background-image: url(https://image.flaticon.com/icons/svg/149/149852.svg)
background-position: right center
background-repeat: no-repeat
background-size: 30px
border: none
.barra
padding: 20px
background: #741d51
/* Old browsers
background: -moz-linear-gradient(left, #741d51 0%, #e44e52 100%)
/* FF3.6-15
background: -webkit-linear-gradient(left, #741d51 0%, #e44e52 100%)
/* Chrome10-25,Safari5.1-6
background: linear-gradient(to right, #741d51 0%, #e44e52 100%)
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#741d51', endColorstr='#e44e52',GradientType=1 )
/* IE6-9
p
margin: 0
color: white
.icono
background-repeat: no-repeat
background-position: left center
padding-left: 60px
background-size: 30px
margin-bottom: 40px
text-align: center
@media (min-width: 750px)
.icono
margin-bottom: 0
.icono1
background-image: url(../img/icono1.png)
.icono2
background-image: url(../img/icono2.png)
.icono3
background-image: url(../img/icono3.png)
#lista-cursos .row
margin-bottom: 20px
.agregar-carrito
margin: 10px 0
.card
text-align: center
border: 1px solid #e1e1e1
background: white
@media (min-width: 550px)
.card
text-align: left
.info-card
padding: 10px 20px
p
margin-bottom: 5px
.card h4
margin-bottom: 5px
.info-card .precio
text-decoration: line-through
font-size: 18px
margin-top: 10px
span
font-weight: 700
font-size: 22px
.footer
margin-top: 40px
border-top: 1px solid #aaa
padding-top: 40px
background: silver
.menu a
display: block
margin-bottom: 10px
text-decoration: none
color: black
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
@frontsitoz
Copy link
Author

frontsitoz commented Aug 19, 2022 •
edited
Loading

Proyecto E-commerce

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment