This commit is contained in:
parent
5c6e39f778
commit
e14abc3e73
52
CSS/main.css
52
CSS/main.css
|
@ -88,6 +88,7 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
z-index: 98;
|
z-index: 98;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cestaCompra:hover > .desplegable-carrito{
|
.cestaCompra:hover > .desplegable-carrito{
|
||||||
|
@ -780,44 +781,6 @@
|
||||||
|
|
||||||
/*------------------------------CONTACTO------------------------*/
|
/*------------------------------CONTACTO------------------------*/
|
||||||
|
|
||||||
.formulario-contacto input[type="email"] {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid gold;
|
|
||||||
margin: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 90%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formulario-contacto input:invalid {
|
|
||||||
border-color: red;
|
|
||||||
background-color: rgba(19, 133, 34, 0.5);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.formulario-contacto input:focus:invalid {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formulario-contacto .error {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
font-size: 80%;
|
|
||||||
color: white;
|
|
||||||
background-color: #900;
|
|
||||||
border-radius: 0 0 5px 5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formulario-contacto .error.active {
|
|
||||||
padding: 3px;
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cuerpo-contacto {
|
.cuerpo-contacto {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -900,7 +863,20 @@ button.boton-enviar-form {
|
||||||
background-color: rgba(40, 42, 55, 0.9);
|
background-color: rgba(40, 42, 55, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.msgError {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msgError.active{
|
||||||
|
|
||||||
|
display: contents;
|
||||||
|
color: red;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.claseError.active {
|
||||||
|
border-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -5,10 +5,9 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="../CSS/main.css">
|
<link rel="stylesheet" href="../CSS/main.css">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
||||||
<script src="../JS/index.js"></script>
|
|
||||||
<title>La Forja Dorada</title>
|
<title>La Forja Dorada</title>
|
||||||
</head>
|
</head>
|
||||||
<body onload="cargado(), validarFormulario(), galletas()">
|
<body onload="cargado(), galletas()">
|
||||||
<header class="grid-cabeza-container">
|
<header class="grid-cabeza-container">
|
||||||
<div class="grid-cabeza-logo">
|
<div class="grid-cabeza-logo">
|
||||||
<img src="..\RECURSOS\Logo\LogoForjaDorada200x160.png" alt="">
|
<img src="..\RECURSOS\Logo\LogoForjaDorada200x160.png" alt="">
|
||||||
|
@ -110,20 +109,22 @@
|
||||||
<div class="formulario-contacto">
|
<div class="formulario-contacto">
|
||||||
<h2>Contacta con La Forja</h2>
|
<h2>Contacta con La Forja</h2>
|
||||||
<form action="https://formsubmit.co/7e360d9cc9ca04dfaa14e5a35e53cf18" method="POST" id="formularioContacto">
|
<form action="https://formsubmit.co/7e360d9cc9ca04dfaa14e5a35e53cf18" method="POST" id="formularioContacto">
|
||||||
<label for="name">Nombre:</label>
|
<label for="name">Nombre:
|
||||||
<input type="text" name="name">
|
<span class="msgError" id="errorNombre">Introduce un nombre valido</span>
|
||||||
|
</label>
|
||||||
|
<input type="text" name="name" id="nombre" class="claseError">
|
||||||
|
|
||||||
<label for="mail">
|
<label for="mail">Correo Electrónico: <span class="msgError" id="emailErrorMailUno">Introduce un email valido</span></label>
|
||||||
<span>Correo Electrónico:</span>
|
|
||||||
<input type="email" name="mail" id="mailForm" >
|
|
||||||
<span class="error" aria-live="polite" id="mailErrorArea"></span>
|
|
||||||
</label>
|
|
||||||
<label for="subject">Asunto:</label>
|
|
||||||
<input type="text" name="subject" id="formSubject">
|
|
||||||
|
|
||||||
|
<input type="email" name="mail" id="mail" class="claseError">
|
||||||
|
|
||||||
|
<label for="subject">Asunto:
|
||||||
|
<span class="msgError" id="errorAsunto">Introduce un asunto valido</span>
|
||||||
|
</label>
|
||||||
|
<input type="text" name="subject" id="formSubject" class="claseError">
|
||||||
<label for="comentarios">Comentarios:</label>
|
<label for="comentarios">Comentarios:</label>
|
||||||
<textarea name="comments" id="formComment" cols="30" rows="10"></textarea>
|
<textarea name="comments" id="formComment" cols="30" rows="10"></textarea>
|
||||||
<button type="button" class="boton-enviar-form" id="enviarForm">Enviar</button>
|
<button type="button" class="boton-enviar-form" id="enviarForm" onclick="enviarFormulario()">Enviar</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -158,6 +159,7 @@
|
||||||
</nav>
|
</nav>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script src="../JS/index.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
531
JS/index.js
531
JS/index.js
|
@ -5,7 +5,6 @@
|
||||||
(adición, eliminación o modificación de productos, eventos...) */
|
(adición, eliminación o modificación de productos, eventos...) */
|
||||||
|
|
||||||
|
|
||||||
let cestaCompra = [];
|
|
||||||
|
|
||||||
const infoProductos = [
|
const infoProductos = [
|
||||||
{
|
{
|
||||||
|
@ -195,87 +194,97 @@ const cargado = () => {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let cestaCompra = [];
|
||||||
|
|
||||||
function guardarEnCarrito() {
|
|
||||||
|
function leerCesta() {
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
var lecturaCesta = JSON.parse(localStorage.getItem('numProd'));
|
||||||
|
if (lecturaCesta === null) {
|
||||||
|
cestaCompra = [];
|
||||||
|
} else {
|
||||||
|
cestaCompra = lecturaCesta;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
function renderizarCesta(){
|
||||||
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) {
|
leerCesta()
|
||||||
return "Error al guardar el item en el localStorage: " + e.message;
|
let elCarrito = document.getElementById("carrito");
|
||||||
}
|
let elPrecioTotal = document.getElementById("total");
|
||||||
}
|
elCarrito.textContent = "";
|
||||||
|
elPrecio = 0;
|
||||||
function renderizarCesta(){
|
for (i = 0; i < cestaCompra.length; i++) {
|
||||||
|
let numeroControl = cestaCompra[i];
|
||||||
leerCesta()
|
let articuloCarrito = document.createElement("li");
|
||||||
let elCarrito = document.getElementById("carrito");
|
elCarrito.appendChild(articuloCarrito);
|
||||||
let elPrecioTotal = document.getElementById("total");
|
articuloCarrito.setAttribute("class", "articulo-carrito");
|
||||||
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");
|
let contenedorArticuloCarrito = document.createElement("figure");
|
||||||
articuloCarrito.appendChild(contenedorArticuloCarrito);
|
articuloCarrito.appendChild(contenedorArticuloCarrito);
|
||||||
contenedorArticuloCarrito.setAttribute("class", "img-carrito");
|
contenedorArticuloCarrito.setAttribute("class", "img-carrito");
|
||||||
|
|
||||||
let imagenArticuloCarrito = document.createElement("img");
|
let imagenArticuloCarrito = document.createElement("img");
|
||||||
contenedorArticuloCarrito.appendChild(imagenArticuloCarrito);
|
contenedorArticuloCarrito.appendChild(imagenArticuloCarrito);
|
||||||
imagenArticuloCarrito.setAttribute("src", infoProductos[numeroControl].img1);
|
imagenArticuloCarrito.setAttribute("src", infoProductos[numeroControl].img1);
|
||||||
imagenArticuloCarrito.setAttribute("alt", "imagen");
|
imagenArticuloCarrito.setAttribute("alt", "imagen");
|
||||||
|
|
||||||
let textoArticulocarrito = document.createElement("p");
|
let textoArticulocarrito = document.createElement("p");
|
||||||
articuloCarrito.appendChild(textoArticulocarrito);
|
articuloCarrito.appendChild(textoArticulocarrito);
|
||||||
textoArticulocarrito.innerText = infoProductos[numeroControl].titulo;
|
textoArticulocarrito.innerText = infoProductos[numeroControl].titulo;
|
||||||
|
|
||||||
let infoArticulo = document.createElement("div");
|
let infoArticulo = document.createElement("div");
|
||||||
articuloCarrito.appendChild(infoArticulo);
|
articuloCarrito.appendChild(infoArticulo);
|
||||||
infoArticulo.setAttribute("class", "infoArticulo")
|
infoArticulo.setAttribute("class", "infoArticulo")
|
||||||
|
|
||||||
let precioArticuloCarrito = document.createElement("p");
|
let precioArticuloCarrito = document.createElement("p");
|
||||||
infoArticulo.appendChild(precioArticuloCarrito);
|
infoArticulo.appendChild(precioArticuloCarrito);
|
||||||
precioArticuloCarrito.innerText = infoProductos[numeroControl].precio + " €";
|
precioArticuloCarrito.innerText = infoProductos[numeroControl].precio + " €";
|
||||||
elPrecio = elPrecio + infoProductos[numeroControl].precio
|
elPrecio = elPrecio + infoProductos[numeroControl].precio
|
||||||
|
|
||||||
let botonBorrarArticulo = document.createElement("button");
|
let botonBorrarArticulo = document.createElement("button");
|
||||||
infoArticulo.appendChild(botonBorrarArticulo);
|
infoArticulo.appendChild(botonBorrarArticulo);
|
||||||
botonBorrarArticulo.innerText = "Eliminar";
|
botonBorrarArticulo.innerText = "Eliminar";
|
||||||
botonBorrarArticulo.setAttribute("type", "button");
|
botonBorrarArticulo.setAttribute("type", "button");
|
||||||
botonBorrarArticulo.setAttribute("onclick", "borrarArticulo()");
|
botonBorrarArticulo.setAttribute("onclick", "borrarArticulo()");
|
||||||
botonBorrarArticulo.setAttribute("marcador", infoProductos[numeroControl].numeroproducto);
|
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() {
|
function eliminarCesta() {
|
||||||
localStorage.removeItem("numProd");
|
localStorage.removeItem("numProd");
|
||||||
|
@ -286,22 +295,10 @@ const cargado = () => {
|
||||||
elPrecioTotal.textContent = 0;
|
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";
|
window.location.href = "./Contactos.html";
|
||||||
|
|
||||||
|
@ -309,119 +306,114 @@ const cargado = () => {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const genListaProd = () => {
|
const genListaProd = () => {
|
||||||
|
|
||||||
|
|
||||||
let contenedorProd = document.getElementById("contenedorProductos2");
|
|
||||||
|
|
||||||
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");
|
let fotoUnoProd = document.createElement("figure");
|
||||||
contenedorProd.appendChild(itemListaProd);
|
carruselesProd.appendChild(fotoUnoProd);
|
||||||
itemListaProd.setAttribute("class", "item-lista-productos");
|
fotoUnoProd.setAttribute("class", "slider-section-prod")
|
||||||
|
|
||||||
let tituloProd = document.createElement("h3");
|
let imgUno = document.createElement("img");
|
||||||
itemListaProd.appendChild(tituloProd);
|
fotoUnoProd.appendChild(imgUno);
|
||||||
var textotitulo = document.createTextNode(infoProductos[i].titulo)
|
imgUno.setAttribute("src", infoProductos[i].img1)
|
||||||
tituloProd.appendChild(textotitulo);
|
imgUno.setAttribute("alt", infoProductos[i].alt)
|
||||||
|
|
||||||
let contenedorCarrousel = document.createElement("div");
|
let fotoDosProd = document.createElement("figure");
|
||||||
itemListaProd.appendChild(contenedorCarrousel);
|
carruselesProd.appendChild(fotoDosProd);
|
||||||
contenedorCarrousel.setAttribute("class", "container-carousel")
|
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");
|
let dispoProd = document.createElement("p");
|
||||||
contenedorCarrousel.appendChild(carruselesProd);
|
descProd.appendChild(dispoProd);
|
||||||
carruselesProd.setAttribute("class", "carruseles-prod");
|
dispoProd.setAttribute("class", "productos-disponibles")
|
||||||
|
dispoProd.innerText = "Disponibles: " + infoProductos[i].disponibles
|
||||||
let fotoUnoProd = document.createElement("figure");
|
|
||||||
carruselesProd.appendChild(fotoUnoProd);
|
let precioProd = document.createElement("li");
|
||||||
fotoUnoProd.setAttribute("class", "slider-section-prod")
|
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");
|
let botonAñadir = document.createElement("button");
|
||||||
fotoUnoProd.appendChild(imgUno);
|
liBotonAñadir.appendChild(botonAñadir);
|
||||||
imgUno.setAttribute("src", infoProductos[i].img1)
|
botonAñadir.setAttribute("type", "button");
|
||||||
imgUno.setAttribute("alt", infoProductos[i].alt)
|
botonAñadir.setAttribute("class", "añadirProd");
|
||||||
|
botonAñadir.setAttribute("marcador", infoProductos[i].numeroproducto);
|
||||||
let fotoDosProd = document.createElement("figure");
|
botonAñadir.setAttribute("onclick", "guardarEnCarrito()");
|
||||||
carruselesProd.appendChild(fotoDosProd);
|
botonAñadir.innerText = "Añadir a Cesta";
|
||||||
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";
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/** más adelante se creará un botón para añadir a un carrito y un contenedor para los articulos del carrito
|
//--------------------- CONFIGURACIÓN SLIDERS ------------------------------///
|
||||||
con sus correspondientes botones para quitar el producto, un espacio donde figure la suma de las cantidades, etc. */
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//--------------------- CONFIGURACIÓN SLIDERS ------------------------------///
|
|
||||||
|
|
||||||
let operacion = 0,
|
let operacion = 0,
|
||||||
counter = 0;
|
counter = 0;
|
||||||
|
@ -657,47 +649,138 @@ const genListaEven = () => {
|
||||||
|
|
||||||
/*-------------------CONTROL FORMULARIO--------------------*/
|
/*-------------------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")
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue