Skip to content

Commit

Permalink
Local Storage
Browse files Browse the repository at this point in the history 
Se agrega Local Storage
  • Loading branch information
@Lucasponzoni
Lucasponzoni committed Apr 30, 2024
1 parent 1f2aaae commit 25fb712
Show file tree
Hide file tree
Showing 7 changed files with 376 additions and 170 deletions.
Binary file added Img/Andesmar Fav.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/Download.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/error.webp
View file
Binary file not shown.
Binary file added Img/success.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
340 changes: 202 additions & 138 deletions formulario-andesmar.js
View file

Large diffs are not rendered by default.

80 changes: 52 additions & 28 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Andesmar API Etiquetas</title>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="./Img/Andesmar Fav.jpg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300..700&display=swap" rel="stylesheet">
</head>
<body>
<h1>Formulario Andesmar API</h1>
Expand All @@ -16,17 +20,17 @@ <h1>Formulario Andesmar API</h1>
</div>
<form id="andesmarForm">

<input type="text" id="calleRemitente" name="CalleRemitente" value="Mendoza" required>
<input type="text" id="calleRemitente" name="CalleRemitente" value="Mendoza" required>

<input type="text" id="calleNroRemitente" name="CalleNroRemitente" value="2799" required>
<input type="text" id="calleNroRemitente" name="CalleNroRemitente" value="2799" required>

<input type="text" id="codigoPostalRemitente" name="CodigoPostalRemitente" value="2000" required>
<input type="text" id="codigoPostalRemitente" name="CodigoPostalRemitente" value="2000" required>

<label for="nombreApellidoDestinatario">Nombre y Apellido Destinatario:</label>
<input type="text" id="nombreApellidoDestinatario" name="NombreApellidoDestinatario" value="" required>
<label for="nombreApellidoDestinatario">Nombre y Apellido Destinatario:</label>
<input type="text" id="nombreApellidoDestinatario" name="NombreApellidoDestinatario" value="" required>

<label for="codigoPostalDestinatario">Código Postal Destinatario:</label>
<input type="text" id="codigoPostalDestinatario" name="CodigoPostalDestinatario" value="" required>
<label for="codigoPostalDestinatario">Código Postal Destinatario:</label>
<input type="text" id="codigoPostalDestinatario" name="CodigoPostalDestinatario" value="" required>

<label for="calleDestinatario">Calle Destinatario:</label>
<input type="text" id="calleDestinatario" name="CalleDestinatario" value="" required>
Expand All @@ -40,23 +44,40 @@ <h1>Formulario Andesmar API</h1>
<label for="nroRemito">Número de Remito:</label>
<input type="text" id="nroRemito" name="NroRemito" value="" required>

<label for="bultos">Cantidad de Bultos:</label>
<input type="number" id="bultos" name="Bultos" value="1" required>

<label for="peso">Peso Total (kg):</label>
<input type="number" id="peso" name="Peso" step="0.001" value="" required>

<label for="valorDeclarado">Valor Declarado:</label>
<input type="number" id="valorDeclarado" name="ValorDeclarado" value="" required>

<label for="alto">Alto (cm):</label>
<input type="number" id="alto" name="Alto" step="0.001" value="" required>

<label for="ancho">Ancho (cm):</label>
<input type="number" id="ancho" name="Ancho" step="0.001" value="" required>

<label for="largo">Largo (cm):</label>
<input type="number" id="largo" name="Largo" step="0.001" value="" required>
<div class="six">
<div class="doble" >
<label for="bultos">Cantidad de Bultos</label>

<label for="peso">Peso Total (kg)</label>

<label for="valorDeclarado">Valor Declarado</label>

</div>

<div class="doble" >
<input type="number" id="bultos" name="Bultos" value="1" required>

<input type="number" id="peso" name="Peso" step="0.001" value="" required>

<input type="number" id="valorDeclarado" name="ValorDeclarado" value="" required>
</div>

<div class="doble" >
<label for="alto">Alto (cm)</label>

<label for="ancho">Ancho (cm)</label>

<label for="largo">Largo (cm)</label>
</div>

<div class="doble" >
<input type="number" id="alto" name="Alto" step="0.001" value="" required>

<input type="number" id="ancho" name="Ancho" step="0.001" value="" required>

<input type="number" id="largo" name="Largo" step="0.001" value="" required>
</div>
</div>

<input type="number" id="m3" name="M3" step="0.001" value="0.1">

Expand All @@ -77,21 +98,23 @@ <h1>Formulario Andesmar API</h1>
<option value="cargas remito conformado">CARGA PESADA (+30Kg)</option>
</select>

<label for="esFletePagoDestino">¿Es Flete Pago en Destino?</label>
<label for="esFletePagoDestino"></label>
<select id="esFletePagoDestino" name="EsFletePagoDestino" required>
<option value="true">Sí</option>
<option selected value="false">No</option>
</select>

<label for="esRemitoConformado">¿Es Remito Conformado?</label>
<label for="esRemitoConformado"></label>
<select id="esRemitoConformado" name="EsRemitoconformado" required>
<option selected value="true">Sí</option>
<option value="false">No</option>
</select>

<button type="button" onclick="enviarSolicitud()">Generar Etiqueta</button>
<h3 class="ultimasEtiquetasTitulo" >Ultimas Etiquetas Generadas:</h3>
<div id="ultimasEtiquetas"></div>
<div class="respuesta" id="respuesta"></div>

<div id="respuesta"></div>
</form>

<div id="spinner" class="spinner-container">
Expand All @@ -100,5 +123,6 @@ <h1>Formulario Andesmar API</h1>


<script src="formulario-andesmar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
126 changes: 122 additions & 4 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,30 @@ form {
border-radius: 25px;
}

.six{
background-color: cornflowerblue;
border-radius: 10px;
padding: .3rem;
margin-bottom: .5rem;
}

.doble{
display: flex;
justify-content: space-between;
gap: .5rem;
color: white;
padding: .3rem;
}

.doble input{
margin: 0;
margin-bottom: .3rem;
}

.doble label{
margin: 0;
}

#Andesmar-img {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -83,7 +107,7 @@ button:hover {
}

.spinner {
border: 8px solid #3498db;
border: 8px solid cornflowerblue;
border-radius: 50%;
border-top: 8px solid #ffffff;
width: 50px;
Expand All @@ -96,18 +120,112 @@ button:hover {
100% { transform: rotate(360deg); }
}

#calleRemitente, #calleNroRemitente, #codigoPostalRemitente, #m3{
#calleRemitente, #calleNroRemitente, #codigoPostalRemitente, #m3, #esRemitoConformado, #esFletePagoDestino{
display: none;
}

.contenedorRespuesta{
margin-top: 1rem;
background-color: #e1f4e5;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 10px;
display: flex;
flex-direction: column;
}

.contenedorRespuesta img{
width: 200px;
}

.contenedorRespuesta h2{
font-family: "Signika Negative", sans-serif;
color: #32d554;
margin-top: 0;
padding-top: 1rem;
font-size: 2rem;
}

.botonDescarga{
font-family: "Signika Negative", sans-serif;
font-weight: 800;
margin-bottom: 1rem;
font-size: 2rem;
background-color: #32d554;
color: white;
border-radius: 15px;
padding: 1rem;
}

.contenedorError{
background-color: #3498db;
margin-top: 1rem;
background-color: #52c6b8;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 10px;
}

.contenedorError p{
font-family: "Signika Negative", sans-serif;
color: white;
}
margin: 0;
}

.contenedorError img{
width: 200px;
}

.mensajeErrorUndefinedContainer{
margin-top: 1rem;
background-color: red;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 10px;
display: flex;
flex-direction: column;
}

.mensajeErrorUndefinedContainer p{
color: white;
font-size: 2rem;
font-weight: 600px;
}

#ultimasEtiquetas{
padding-top: .5rem;
padding-bottom: .5rem;
display: flex;
flex-wrap: wrap;
background-color: gray;
border-radius: 0 0 10px 10px;
}

.ultimasEtiquetasTitulo{
font-family: "Signika Negative", sans-serif;
background-color: #333;
padding: .5rem;
margin: 0;
margin-top: .5rem;
color: white;
}

.reDescarga{
font-family: "Signika Negative", sans-serif;
font-weight: 400px;
gap: .2rem;
display: flex;
background-color: #333;
margin: .3rem;
margin-top: 0;
text-align: center;
justify-content: baseline;
text-align: center;
}

.reDescarga img {
width: 20px;
filter: invert(100%);
}

0 comments on commit 25fb712

Please sign in to comment.