Giter VIP home page Giter VIP logo

dom-y-programacion-asincrona's Introduction

Ejercicios DOM y Programación Asíncrona

Setup:

npm install en este directorio

Ejercicio 1 "Piedra papel o tijera"

Agregar interactividad al juego en el archivo piedra-papel-o-tijera.js

Iniciar servidor: npm run parcel piedra-papel-o-tijera.html

Ejercicio 2 "Tabla de usuarios"

Recuperar datos de usuario de un endpoint externo y generar una tabla HTML que muestre los datos.

Iniciar servidor: npm run parcel tabla-de-usuarios.html

Al dar click en el botón Cargar Datos, hacer una petición ajax a https://jsonplaceholder.typicode.com/users usando axios.get: Ver documentación en https://github.com/axios/axios#axios-api

Esto devuelve un array con objetos de usuario. Usando este array renderizar una tabla para mostrar la información del usuario.

Si aun no saben usar axios y Promises o async/await pero quieren crear una tabla dinámicamente pueden usar un array hardcodeado con datos similares.

i.e.

const users = [{name: 'Pedro Picapiedra', phone: '5512345678'}, {name: 'Edna Moda', phone: '8765432155'}]

Recomendación se puede usar: element.addEventListener para generar un callback al dar click en el botón

element.innerHTML para convertir un string de html en html. Es decir, pueden generar la tabla como string luego insertarla en el DOM.

Usar interpolación de strings para generar los templates:

const myRow = `<tr>
  <td>${name}</td>
  <td>${phone}</td>
</tr>`

Ejercicio 2.1

Si terminaron el ejercicio anterior y no usaron el método de array .map, investigar la manera de usar este método para modificar su código y hacerlo en un estilo más funcional. Para será necesario crear una función que tome un objeto del array users y devuelva un string que sea el row html.

Para ver una solución en este sentido se puede estudiar: https://github.com/diegovdc/clase-consumo-de-apis/tree/solucion (ojo es la rama llamada solucion).

Ejercicio 3 "Login"

Usando el api de https://jsonplaceholder.typicode.com/ hacer un mock de un login de usuario, y al logear al usuario redigirilo a cualquier página de su elección.

dom-y-programacion-asincrona's People

Contributors

diegovdc avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.