En la comunidad de Platzi todos somos estudiantes y seguro que todos hemos batallado alguna vez con estudiar para retener la información y poder aprender efectivamente. Para eso debemos de recurrir a métodos de estudio y una de las más efectivas es usar Flash Cards, las cuales consisten en tarjetas de papel que de un lado tienen una pregunta o término y en la parte de atrás tienen la respuesta o definición, la manera de usarlas es primero leer la pregunta o termino y luego forzar al cerebro a recordar la respuesta, después checamos la verdadera respuesta y comprobamos si nos hemos equivocado o acertamos, además es importante repasar las Flash Cards varias veces hasta que ya hayamos aprendido correctamente todos los temas.
En este tutorial aprenderemos a hacer Flash Cards de manera digital y usando HTML, CSS y un poco de JavaScript.
Primero creamos la carpeta para nuestro proyecto, yo la llamé: flashcard_app, dentro de la carpeta creamos un archivo llamado index.html la cual tendrá la estructura general de nuestra app, después creamos 2 carpetas más, la primera se llamará css y le crearemos un archivo llamado style.css, la siguiente carpeta la llamaremos js y dentro crearemos un archivo con el nombre app.js
1. HTML
Comenzamos trabajando en el archivo index.html y le daremos la siguiente estructura:
Dentro de la etiqueta <head> ponemos una etiqueta <link> en donde hacemos referencia al archivo style.css que está dentro de la carpeta css, de esta manera el navegador a la hora de ejecutar el programa irá a ese archivo a traer todas las propiedades y estilos de la app. En la etiqueta <body> notaras que hay algo extra: onload=“getRandomTerm()” que hace referencia a un método que se encuentra en el archivo app.js y lo verás más adelante, el onload indica que cuando se cargue el cuerpo de la pagina automáticamente tiene que ejecutar esa función.
Dentro de <body> primero tenemos una etiqueta <h1> para el título, el importante que le agregues las clases a las etiquetas para que las podamos referenciar más adelante. Luego tenemos 3 <div>, los primero dos tienen una etiqueta <h3> para poner el texto del termino y la definición y el tercer <div> tiene dos botones, uno servirá para consultar la respuesta y el otro es para pasar a la siguiente definición.
Por último esta la etiqueta <script> en la que hacemos referencia a nuestro archivo de JavaScript.
2. CSS
Sigue la siguiente estructura o puedes hacer los cambios que quieras para darle a la app la apariencia que más te guste.
3. JS
En el archivo app.js primero comenzaremos definiendo 4 variables harán referencia a elementos que tenemos en el archivo html, los cuales serían: term, definition, check y next. Recuerda que term es el div en donde va la pregunta o termino y definition es el div en donde va la respuesta o definición. Check y next son botones, el primero es para ver la respuesta o definición y el segundo es para pasar a la siguiente pregunta.
El siguiente paso es crear una variable que sea un arreglo de datos estructurados, es decir, nuestro arreglo estará compuesto por objetos y cada objeto tendrá 2 propiedades: “question”, en donde se almacena el texto de la pregunta, y “answer”, que almacena el texto de la respuesta. Prepara un listado de preguntas y respuestas, y ponlas en el archivo de js de la siguiente manera:
Como último paso hay que crear 3 funciones:
La primera función genera un número random de acuerdo a la cantidad de objetos que pusimos en nuestro listado, luego introduce el texto de la pregunta y respuesta en las etiquetas <h3> que tenemos en nuestro archivo html, el numero random sirve para obtener un objeto de nuestro array utilizándolo como índice. Si recordarás esta guerra la función que se llamó en el <body> en el archivo html.
La siguiente función aplica cuando se hace click en el botón “Check”. En el archivo css se estableció que por defecto el <div> definition no se mostraría, entonces con esta función hacemos que al presionar el botón se pueda visualizar el <div> con la definición o respuesta.
La última función aplica cuando se hace click en el botón “Next” y lo que hace es llamar a la primera función getRandomTerm() para que muestre otro objeto aleatorio de nuestro array de preguntas y respuestas, además hace que el <div> que contiene la respuesta se vuelva a ocultar.
4. A aprender
Ahora solo queda comprobar que funcione correctamente y empezar a usarlo. Espero que hayas podido aprender algo nuevo y que puedas seguir aprendiendo muchas cosas con esta mini app que realizamos, diviértete y Nunca Pares de Aprender!!!
Respuesta:
