Revisión de La Página Web Encabezado de La Página Web

UNIVERSIDAD TÉCNICA DE COTOPAXI
DIRECCIÓN DE VINCULACIÓN CON LA SOCIEDAD

INFORME DE CIERRE DE VINCULACIÓN CON LA
SOCIEDAD
Formato: ET02
Revisión de la página web
Encabezado de la página web
Despliegue de la página web

SOCIEDAD
Formato: ET02
Demostración del carrito de compras

SOCIEDAD
Formato: ET02
SOCIEDAD
Formato: ET02
Código utilizado en el índex
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.2.1/css/all.min.css" integrity="sha512-
MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+
iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="estilo.css">
<script src="app.js" async></script>
<title>Tienda de Tecnologia | </title>
</head>
<body>
<header>
<h1>Tienda de Tecnologia</h1>
</header>
<section class="contenedor">

<div class="contenedor-items">
<div class="item">
<span class="titulo-item">Box Engasse</span>
<img src="img/boxengasse.png" alt="" class="img-item">
<span class="precio-item">$5.100</span>
<button class="boton-item">Agregar al Carrito</button>
</div>
<div class="item">
<span class="titulo-item">English Horse</span>
<img src="img/englishrose.png" alt="" class="img-item">
</div>
<div class="item">
<span class="titulo-item">Knock Nap</span>
<img src="img/knocknap.png" alt="" class="img-item">
SOCIEDAD
Formato: ET02

</div>
<div class="item">
<span class="titulo-item">La Night</span>
<img src="img/lanight.png" alt="" class="img-item">
</div>
<div class="item">
<span class="titulo-item">Asus</span>
<img src="img/imagen5.webp" alt="" class="img-item">
</div>
<div class="item">
<span class="titulo-item">Dell</span>
</div>
<div class="item">
<span class="titulo-item">SmartWatch</span>
</div>
<div class="item">
<span class="titulo-item">Razer</span>
</div>
<div class="item">
<span class="titulo-item">MSI</span>
</div>
</div>

<div class="carrito" id="carrito">
<div class="header-carrito">
<h2>Tu Carrito</h2>
</div>
SOCIEDAD
Formato: ET02
<div class="carrito-items">
</div>
<div class="carrito-total">
<div class="fila">
<strong>Tu Total</strong>
<span class="carrito-precio-total">
$120.000,00
</span>
</div>
<button class="btn-pagar">Pagar <i class="fa-solid fa-
bag-shopping"></i> </button>
</div>
</div>
</section>
</body>
</html>
Código utilizado en el style
@import
url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;
600&family=Titillium+Web:wght@200;300;400;600;700&display=swap');
*{
margin: 0;
padding:0;
font-family: 'Open Sans';
}
header{
background: url(img/header.jpg);
background-size: cover;
background-position:center;
height: 300px;
}
header h1{
text-align: center;
font-size: 35px;
color: #fff;
padding: 30px 0;
}
.contenedor{
max-width: 1200px;
padding: 10px;
SOCIEDAD
Formato: ET02
margin: auto;
display: flex;
justify-content: space-between;
contain: paint;
}
.contenedor .contenedor-items{
margin-top: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
grid-gap:30px;
grid-row-gap: 30px;
width: 100%;
transition: .3s;
}
.contenedor .contenedor-items .item{
max-width: 200px;
margin: auto;
border: 1px solid #666;
border-radius: 10px;
padding: 20px;
transition: .3s;
}
.contenedor .contenedor-items .item .img-item{
width: 100%;
}
.contenedor .contenedor-items .item:hover{
box-shadow: 0 0 10px #666;
scale: 1.05;
}
.contenedor .contenedor-items .item .titulo-item{
display: block;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
.contenedor .contenedor-items .item .precio-item{
display: block;
text-align: center;
font-weight: bold;
font-size: 22px;
}
.contenedor .contenedor-items .item .boton-item{

display: block;
SOCIEDAD
Formato: ET02
margin: 10px auto;

border: none;
background-color: black;
color: #fff;
padding: 5px 15px;
border-radius: 5px;
cursor: pointer;
}
/* seccion carrito */
.carrito{
width: 35%;
margin-top: 30px;
border-radius: 10px;
overflow: hidden;
margin-bottom: auto;
position: sticky !important;
top: 0;
transition: .3s;
margin-right: -100%;
opacity: 0;
}
.carrito .header-carrito{
background-color: #000;
color: #fff;
text-align: center;
padding: 30px 0;
}
.carrito .carrito-item{
display: flex;
align-items: center;
position: relative;
border-bottom: 1px solid #666;
padding: 20px;
}
.carrito .carrito-item img{
margin-right: 20px;
}
.carrito .carrito-item .carrito-item-titulo{
display: block;
font-weight: bold;
margin-bottom: 10px;
text-transform: uppercase;
}
SOCIEDAD
Formato: ET02
.carrito .carrito-item .selector-cantidad{

display: inline-block;
margin-right: 25px;
}
.carrito .carrito-item .carrito-item-cantidad{
border: none;
font-size: 18px;
background-color: transparent;
width:30px;
padding: 5px;
text-align: center;
}
.carrito .carrito-item .selector-cantidad i{
font-size: 18px;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
.carrito .carrito-item .carrito-item-precio{
font-weight: bold;
font-size: 18px;
margin-bottom: 5px;
}
.carrito .carrito-item .btn-eliminar{
position: absolute;
right: 15px;
top: 15px;
color: #000;
font-size: 20px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
cursor: pointer;
display: block;
background: transparent;
SOCIEDAD
Formato: ET02
z-index: 20;
}
.carrito .carrito-item .btn-eliminar i{
pointer-events: none;
}
.carrito-total{
background-color: #f3f3f3;
padding: 30px;
}
.carrito-total .fila{
display: flex;
font-size: 22px;
font-weight: bold;
margin-bottom: 10px;
}
.carrito-total .btn-pagar{
display: block;
width: 100%;
border: none;
background: #000;
color: #fff;
border-radius: 5px;
font-size: 18px;
padding: 20px;
display: flex;
cursor: pointer;
transition: .3s;
}
.carrito-total .btn-pagar:hover{
scale: 1.05;
}
/* SECCION RESPONSIVE */
@media screen and (max-width: 850px) {
.contenedor {
display: block;
}
.contenedor-items{
width: 100% !important;
SOCIEDAD
Formato: ET02
}
.carrito{
width: 100%;
}
}
Codigo utilizado en JS
var carritoVisible = false;
if(document.readyState == 'loading'){
document.addEventListener('DOMContentLoaded', ready)
}else{
ready();
}
function ready(){
var botonesEliminarItem = document.getElementsByClassName('btn-

eliminar');
for(var i=0;i<botonesEliminarItem.length; i++){
var button = botonesEliminarItem[i];
button.addEventListener('click',eliminarItemCarrito);
}
var botonesSumarCantidad = document.getElementsByClassName('sumar-

cantidad');
for(var i=0;i<botonesSumarCantidad.length; i++){
var button = botonesSumarCantidad[i];
button.addEventListener('click',sumarCantidad);
}
var botonesRestarCantidad =
document.getElementsByClassName('restar-cantidad');
for(var i=0;i<botonesRestarCantidad.length; i++){
var button = botonesRestarCantidad[i];
button.addEventListener('click',restarCantidad);
}
var botonesAgregarAlCarrito = document.getElementsByClassName('boton-

item');
for(var i=0; i<botonesAgregarAlCarrito.length;i++){
var button = botonesAgregarAlCarrito[i];
SOCIEDAD
Formato: ET02
button.addEventListener('click', agregarAlCarritoClicked);
}
document.getElementsByClassName('btn-
pagar')[0].addEventListener('click',pagarClicked)
}
function pagarClicked(){
alert("Gracias por la compra");
var carritoItems = document.getElementsByClassName('carrito-

items')[0];
while (carritoItems.hasChildNodes()){
carritoItems.removeChild(carritoItems.firstChild)
}
actualizarTotalCarrito();
ocultarCarrito();
}
function agregarAlCarritoClicked(event){
var button = event.target;
var item = button.parentElement;
var titulo = item.getElementsByClassName('titulo-item')[0].innerText;
var precio = item.getElementsByClassName('precio-item')[0].innerText;
var imagenSrc = item.getElementsByClassName('img-item')[0].src;
console.log(imagenSrc);
agregarItemAlCarrito(titulo, precio, imagenSrc);
hacerVisibleCarrito();
}
//Funcion que hace visible el carrito

function hacerVisibleCarrito(){
carritoVisible = true;
var carrito = document.getElementsByClassName('carrito')[0];
carrito.style.marginRight = '0';
carrito.style.opacity = '1';
var items =document.getElementsByClassName('contenedor-items')[0];

items.style.width = '60%';
}
function agregarItemAlCarrito(titulo, precio, imagenSrc){

var item = document.createElement('div');
SOCIEDAD
Formato: ET02
item.classList.add = ('item');
var itemsCarrito = document.getElementsByClassName('carrito-
items')[0];
var nombresItemsCarrito =
itemsCarrito.getElementsByClassName('carrito-item-titulo');
for(var i=0;i < nombresItemsCarrito.length;i++){
if(nombresItemsCarrito[i].innerText==titulo){
alert("El item ya se encuentra en el carrito");
return;
}
}
var itemCarritoContenido = `
<div class="carrito-item">
<img src="${imagenSrc}" width="80px" alt="">
<div class="carrito-item-detalles">
<span class="carrito-item-titulo">${titulo}</span>
<div class="selector-cantidad">
<i class="fa-solid fa-minus restar-cantidad"></i>
<input type="text" value="1" class="carrito-item-
cantidad" disabled>
<i class="fa-solid fa-plus sumar-cantidad"></i>
</div>
<span class="carrito-item-precio">${precio}</span>
</div>
<button class="btn-eliminar">
<i class="fa-solid fa-trash"></i>
</button>
</div>
`
item.innerHTML = itemCarritoContenido;
itemsCarrito.append(item);
item.getElementsByClassName('btn-
eliminar')[0].addEventListener('click', eliminarItemCarrito);
var botonRestarCantidad = item.getElementsByClassName('restar-
cantidad')[0];
botonRestarCantidad.addEventListener('click',restarCantidad);
var botonSumarCantidad = item.getElementsByClassName('sumar-

cantidad')[0];
botonSumarCantidad.addEventListener('click',sumarCantidad);
SOCIEDAD
Formato: ET02
}
function sumarCantidad(event){
var buttonClicked = event.target;
var selector = buttonClicked.parentElement;
console.log(selector.getElementsByClassName('carrito-item-
cantidad')[0].value);
var cantidadActual = selector.getElementsByClassName('carrito-item-
cantidad')[0].value;
cantidadActual++;
selector.getElementsByClassName('carrito-item-cantidad')[0].value =
cantidadActual;
}
function restarCantidad(event){
var selector = buttonClicked.parentElement;
console.log(selector.getElementsByClassName('carrito-item-
cantidad')[0].value);
var cantidadActual = selector.getElementsByClassName('carrito-item-
cantidad')[0].value;
cantidadActual--;
if(cantidadActual>=1){
selector.getElementsByClassName('carrito-item-cantidad')[0].value
= cantidadActual;
}
}
function eliminarItemCarrito(event){
buttonClicked.parentElement.parentElement.remove();
ocultarCarrito();
}
function ocultarCarrito(){
var carritoItems = document.getElementsByClassName('carrito-
items')[0];
if(carritoItems.childElementCount==0){
var carrito = document.getElementsByClassName('carrito')[0];
SOCIEDAD
Formato: ET02
carrito.style.marginRight = '-100%';
carrito.style.opacity = '0';
carritoVisible = false;
var items =document.getElementsByClassName('contenedor-

items')[0];
items.style.width = '100%';
}
}
function actualizarTotalCarrito(){
var carritoContenedor =
document.getElementsByClassName('carrito')[0];
var carritoItems = carritoContenedor.getElementsByClassName('carrito-
item');
var total = 0;
for(var i=0; i< carritoItems.length;i++){
var item = carritoItems[i];
var precioElemento = item.getElementsByClassName('carrito-item-
precio')[0];
var precio =
parseFloat(precioElemento.innerText.replace('$','').replace('.',''));
var cantidadItem = item.getElementsByClassName('carrito-item-
cantidad')[0];
console.log(precio);
var cantidad = cantidadItem.value;
total = total + (precio * cantidad);
}
total = Math.round(total * 100)/100;
document.getElementsByClassName('carrito-precio-total')[0].innerText
= '$'+total.toLocaleString("es") + ",00";
}
SOCIEDAD
Formato: ET02

Revisión de La Página Web Encabezado de La Página Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Revisión de La Página Web Encabezado de La Página Web

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD TÉCNICA DE COTOPAXI

DIRECCIÓN DE VINCULACIÓN CON LA SOCIEDAD

Revisión de la página web

Encabezado de la página web

Despliegue de la página web

Demostración del carrito de compras

Código utilizado en el índex

<button class="boton-item">Agregar al Carrito</button>

Código utilizado en el style

.contenedor .contenedor-items .item .boton-item{

margin: 10px auto;

.carrito .carrito-item .selector-cantidad{

var carritoVisible = false;

var botonesEliminarItem = document.getElementsByClassName('btn-

var botonesSumarCantidad = document.getElementsByClassName('sumar-

var botonesAgregarAlCarrito = document.getElementsByClassName('boton-

var carritoItems = document.getElementsByClassName('carrito-

agregarItemAlCarrito(titulo, precio, imagenSrc);

//Funcion que hace visible el carrito

var items =document.getElementsByClassName('contenedor-items')[0];

function agregarItemAlCarrito(titulo, precio, imagenSrc){

var botonSumarCantidad = item.getElementsByClassName('sumar-

var items =document.getElementsByClassName('contenedor-

También podría gustarte