Adalab/clarke-s3-eval-trd-Tokytome

Name: clarke-s3-eval-trd-Tokytome

Owner: Adalab

Description: clarke-s3-eval-trd-Tokytome created by GitHub Classroom

Created: 2018-01-03 00:20:56.0

Updated: 2018-01-28 14:29:26.0

Pushed: 2018-01-10 20:22:09.0

Homepage: https://adalab.github.io/clarke-s3-eval-trd-Tokytome/

Size: 515

Language: CSS

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Ejercicio de evaluación - Sprint 3

El ejercicio consiste en desarrollar una página web de acuerdo a un diseño dado, resolviendo los siguientes puntos:

• Usar CSS Grid.
• Resolver interacciones usando JS y transiciones.
• Cargar contenido nuevo desde una API.

1. Maquetación

En primer lugar vamos a realizar la maquetación sobre un diseño dado:

1. El primer módulo (hero) debe ocupar, como mínimo el alto de la ventana del navegador.
2. Usar CSS Grid para el listado de elementos del bloque celeste de “3 Reasons To Purchase”.

2. Interacción

Resolver las 4 siguientes interacciones:

1. El menú que sale del lateral.
2. Cada opción del menú enlaza a su sección correspondiente.
3. El botón del módulo hero enlaza a la sección siguiente.
4. El botón del footer sube hasta arriba de la página.

3. Petición AJAX

Para finalizar el ejercicio hemos preparado un pequeño servicio que devuelve tres razones extras para el módulo de razones para comprar: https://three-random-reasons-izwfjpgbqm.now.sh

Al pulsar el el botón de “More reasons” se deberán pedir 3 nuevas razones y añadirlas al módulo cuando el servidor nos devuelva la respuesta, que será del tipo:

easons": [
  {
    "title": "Maximus orci proin.",
    "description": "Mollis tristique e iaculis natoque ut natoque rhoncus."
  },
  {
    "title": "Elit elit in.",
    "description": "Ultricies posuere imperdiet proin donec. Laoreet ultrices amet."
  },
  {
    "title": "Lacus tincidunt ipsum.",
    "description": "Mattis diam i mauris et ante vel id."
  }

Las razones deberán añadirse ajustándose al diseño propuesto.

Extras

Además de realizar los pasos anteriores este ejercicio cuenta con las siguienes funciones o particularidades:

• Se han añadido hovers y animaciones a los botones.
• Se ha añadido un scroll suave mediante JQuery.
• Se ha usado fetch para la petición AJAX.
• Se han usado funciones y un mixin en SASS.
• El número de reasons se actualiza cada vez que se añaden nuevas.
• Se ha añadido funcionalidad al botón GO. :snowflake: