Skip to content

Commit f13d2b6

Browse files
cilphicilphi
authored
correcciones para entrega final
- Se eliminaron los elementos que no formaron parte del proyecto y permanecían escondidos desde la primera entrega. - Se cambia el atributo placeholder, por value para "precargar datos en los campos". - Se reubicó el cuadro de resultados para que quedara en el mismo div que el cotizador y adopte el estilo. - Se referencia la librería Sweet Alert en el HTML.
1 parent 889c98b commit f13d2b6

File tree

1 file changed

+18
-59
lines changed

1 file changed

+18
-59
lines changed

‎index.html‎

Lines changed: 18 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Entregable2 - Castillo - Cotizador</title><!--Cambio de nombre para la segunda entrega-->
6+
<title>Proyecto final - Castillo - Cotizador</title><!--Cambio de nombre para la segunda entrega-->
77
<link rel="shortcut icon" href="./assets/imgs/favicon.png" type="image/png">
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Akatab:wght@700&family=Chocolate+Classical+Sans&display=swap" rel="stylesheet">
1111
<link rel="stylesheet" href="./css/main.css">
1212
<meta name="description" content="Cotizador online de envíos locales por vía terrestre.">
1313
<meta name="keywords" content="envíos, paquetes, courier, cotizar, javascript">
14+
<script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
1415
</head>
1516
<body>
1617
<header>
@@ -20,10 +21,8 @@ <h1>Cotizador de envíos</h1>
2021
<p>Planifica fácil</p>
2122
</div>
2223
<ul>
23-
<li class="hide">Nuevo Usuario</li>
24-
<li class="hide">Log In</li>
2524
<li><a href="#cotizador">Cotizar</a></li>
26-
<li><a href="#revisar">Revisa tus cotizaciones</a></li>
25+
<li><a href="#resultados">Resultados</a></li>
2726
</ul>
2827
</nav>
2928
</header>
@@ -34,21 +33,8 @@ <h2>Conoce: Cotizador de envíos</h2>
3433
<p>Una herramienta práctica para ingresar los datos básicos de tus usuarios y poder cotizar el envío de tus productos.</p>
3534
<h3>Instrucciones de uso:</h3>
3635
<p>Lee atentamente cada instrucción antes de comenzar. Una vez leídas te recomendamos seguirlas <i>paso a paso.</i></p>
37-
<div>
38-
<div class="hide">
39-
<h4>Ingreso de cotizante:</h4>
40-
<ol>
41-
<li><b>Presiona el botón Nuevo Usuario:</b> Aquí te preguntará por el nombre que quieres que usemos al interactuar contigo. Evita el uso de mayúsculas y caracteres especiales.</li>
42-
<li><b>Constraseña:</b> La contraseña debe tener <b><i>4 dígitos</i></b>, uno de ellos en <b><i>Mayúscula</i></b>, al menos 1 <b><i>caracter especial</i></b> y mínimo un <b><i>número</i></b>.</li>
43-
<li><b>País:</b> Con este dato podremos hacer la conversión a la moneda local y proporcionar claridad en el monto final estimado.</li>
44-
<li><b>Ciudad:</b> Recuerda que hay ciudades que tienen una tarifa más elevada, al saber la tuya podemos ayudarte a obtener un precio más cercano al real.</li>
45-
</ol>
46-
<div>
47-
<button id="">Nuevo Usuario</button>
48-
<button id="">Log In</button>
49-
</div>
50-
</div>
51-
<div id="cotizador"><!--Cotizador-->
36+
<div> <!-- 2 Cotizador -->
37+
<div id="cotizador"><!-- 3 Ingreso de Datos -->
5238
<h4>Cotizando envíos:</h4>
5339
<ul>
5440
<p>Recuerda escribir los números siguiendo el ejemplo, expresa las medidas en cms o kg, de acuerdo a lo que se solicita. </p>
@@ -57,25 +43,25 @@ <h4>Cotizando envíos:</h4>
5743
<li>
5844
<label for="cantidadLargo"><b>Largo</b></label>
5945
<span>Escribe el largo en cms</span>
60-
<input type="number" id="cantidadLargo" name="cantidadLargo" min="0.1" step="0.1" max="40" placeholder="21.5">
46+
<input type="number" id="cantidadLargo" name="cantidadLargo" min="0.1" step="0.1" max="40" value="21.5">
6147
</li>
6248
<!--Ancho-->
6349
<li>
6450
<label for="cantidadAncho"><b>Ancho</b></label>
6551
<span>Escribe el ancho en cms</span>
66-
<input type="number" id="cantidadAncho" name="cantidadAncho" min="0.1" step="0.1" max="40" placeholder="6.5">
52+
<input type="number" id="cantidadAncho" name="cantidadAncho" min="0.1" step="0.1" max="40" value="6.5">
6753
</li>
6854
<!--Alto-->
6955
<li>
7056
<label for="cantidadAlto"><b>Alto</b></label>
7157
<span>Escribe el alto en cms</span>
72-
<input type="number" id="cantidadAlto" name="cantidadAlto" min="0.1" step="0.1" max="40" placeholder="19.5">
58+
<input type="number" id="cantidadAlto" name="cantidadAlto" min="0.1" step="0.1" max="40" value="19.5">
7359
</li>
7460
<!--Peso-->
7561
<li>
7662
<label for="cantidadPeso"><b>Peso</b></label>
7763
<span>Escribe el peso en kg</span>
78-
<input type="number" id="cantidadPeso" name="cantidadPeso" min="0.01" step="0.01" max="20" placeholder="0.25">
64+
<input type="number" id="cantidadPeso" name="cantidadPeso" min="0.01" step="0.01" max="20" value="0.25">
7965
</li>
8066
<div>
8167
<button type="submit" id="cotizar">Cotizar</button>
@@ -88,45 +74,18 @@ <h4>Cotizando envíos:</h4>
8874
<p>Nuestros vehículos están acondicionados para paquetes de menor tamaño y peso.</p>
8975
</div>
9076
</div>
77+
<div id="resultados"><!-- 4 Resultado de cotizaciones -->
78+
<h4>Resultados:</h4>
79+
<p>Una vez que hayas presionado <span>Cotizar</span> Revisa el resultado de tu cotización. Luego podrás decidir si borras la información o si añades otra cotización y envías los datos por correo. </p>
80+
<div id="cotizacionDiv">
81+
</div>
82+
<div class="disclaimer">
83+
<p>Puedes añadir hasta 5 cotizaciones si quieres enviar una lista grande.</p>
84+
</div>
85+
</div>
9186
</div>
92-
<p>Ahora que haz leído las instrucciones, te deseamos éxito en la cotización.</p>
93-
<p class="hide">Recuerda que si te inscribes estarás participando en el sorteo secreto de nuestra web.</p>
9487
</article>
9588
</section>
96-
<section id="revisar"><!-- 2 Ingreso de cotizaciones -->
97-
<h2>Revisa tus cotizaciones</h2>
98-
<div id="cotizacionDiv">
99-
</div>
100-
<table class="hide">
101-
<caption></caption>
102-
<thead>
103-
<tr>
104-
<th>N°</th>
105-
<th>Medidas</th>
106-
<th>Peso</th>
107-
<th>Valor sin descuentos</th>
108-
<th>Total a pagar</th>
109-
</tr>
110-
</thead>
111-
<tbody id="cotizacionTabla"></tbody>
112-
</table>
113-
<p class="hide">Si necesitas una copia de la información que se te entregue, puedes presionar la opción:</p>
114-
<form class="hide">
115-
<!--Aceptar envío-->
116-
<input type="radio" id="aceptar" name="aceptar" value="aceptar">
117-
<label for="aceptar"><b>Acepto, enviar datos al correo.</b></label><br>
118-
<!--Correo-->
119-
<label for="email">Escribe tu dirección de correo electrónico:</label>
120-
<input type="email" id="email" name="email">
121-
<button type="submit" id="enviar">Enviar</button>
122-
</form>
123-
</section>
124-
<section><!-- 2 -->
125-
126-
</section>
127-
<section><!-- 3 -->
128-
129-
</section>
13089
</main>
13190
<footer>
13291
<p>Desarrollado por</p>

0 commit comments

Comments
 (0)