Esta lección será completamente en JavaScript. Vamos a generar el contenido de la hoja de cálculo y ponerlo en la página, listando el título, el contenido y el estado actual para que podamos votar hacia arriba o hacia abajo cada vez que se haga clic. Al hacer clic, se enviará una nueva solicitud al servidor, y este actualizará los votos hacia arriba o hacia abajo. Vamos a añadir un botón que hará que eso ocurra.
Así que, entrando en el editor donde hicimos la primera solicitud, y mientras recorremos los datos, tenemos los datos que están llegando y los estamos devolviendo desde el objeto de datos contenido dentro de `data`. Ahora esto puede ser un poco confuso. Pero ahora tenemos `data` y `data`, y en realidad voy a renombrar esto a... `Jason`. Así que este es el objeto `Jason` completo, solo para evitar confusiones. Y queremos generar los datos `Jason` y recorrer cada uno de ellos.
Usando el método `forEach` de JavaScript, vamos a recorrer y seleccionar cada uno de los elementos contenidos dentro de los datos, y esto nos devolverá esas filas individuales de información. Tenemos rol, título, contenido, y arriba y abajo. Podemos registrarlos en la consola mientras recorremos para asegurarnos de que están llegando correctamente. No necesitamos los valores de índice, así que podemos mantenerlos con las comillas y los corchetes. Estos son los objetos individuales que tenemos, y podemos usarlos por el nombre del objeto para generar la información.
De hecho, esta es una de las razones por las que tuvimos que reestructurar los datos, para que tengan más sentido cuando los leemos en el punto final. No es solo un arreglo de datos; podemos ver que este es el contenido, este es el título. Y recuerda, esta información proviene de aquí arriba. Si actualizamos esto a "descripción" y luego refrescamos el contenido, ahora vendrá como "descripción". Por ejemplo, "Vota esto hacia arriba", el título "Opas", etc., y luego los valores que tenemos para arriba y abajo, y también el valor de rol.
Así que recorramos y construyamos algo de contenido para añadirlo a la página, seleccionando el objeto de la página desde la salida, usando `document.querySelector`, seleccionando los elementos con la clase `output`. Déjame verificar eso para asegurarme de que tiene la clase `output` y que, de hecho, es el elemento correcto al que vamos a enviar los datos.
Mientras iteramos, construyamos el contenido que vamos a añadir a los elementos y creemos un nuevo elemento usando `document.createElement`. El elemento que queremos crear es un `div`. Este será el contenedor principal del elemento. Y dentro de aquí vamos a añadir algo de contenido. Así que dentro del `div`, configuremos el contenido del texto y, para ahorrar tiempo, configurémoslo como HTML interno. Podemos simplemente configurar el HTML interno usando literales de plantilla. Esos son los símbolos justo a la izquierda de la tecla "1" en la mayoría de los teclados, y puedes obtener la información del elemento.
Si queremos obtener el elemento "título", creo que lo llamamos así, y luego creamos un nuevo espacio y obtenemos la descripción del elemento, mantendremos esa descripción por ahora. Y mientras recorremos, tomaremos la salida y haremos un `append` del `div`, lo que añadirá el nuevo `div` a la página. Volvamos atrás y veamos qué tenemos ahora. Tenemos el contenido allí. Lo haré más pequeño para que podamos ver el contenido generado, reduciré mi editor y agrandaré eso. Ahora podemos ver el contenido mientras se genera en la página.
Ahora también personalicemos esto, guardemos y configuremos el envoltorio, para que envuelva todo el contenido del texto para que podamos ver los valores aquí. Mientras lo recorremos, queremos configurar esto como `<h2>` y luego cerrar el `<h2>`. Y esto puede ser un párrafo separado para la descripción y luego cerrar el párrafo. De esta manera, estamos cargando cada uno de los elementos en la página.
Además, queremos crear botones separados para los valores de arriba y abajo, así que creémoslos también. Este va a ser el botón uno, usando `document.createElement`, el elemento que estamos creando será un botón, y dentro del botón uno, el contenido de texto. Añadamos el valor. Voy a usar nuevamente literales de plantilla, así que añadiremos el valor de los elementos, y creo que es `element.up`. Déjame verificar eso. Entonces, `element.up` y `element.down`, así que `element.up` y luego tomamos del `div` y añadimos el botón uno a ese elemento. Esto añadirá los totales, y nuevamente, estos vienen de la hoja de cálculo. Hagamos el segundo botón de la misma manera. Y en la próxima lección haremos que los botones sean interactivos. Renombremos esto a botón dos y luego añadimos el botón dos. En realidad, también podemos actualizar esto. Así que tendremos uno hacia arriba y otro hacia abajo. Puedes añadir colores a los botones según sea necesario. Botón uno estilo, y configuremos el color de fondo de este en verde, y configuremos el color de fondo del otro en rojo para que podamos distinguir entre los dos. En realidad, este debería ser el botón dos y comenzar en rojo. Guardemos. Así que tenemos verde y rojo para los botones. Con HTML5, tenemos la opción de tener pequeños triángulos, así que podemos configurar un triángulo hacia arriba y un triángulo hacia abajo. Añadamos ese pequeño triángulo negro y añadamos el valor hexadecimal o estamos añadiendo el contenido del texto y guardamos eso.
Esto en realidad ahora necesita estar en nuestro HTML porque estamos llamando al indicador, el indicador hacia arriba. O en realidad es el indicador hacia abajo, así que también necesitamos actualizar y añadir un indicador hacia arriba. Déjame copiar y pegar el indicador hacia abajo en el botón de texto y actualizar eso a uno. Ese es el indicador hacia abajo. También necesitamos actualizarlo y tener el indicador hacia arriba, así que seleccionando el indicador hacia arriba será este valor hexadecimal para el indicador hacia arriba. Dejemos que se actualice. Así que tenemos arriba y abajo para los indicadores. Puedes usar los símbolos que quieras. Esto fue solo con fines de demostración. Así obtenemos algún tipo de indicadores para mostrar qué harán estos botones.
A continuación, haremos que los botones sean interactivos y enviaremos información de vuelta a la hoja de cálculo. Así que adelante, actualiza tu proyecto desde la máquina local y haz que envíe y actualice la salida desde la hoja de cálculo. Estos son datos en vivo, así que incluso puedes regresar aquí y probarlo; está en vivo. Y cuando regreses y actualices, actualizará el contenido en consecuencia. Viene directamente de la hoja de cálculo; cada vez que se carga la página, hace la solicitud al punto final, obtiene los datos del punto final y los recorre. Una vez que realiza la solicitud `fetch` y la devuelve, usa JavaScript para construir el contenido de la página y generarlo en la página.
Añade eso a tu proyecto. Y lo que viene a continuación es la interacción que vamos a crear. Eso aún está por llegar.
Así que, entrando en el editor donde hicimos la primera solicitud, y mientras recorremos los datos, tenemos los datos que están llegando y los estamos devolviendo desde el objeto de datos contenido dentro de `data`. Ahora esto puede ser un poco confuso. Pero ahora tenemos `data` y `data`, y en realidad voy a renombrar esto a... `Jason`. Así que este es el objeto `Jason` completo, solo para evitar confusiones. Y queremos generar los datos `Jason` y recorrer cada uno de ellos.
Usando el método `forEach` de JavaScript, vamos a recorrer y seleccionar cada uno de los elementos contenidos dentro de los datos, y esto nos devolverá esas filas individuales de información. Tenemos rol, título, contenido, y arriba y abajo. Podemos registrarlos en la consola mientras recorremos para asegurarnos de que están llegando correctamente. No necesitamos los valores de índice, así que podemos mantenerlos con las comillas y los corchetes. Estos son los objetos individuales que tenemos, y podemos usarlos por el nombre del objeto para generar la información.
De hecho, esta es una de las razones por las que tuvimos que reestructurar los datos, para que tengan más sentido cuando los leemos en el punto final. No es solo un arreglo de datos; podemos ver que este es el contenido, este es el título. Y recuerda, esta información proviene de aquí arriba. Si actualizamos esto a "descripción" y luego refrescamos el contenido, ahora vendrá como "descripción". Por ejemplo, "Vota esto hacia arriba", el título "Opas", etc., y luego los valores que tenemos para arriba y abajo, y también el valor de rol.
Así que recorramos y construyamos algo de contenido para añadirlo a la página, seleccionando el objeto de la página desde la salida, usando `document.querySelector`, seleccionando los elementos con la clase `output`. Déjame verificar eso para asegurarme de que tiene la clase `output` y que, de hecho, es el elemento correcto al que vamos a enviar los datos.
Mientras iteramos, construyamos el contenido que vamos a añadir a los elementos y creemos un nuevo elemento usando `document.createElement`. El elemento que queremos crear es un `div`. Este será el contenedor principal del elemento. Y dentro de aquí vamos a añadir algo de contenido. Así que dentro del `div`, configuremos el contenido del texto y, para ahorrar tiempo, configurémoslo como HTML interno. Podemos simplemente configurar el HTML interno usando literales de plantilla. Esos son los símbolos justo a la izquierda de la tecla "1" en la mayoría de los teclados, y puedes obtener la información del elemento.
Si queremos obtener el elemento "título", creo que lo llamamos así, y luego creamos un nuevo espacio y obtenemos la descripción del elemento, mantendremos esa descripción por ahora. Y mientras recorremos, tomaremos la salida y haremos un `append` del `div`, lo que añadirá el nuevo `div` a la página. Volvamos atrás y veamos qué tenemos ahora. Tenemos el contenido allí. Lo haré más pequeño para que podamos ver el contenido generado, reduciré mi editor y agrandaré eso. Ahora podemos ver el contenido mientras se genera en la página.
Ahora también personalicemos esto, guardemos y configuremos el envoltorio, para que envuelva todo el contenido del texto para que podamos ver los valores aquí. Mientras lo recorremos, queremos configurar esto como `<h2>` y luego cerrar el `<h2>`. Y esto puede ser un párrafo separado para la descripción y luego cerrar el párrafo. De esta manera, estamos cargando cada uno de los elementos en la página.
Además, queremos crear botones separados para los valores de arriba y abajo, así que creémoslos también. Este va a ser el botón uno, usando `document.createElement`, el elemento que estamos creando será un botón, y dentro del botón uno, el contenido de texto. Añadamos el valor. Voy a usar nuevamente literales de plantilla, así que añadiremos el valor de los elementos, y creo que es `element.up`. Déjame verificar eso. Entonces, `element.up` y `element.down`, así que `element.up` y luego tomamos del `div` y añadimos el botón uno a ese elemento. Esto añadirá los totales, y nuevamente, estos vienen de la hoja de cálculo. Hagamos el segundo botón de la misma manera. Y en la próxima lección haremos que los botones sean interactivos. Renombremos esto a botón dos y luego añadimos el botón dos. En realidad, también podemos actualizar esto. Así que tendremos uno hacia arriba y otro hacia abajo. Puedes añadir colores a los botones según sea necesario. Botón uno estilo, y configuremos el color de fondo de este en verde, y configuremos el color de fondo del otro en rojo para que podamos distinguir entre los dos. En realidad, este debería ser el botón dos y comenzar en rojo. Guardemos. Así que tenemos verde y rojo para los botones. Con HTML5, tenemos la opción de tener pequeños triángulos, así que podemos configurar un triángulo hacia arriba y un triángulo hacia abajo. Añadamos ese pequeño triángulo negro y añadamos el valor hexadecimal o estamos añadiendo el contenido del texto y guardamos eso.
Esto en realidad ahora necesita estar en nuestro HTML porque estamos llamando al indicador, el indicador hacia arriba. O en realidad es el indicador hacia abajo, así que también necesitamos actualizar y añadir un indicador hacia arriba. Déjame copiar y pegar el indicador hacia abajo en el botón de texto y actualizar eso a uno. Ese es el indicador hacia abajo. También necesitamos actualizarlo y tener el indicador hacia arriba, así que seleccionando el indicador hacia arriba será este valor hexadecimal para el indicador hacia arriba. Dejemos que se actualice. Así que tenemos arriba y abajo para los indicadores. Puedes usar los símbolos que quieras. Esto fue solo con fines de demostración. Así obtenemos algún tipo de indicadores para mostrar qué harán estos botones.
A continuación, haremos que los botones sean interactivos y enviaremos información de vuelta a la hoja de cálculo. Así que adelante, actualiza tu proyecto desde la máquina local y haz que envíe y actualice la salida desde la hoja de cálculo. Estos son datos en vivo, así que incluso puedes regresar aquí y probarlo; está en vivo. Y cuando regreses y actualices, actualizará el contenido en consecuencia. Viene directamente de la hoja de cálculo; cada vez que se carga la página, hace la solicitud al punto final, obtiene los datos del punto final y los recorre. Una vez que realiza la solicitud `fetch` y la devuelve, usa JavaScript para construir el contenido de la página y generarlo en la página.
Añade eso a tu proyecto. Y lo que viene a continuación es la interacción que vamos a crear. Eso aún está por llegar.
Comments
Post a Comment