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

a

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
CSS/main.css
View File

@ -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;
}

26
HTML/Contactos.html
View File

@ -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 for="mail">
<span>Correo Electrónico:</span>
<input type="email" name="mail" id="mailForm" >
<span class="error" aria-live="polite" id="mailErrorArea"></span>
</label> </label>
<label for="subject">Asunto:</label> <input type="text" name="name" id="nombre" class="claseError">
<input type="text" name="subject" id="formSubject">
<label for="mail">Correo Electrónico: <span class="msgError" id="emailErrorMailUno">Introduce un email valido</span></label>
<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>

257
JS/index.js
View File

@ -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,40 +194,19 @@ const cargado = () => {
let cestaCompra = [];
function guardarEnCarrito() {
let prodAñadido = this.event.target.getAttribute("marcador"); function leerCesta() {
let controlCesta = cestaCompra.includes(prodAñadido);
leerCesta();
if ( cestaCompra.length == 0 || !controlCesta) {
cestaCompra.push(prodAñadido);
try { var lecturaCesta = JSON.parse(localStorage.getItem('numProd'));
localStorage.setItem('numProd', JSON.stringify(cestaCompra)); if (lecturaCesta === null) {
renderizarCesta(); cestaCompra = [];
} else {
} catch (e) { cestaCompra = lecturaCesta;
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 renderizarCesta(){ function renderizarCesta(){
leerCesta() leerCesta()
@ -275,7 +253,38 @@ const cargado = () => {
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,20 +295,8 @@ 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(){
@ -309,7 +306,7 @@ const cargado = () => {
const genListaProd = () => { const genListaProd = () => {
let contenedorProd = document.getElementById("contenedorProductos2"); let contenedorProd = document.getElementById("contenedorProductos2");
@ -413,12 +410,7 @@ const genListaProd = () => {
} }
} }
/** 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 ------------------------------///
@ -657,47 +649,138 @@ const genListaEven = () => {
/*-------------------CONTROL FORMULARIO--------------------*/ /*-------------------CONTROL FORMULARIO--------------------*/
const validaciones = {
const validarFormulario = () => { validacionNombre: false,
let formulario = document.getElementById('formularioContacto'); validacionMail: false,
let botonFormulario = document.getElementById('enviarForm'); validacionAsunto: false,
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")
}
}