javiervaleriano / devchallenge-recipe-page

Desafío de Devchallenges.io de una página de recetas. Aquí utilizo checkboxes personalizados y le otorgo al enlace del footer un cambio de URL de forma aleatoria cada 5 segundos. Posee un spin loader mientras carga la imagen de la página.

Interior Consultant | Consultora de Interiores

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.

In this project I use custom checkboxes and give the footer link a random URL change every 5 seconds. Also, it allowed me to reinforce my CSS Grid knowledge and added a load spinner while the page image finishes rendering. | En este proyecto utilizo checkboxes personalizados y le otorgo al enlace del footer un cambio de URL de forma aleatoria cada 5 segundos. Además, me permitió reforzar mis conocimientos de CSS Grid y agregué un spinner de carga mientras se termina de renderizar la imagen de la página.

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 recipe with ingredients and instructions. | Puedo ver una receta con ingredientes e instrucciones.
• User story: I can select a checkbox if I have the ingredients. | Puedo seleccionar una casilla de verificación si tengo los ingredientes.
• User story: I can see the number of servings and baking times. | Puedo ver la cantidad de porciones y los tiempos de horneado.

Acknowledgements | Agradecimientos

• HTML strong Tag: W3School article that helps me identify when to use the HTML "strong" tag and the difference from the "b" tag. | Artículo de W3School que me ayuda a identificar cuándo usar la etiqueta "strong" de HTML y la diferencia respecto a la etiqueta "b".

• HTML5 Element Flowchart: HTML5 tag flowchart that helps me identify which tags to use over others. | Diagrama de flujo de etiquetas HTML5 que me ayuda a identificar qué etiquetas usar por encima de otras.

• Cómo crear checkboxes personalizados espectaculares con tan solo CSS: Article that helped me remember how to create custom checkboxes only with CSS. | Artículo que me ayudó a recordar cómo crear checkboxes personalizados solamente con CSS.

• Selectores CSS avanzados: Article that helped me learn more about CSS selectors and their characteristics. | Artículo que me ayudó a conocer más a fondo los selectores de CSS y sus características.

• animation: Mozilla Developer article that helped me remember the use and feature of the CSS animation property. | Artículo de Mozilla Developer que me ayudó a recordar el uso y la característica de la propiedad animation de CSS.

Contact | Contacto

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