- Overview | Visión general
- Features | Características
- Acknowledgements | Agradecimientos
- Contact | Contacto
.png)
.png)
Hello everyone, I hope you are well. This is my solution to challenge from Devchallenges.io | Hola a todos, espero que estén bien. Esta es mi solución al desafío de Devchallenges.io
Here you can see my demo. | Aquí pueden ver mi demo.
In this project, despite not being 100% necessary to use JavaScript, I took the liberty of using it to add some features such as changing the total price of the purchase by changing the number of items to buy, the use of the Sweet Alert 2 library to generate the successful validation alert, modify to my liking the behavior of the form and some other elements of the interface. In addition, it allowed me to learn HTML elements and attributes that I didn't know before and my first time using modular JavaScript to have a little more organized code.
As in all my projects, I add a URL (all related to my developer profile, of course) randomly to the footer link and repeat the process constantly every 5 seconds. | En este proyecto, a pesar de no ser necesario al 100% usar JavaScript, me tomé la libertad de usarlo para agregar algunas características como el cambio del precio total de la compra al cambiar la cantidad de elementos a comprar, el uso de la librería Sweet Alert 2 para generar la alerta de validación exitosa, modificar a mi gusto el comportamiento del formulario y de algunos otros elementos de la interfaz. Además, me permitió conocer elementos y atributos HTML que desconocía anteriormente y mi primera vez usando JavaScript modular para tener un código uun poco más organizado.
Como en todos mis proyectos, agrego una URL (todas relacionadas con mi perfil de desarrollador, por supuesto) de forma aleatoria al enlace del footer y repito el proceso constantemente cada 5 segundos.
This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories: | Esta aplicación/sitio se creó como una entrega a un desafío de Devchallenges. El desafío fue crear una aplicación para completar las historias de usuario dadas:
-
User story: I can see a page following the given design. | Puedo ver una página siguiendo el diseño dado.
-
User story: I can input email, phone, full name, address, city, country, and postal code. | Puedo introducir el correo electrónico, el teléfono, el nombre completo, la dirección, la ciudad, el país y el código postal.
-
User story: I can input the number of items. | Puedo introducir el número de artículos.
-
User story: I can select at least 3 countries from the dropdown. | Puedo seleccionar al menos 3 países del menú desplegable.
-
User story: When I click submit button or press enter, I can see a warning if validation fails. | Cuando hago clic en el botón de envío o pulso enter, puedo ver una advertencia si la validación falla.
-
User story: When I click submit button or press enter, I can see a successful alert if validation succeeds. | Cuando hago clic en el botón de envío o pulso enter, puedo ver una alerta de éxito si la validación se realiza correctamente.
- ELEMENTO INPUT (TYPE=TEL)
- Cómo estructurar un formulario HTML
- Como agregar un icono en un html select options
- SweetAlert2
- Validación de formularios de datos
- Selectores CSS avanzados
- Object.freeze()
- Object.isFrozen()
- Sobre cómo usar px, em, rem y % en "Responsive Design"
- Tachado con CSS
- ¿Cómo dar estilo al Input type number?
- pointer-events
- cursor
- HTMLElement.focus()
- ::placeholder
- Personalizar un Select con CSS
- Devchallenges profile | Perfil de Devchallenges
- Codepen: @javiervaleriano
- GitHub: @javiervaleriano
- Instagram: @javiervalerianoz
- Twitter: @javaleriano2