Edie homepage | Página de inicio de Edie

Solution for a challenge from Devchallenges.io. | Solución para un desafío de Devchallenges.io.

Demo | Solution / Solución | Challenge / Desafío

Table of Contents | Tabla de contenido

• Overview | Visión general
  • Built With | Construido con
• Features | Características
• Acknowledgements | Agradecimientos
• Contact | Contacto

Overview | Visión general

Desktop | Escritorio

Mobile | Móvil

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.

lang="en": To this project I added several details of value to the user experience and in terms of design it is very faithful to what is expected. In addition, the form fields to enter the email have validation with JavaScript and CSS styles applied to make it easy to understand if you are typing a valid email address or not.

This development experience has allowed me to learn about and interact for the first time with the IntersectionObserver API that helps me pop up DOM elements when they cross the viewport.

Also, among my personal touches, I dynamically change every 5 seconds the footer link to my developer profiles.

lang="es": A este proyecto le agregué varios detalles de valor para la experiencia de usuario y en cuanto a diseño es muy fiel al que se espera. Además, los campos de formulario para introducir el correo electrónico tienen validación con JavaScript y estilos CSS aplicados para que sea fácil de entender si se está escribiendo una dirección de correo válida o no.

Esta experiencia de desarrollo me ha permitido conocer e interactuar por primera vez con la API de IntersectionObserver que me ayuda a hacer aparecer elementos del DOM cuando se cruzan por el viewport.

Además, entre mis toques personales, cambio dinámicamente cada 5 segundos el enlace del footer a mis perfiles de desarrollador.

Built With | Construido con

• HTML
• CSS
• JavaScript

Features | Características

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 see a page on mobile following the given design. | Puedo ver una página en móviles siguiendo el diseño dado.

• User story: I can go to certain locations by selecting links in navigation or footer. | Puedo ir a determinadas partes seleccionando enlaces en la barra de navegación o en el footer.

Extra: Surprise me with mobile navigation. | Extra: Sorpréndeme con la navegación móvil.

Acknowledgements | Agradecimientos

• Los elementos blockquote, cite y q
• Curso JavaScript: 76. DOM: Delegación de Eventos - #jonmircha
• HTML Best Practices
• HTML loading Attribute
• Window.pageYOffset
• HTMLElement.offsetTop
• Window.scroll()
• Animaciones al Scrollear con Intersection Observer | Javascript

Contact | Contacto

• Devchallenges profile | Perfil de Devchallenges
• Codepen: @javiervaleriano
• Instagram: @javiervalerianoz
• Twitter: @javaleriano2