@@ -110,20 +109,22 @@
Contacta con La Forja
@@ -158,6 +159,7 @@
+
\ No newline at end of file
diff --git a/JS/index.js b/JS/index.js
index f912344..6eaafb5 100644
--- a/JS/index.js
+++ b/JS/index.js
@@ -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()
-
}
-
\ No newline at end of file
+ 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")
+
+ }
+ }