mikel/LaForjaWebOne
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
mikel
2024-02-03 14:57:57 +01:00
parent 5c6e39f778
commit e14abc3e73
3 changed files with 335 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

531
JS/index.js
View File

@@ -5,7 +5,6 @@
(adición, eliminación o modificación de productos, eventos...) */
let cestaCompra = [];
const infoProductos = [
{
@@ -195,87 +194,97 @@ const cargado = () => {
let cestaCompra = [];
function guardarEnCarrito() {
let prodAñadido = this.event.target.getAttribute("marcador");
let controlCesta = cestaCompra.includes(prodAñadido);
leerCesta();
if ( cestaCompra.length == 0 || !controlCesta) {
cestaCompra.push(prodAñadido);
try {
localStorage.setItem('numProd', JSON.stringify(cestaCompra));
renderizarCesta();
} catch (e) {
return "Error al guardar el item en el localStorage: " + e.message;
}
}
function leerCesta() {
var lecturaCesta = JSON.parse(localStorage.getItem('numProd'));
if (lecturaCesta === null) {
cestaCompra = [];
} else {
cestaCompra = lecturaCesta;
}
}
function borrarArticulo() {
let prodABorrar = this.event.target.getAttribute("marcador");
let indice = cestaCompra.indexOf(prodABorrar);
cestaCompra.splice(indice, 1);
try {
localStorage.setItem('numProd', JSON.stringify(cestaCompra));
renderizarCesta();
function renderizarCesta(){
} catch (e) {
return "Error al guardar el item en el localStorage: " + e.message;
}
}
function renderizarCesta(){
leerCesta()
let elCarrito = document.getElementById("carrito");
let elPrecioTotal = document.getElementById("total");
elCarrito.textContent = "";
elPrecio = 0;
for (i = 0; i < cestaCompra.length; i++) {
let numeroControl = cestaCompra[i];
let articuloCarrito = document.createElement("li");
elCarrito.appendChild(articuloCarrito);
articuloCarrito.setAttribute("class", "articulo-carrito");
leerCesta()
let elCarrito = document.getElementById("carrito");
let elPrecioTotal = document.getElementById("total");
elCarrito.textContent = "";
elPrecio = 0;
for (i = 0; i < cestaCompra.length; i++) {
let numeroControl = cestaCompra[i];
let articuloCarrito = document.createElement("li");
elCarrito.appendChild(articuloCarrito);
articuloCarrito.setAttribute("class", "articulo-carrito");
let contenedorArticuloCarrito = document.createElement("figure");
articuloCarrito.appendChild(contenedorArticuloCarrito);
contenedorArticuloCarrito.setAttribute("class", "img-carrito");
let contenedorArticuloCarrito = document.createElement("figure");
articuloCarrito.appendChild(contenedorArticuloCarrito);
contenedorArticuloCarrito.setAttribute("class", "img-carrito");
let imagenArticuloCarrito = document.createElement("img");
contenedorArticuloCarrito.appendChild(imagenArticuloCarrito);
imagenArticuloCarrito.setAttribute("src", infoProductos[numeroControl].img1);
imagenArticuloCarrito.setAttribute("alt", "imagen");
let imagenArticuloCarrito = document.createElement("img");
contenedorArticuloCarrito.appendChild(imagenArticuloCarrito);
imagenArticuloCarrito.setAttribute("src", infoProductos[numeroControl].img1);
imagenArticuloCarrito.setAttribute("alt", "imagen");
let textoArticulocarrito = document.createElement("p");
articuloCarrito.appendChild(textoArticulocarrito);
textoArticulocarrito.innerText = infoProductos[numeroControl].titulo;
let textoArticulocarrito = document.createElement("p");
articuloCarrito.appendChild(textoArticulocarrito);
textoArticulocarrito.innerText = infoProductos[numeroControl].titulo;
let infoArticulo = document.createElement("div");
articuloCarrito.appendChild(infoArticulo);
infoArticulo.setAttribute("class", "infoArticulo")
let infoArticulo = document.createElement("div");
articuloCarrito.appendChild(infoArticulo);
infoArticulo.setAttribute("class", "infoArticulo")
let precioArticuloCarrito = document.createElement("p");
infoArticulo.appendChild(precioArticuloCarrito);
precioArticuloCarrito.innerText = infoProductos[numeroControl].precio + " €";
elPrecio = elPrecio + infoProductos[numeroControl].precio
let precioArticuloCarrito = document.createElement("p");
infoArticulo.appendChild(precioArticuloCarrito);
precioArticuloCarrito.innerText = infoProductos[numeroControl].precio + " €";
elPrecio = elPrecio + infoProductos[numeroControl].precio
let botonBorrarArticulo = document.createElement("button");
infoArticulo.appendChild(botonBorrarArticulo);
botonBorrarArticulo.innerText = "Eliminar";
botonBorrarArticulo.setAttribute("type", "button");
botonBorrarArticulo.setAttribute("onclick", "borrarArticulo()");
botonBorrarArticulo.setAttribute("marcador", infoProductos[numeroControl].numeroproducto);
let botonBorrarArticulo = document.createElement("button");
infoArticulo.appendChild(botonBorrarArticulo);
botonBorrarArticulo.innerText = "Eliminar";
botonBorrarArticulo.setAttribute("type", "button");
botonBorrarArticulo.setAttribute("onclick", "borrarArticulo()");
botonBorrarArticulo.setAttribute("marcador", infoProductos[numeroControl].numeroproducto);
}
elPrecioTotal.textContent = elPrecio
}
elPrecioTotal.textContent = elPrecio
function guardarEnCarrito() {
let prodAñadido = this.event.target.getAttribute("marcador");
let controlCesta = cestaCompra.includes(prodAñadido);
leerCesta();
if ( cestaCompra.length == 0 || !controlCesta) {
cestaCompra.push(prodAñadido);
try {
localStorage.setItem('numProd', JSON.stringify(cestaCompra));
renderizarCesta();
} catch (e) {
return "Error al guardar el item en el localStorage: " + e.message;
}
}
}
function borrarArticulo() {
let prodABorrar = this.event.target.getAttribute("marcador");
let indice = cestaCompra.indexOf(prodABorrar);
cestaCompra.splice(indice, 1);
try {
localStorage.setItem('numProd', JSON.stringify(cestaCompra));
renderizarCesta();
} catch (e) {
return "Error al guardar el item en el localStorage: " + e.message;
}
}
function eliminarCesta() {
localStorage.removeItem("numProd");
@@ -286,22 +295,10 @@ const cargado = () => {
elPrecioTotal.textContent = 0;
}
function leerCesta() {
var lecturaCesta = JSON.parse(localStorage.getItem('numProd'));
if (lecturaCesta === null) {
cestaCompra = [];
} else {
cestaCompra = lecturaCesta;
}
}
function tramitarPedido(){
function tramitarPedido(){
window.location.href = "./Contactos.html";
@@ -309,119 +306,114 @@ const cargado = () => {
const genListaProd = () => {
let contenedorProd = document.getElementById("contenedorProductos2");
const genListaProd = () => {
for (let i = 0; i < infoProductos.length; i++){
let contenedorProd = document.getElementById("contenedorProductos2");
for (let i = 0; i < infoProductos.length; i++){
let itemListaProd = document.createElement("li");
contenedorProd.appendChild(itemListaProd);
itemListaProd.setAttribute("class", "item-lista-productos");
let tituloProd = document.createElement("h3");
itemListaProd.appendChild(tituloProd);
var textotitulo = document.createTextNode(infoProductos[i].titulo)
tituloProd.appendChild(textotitulo);
let contenedorCarrousel = document.createElement("div");
itemListaProd.appendChild(contenedorCarrousel);
contenedorCarrousel.setAttribute("class", "container-carousel")
let carruselesProd = document.createElement("div");
contenedorCarrousel.appendChild(carruselesProd);
carruselesProd.setAttribute("class", "carruseles-prod");
let itemListaProd = document.createElement("li");
contenedorProd.appendChild(itemListaProd);
itemListaProd.setAttribute("class", "item-lista-productos");
let fotoUnoProd = document.createElement("figure");
carruselesProd.appendChild(fotoUnoProd);
fotoUnoProd.setAttribute("class", "slider-section-prod")
let tituloProd = document.createElement("h3");
itemListaProd.appendChild(tituloProd);
var textotitulo = document.createTextNode(infoProductos[i].titulo)
tituloProd.appendChild(textotitulo);
let imgUno = document.createElement("img");
fotoUnoProd.appendChild(imgUno);
imgUno.setAttribute("src", infoProductos[i].img1)
imgUno.setAttribute("alt", infoProductos[i].alt)
let contenedorCarrousel = document.createElement("div");
itemListaProd.appendChild(contenedorCarrousel);
contenedorCarrousel.setAttribute("class", "container-carousel")
let fotoDosProd = document.createElement("figure");
carruselesProd.appendChild(fotoDosProd);
fotoDosProd.setAttribute("class", "slider-section-prod")
let imgDos = document.createElement("img");
fotoDosProd.appendChild(imgDos);
imgDos.setAttribute("src", infoProductos[i].img2)
imgDos.setAttribute("alt", infoProductos[i].alt)
let fotoTresProd = document.createElement("figure");
carruselesProd.appendChild(fotoTresProd);
fotoTresProd.setAttribute("class", "slider-section-prod")
let imgTres = document.createElement("img");
fotoTresProd.appendChild(imgTres);
imgTres.setAttribute("src", infoProductos[i].img3)
imgTres.setAttribute("alt", infoProductos[i].alt)
let btnIzq = document.createElement("button");
contenedorCarrousel.appendChild(btnIzq);
btnIzq.setAttribute("type", "button");
btnIzq.setAttribute("class", "btn-left");
btnIzq.setAttribute("onclick", "moveToLeft()");
btnIzq.innerText = " < "
let btnDcha = document.createElement("button");
contenedorCarrousel.appendChild(btnDcha);
btnDcha.setAttribute("type", "button");
btnDcha.setAttribute("class", "btn-right");
btnDcha.setAttribute("onclick", "moveToRight()");
btnDcha.innerText = " > "
let listaInfoProd = document.createElement("ul");
itemListaProd.appendChild(listaInfoProd);
listaInfoProd.setAttribute("class", "info-producto")
let descProd = document.createElement("li");
listaInfoProd.appendChild(descProd);
descProd.setAttribute("class", "descripcion-producto");
let textoProd = document.createElement("p");
descProd.appendChild(textoProd);
textoProd.setAttribute("class", "texto-descrip-prod")
textoProd.innerText = infoProductos[i].textodescrip
let carruselesProd = document.createElement("div");
contenedorCarrousel.appendChild(carruselesProd);
carruselesProd.setAttribute("class", "carruseles-prod");
let fotoUnoProd = document.createElement("figure");
carruselesProd.appendChild(fotoUnoProd);
fotoUnoProd.setAttribute("class", "slider-section-prod")
let dispoProd = document.createElement("p");
descProd.appendChild(dispoProd);
dispoProd.setAttribute("class", "productos-disponibles")
dispoProd.innerText = "Disponibles: " + infoProductos[i].disponibles
let precioProd = document.createElement("li");
listaInfoProd.appendChild(precioProd);
precioProd.setAttribute("class", "precio-producto");
precioProd.innerText = infoProductos[i].precio.toFixed(2) + "€";
let liBotonAñadir = document.createElement("li");
listaInfoProd.appendChild(liBotonAñadir);
liBotonAñadir.setAttribute("class", "contenedor-boton-añadir");
let imgUno = document.createElement("img");
fotoUnoProd.appendChild(imgUno);
imgUno.setAttribute("src", infoProductos[i].img1)
imgUno.setAttribute("alt", infoProductos[i].alt)
let fotoDosProd = document.createElement("figure");
carruselesProd.appendChild(fotoDosProd);
fotoDosProd.setAttribute("class", "slider-section-prod")
let imgDos = document.createElement("img");
fotoDosProd.appendChild(imgDos);
imgDos.setAttribute("src", infoProductos[i].img2)
imgDos.setAttribute("alt", infoProductos[i].alt)
let fotoTresProd = document.createElement("figure");
carruselesProd.appendChild(fotoTresProd);
fotoTresProd.setAttribute("class", "slider-section-prod")
let imgTres = document.createElement("img");
fotoTresProd.appendChild(imgTres);
imgTres.setAttribute("src", infoProductos[i].img3)
imgTres.setAttribute("alt", infoProductos[i].alt)
let btnIzq = document.createElement("button");
contenedorCarrousel.appendChild(btnIzq);
btnIzq.setAttribute("type", "button");
btnIzq.setAttribute("class", "btn-left");
btnIzq.setAttribute("onclick", "moveToLeft()");
btnIzq.innerText = " < "
let btnDcha = document.createElement("button");
contenedorCarrousel.appendChild(btnDcha);
btnDcha.setAttribute("type", "button");
btnDcha.setAttribute("class", "btn-right");
btnDcha.setAttribute("onclick", "moveToRight()");
btnDcha.innerText = " > "
let listaInfoProd = document.createElement("ul");
itemListaProd.appendChild(listaInfoProd);
listaInfoProd.setAttribute("class", "info-producto")
let descProd = document.createElement("li");
listaInfoProd.appendChild(descProd);
descProd.setAttribute("class", "descripcion-producto");
let textoProd = document.createElement("p");
descProd.appendChild(textoProd);
textoProd.setAttribute("class", "texto-descrip-prod")
textoProd.innerText = infoProductos[i].textodescrip
let dispoProd = document.createElement("p");
descProd.appendChild(dispoProd);
dispoProd.setAttribute("class", "productos-disponibles")
dispoProd.innerText = "Disponibles: " + infoProductos[i].disponibles
let precioProd = document.createElement("li");
listaInfoProd.appendChild(precioProd);
precioProd.setAttribute("class", "precio-producto");
precioProd.innerText = infoProductos[i].precio.toFixed(2) + "€";
let liBotonAñadir = document.createElement("li");
listaInfoProd.appendChild(liBotonAñadir);
liBotonAñadir.setAttribute("class", "contenedor-boton-añadir");
let botonAñadir = document.createElement("button");
liBotonAñadir.appendChild(botonAñadir);
botonAñadir.setAttribute("type", "button");
botonAñadir.setAttribute("class", "añadirProd");
botonAñadir.setAttribute("marcador", infoProductos[i].numeroproducto);
botonAñadir.setAttribute("onclick", "guardarEnCarrito()");
botonAñadir.innerText = "Añadir a Cesta";
let botonAñadir = document.createElement("button");
liBotonAñadir.appendChild(botonAñadir);
botonAñadir.setAttribute("type", "button");
botonAñadir.setAttribute("class", "añadirProd");
botonAñadir.setAttribute("marcador", infoProductos[i].numeroproducto);
botonAñadir.setAttribute("onclick", "guardarEnCarrito()");
botonAñadir.innerText = "Añadir a Cesta";
}
}
}
}
/** más adelante se creará un botón para añadir a un carrito y un contenedor para los articulos del carrito
con sus correspondientes botones para quitar el producto, un espacio donde figure la suma de las cantidades, etc. */
//--------------------- CONFIGURACIÓN SLIDERS ------------------------------///
//--------------------- CONFIGURACIÓN SLIDERS ------------------------------///
let operacion = 0,
counter = 0;
@@ -657,47 +649,138 @@ const genListaEven = () => {
/*-------------------CONTROL FORMULARIO--------------------*/
const validaciones = {
validacionNombre: false,
validacionMail: false,
validacionAsunto: false,
const validarFormulario = () => {
let formulario = document.getElementById('formularioContacto');
let botonFormulario = document.getElementById('enviarForm');
const emailError = document.getElementById('mailErrorArea');
let campoEmail = document.getElementById('mailForm');
campoEmail.addEventListener("input", function (event) {
if (campoEmail.validity.valid) {
emailError.innerHTML = "";
emailError.className = "error";
} else {
showError();
}
});
form.addEventListener("submit", function (event) {
if (!campoEmail.validity.valid) {
showError();
event.preventDefault();
}
});
function showError() {
if (campoEmail.validity.valueMissing) {
emailError.textContent = "Debe introducir una dirección de correo electrónico.";
} else if (campoEmail.validity.typeMismatch) {
emailError.textContent = "El valor introducido debe ser una dirección de correo electrónico.";
}
emailError.className = "error active";
}
formulario.submit()
}
const expValidarNombre = /^[a-zA-ZÀ-ÿ\s]{1,30}$/;
const expValidarCorreo = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
const expValidarAsunto = /^.{4,12}$/;
const formulario = document.getElementById('formularioContacto');
const mensajeError = document.getElementById("emailErrorMailUno");
const correoUsuario = document.getElementById("mail");
correoUsuario.addEventListener('keyup', validarMail);
correoUsuario.addEventListener('blur', validarMail);
function validarMail() {
let inputATestear = correoUsuario.value
if (!expValidarCorreo.test(inputATestear) && inputATestear.length !== 0) {
correoUsuario.classList.add("active");
mensajeError.classList.add("active");
validaciones.validacionMail = false;
}else if (inputATestear.length === 0){
correoUsuario.classList.remove("active");
mensajeError.classList.remove("active");
validaciones.validacionMail = false;
}
else {
correoUsuario.classList.remove("active");
mensajeError.classList.remove("active");
validaciones.validacionMail = true;
}
}
const nombreATestear = document.getElementById("nombre");
const errorNombre = document.getElementById("errorNombre")
nombreATestear.addEventListener('keyup', validarNombre);
nombreATestear.addEventListener('blur', validarNombre);
function validarNombre() {
let inputATestear = nombreATestear.value
if (!expValidarNombre.test(inputATestear) && inputATestear.length !== 0) {
nombreATestear.classList.add("active");
errorNombre.classList.add("active");
validaciones.validacionNombre = false;
}else if (inputATestear.length === 0){
nombreATestear.classList.remove("active");
errorNombre.classList.remove("active");
validaciones.validacionNombre = false;
}
else {
nombreATestear.classList.remove("active");
errorNombre.classList.remove("active");
validaciones.validacionNombre = true;
}
}
const asuntoATestear = document.getElementById("formSubject");
const errorAsunto = document.getElementById("errorAsunto")
asuntoATestear.addEventListener('keyup', validarAsunto);
asuntoATestear.addEventListener('blur', validarAsunto);
function validarAsunto() {
let inputATestear = asuntoATestear.value
if (!expValidarAsunto.test(inputATestear) && inputATestear.length !== 0) {
asuntoATestear.classList.add("active");
errorAsunto.classList.add("active");
validaciones.validacionAsunto = false;
}else if (inputATestear.length === 0){
asuntoATestear.classList.remove("active");
errorAsunto.classList.remove("active");
validaciones.validacionAsunto = false;
}
else {
asuntoATestear.classList.remove("active");
errorAsunto.classList.remove("active");
validaciones.validacionAsunto = true;
}
}
function enviarFormulario() {
if (validaciones.validacionAsunto == true && validaciones.validacionMail == true && validaciones.validacionNombre == true){
formulario.submit();
alert("mensaje enviado");
correoUsuario.value = "";
asuntoATestear.value = "";
nombreATestear.value = "";
}else if (validaciones.validacionAsunto == false) {
asuntoATestear.classList.add("active");
errorAsunto.classList.add("active");
alert("revisa los campos, hay alguno incorrecto")
} else if (validaciones.validacionNombre == false) {
nombreATestearATestear.classList.add("active");
errorNombre.classList.add("active");
alert("revisa los campos, hay alguno incorrecto")
}else if (validaciones.validacionMail == false) {
correoUsuario.classList.add("active");
mensajeError.classList.add("active");
alert("revisa los campos, hay alguno incorrecto")
}
else {
alert("revisa los campos, hay alguno incorrecto")
}
}