Code Monkey home page Code Monkey logo

advanced-js-asynchronous-code's Introduction

logotipo de The Bridge

馃彴 鈿旓笍 Bikram

Introducci贸n

Un bikram es una combinaci贸n de ejercicios de programaci贸n para perfeccionar la conexi贸n entre el programador interior que llevas dentro y el alma del lenguaje de programaci贸n. Aprovecha los checkboxes en el enunciado para ir marcando que ejercicios llevas realizados.

Estas pruebas cubren un espectro de dificultad incremental, dotada de tests que cubrir谩n la correcta resoluci贸n para ayudarte a encontrar posibles errores en tu c贸digo.

La soluciones a los bikrams deber谩n hacerse en ./index.js y tienen que subirse a GitHub, adem谩s, deber谩 incluirse una captura de pantalla de los tests.

En esta ocasi贸n, el bikram se dividir谩 en 鈿旓笍 Pair Programming 鈿旓笍 y 馃彴 proyecto individual 馃彴

Iteraciones 鈿旓笍 Pair Programming 鈿旓笍

(Abre index.html para ver el resultado de los tests)

Dog API - Quiero un perrito, pero no se qu茅 raza escoger, 驴me ayudas?

Utiliza la API (https://dog.ceo/dog-api/) para resolver estos ejercicios.

  • 1.- Declara una funcion getAllBreeds que devuelva todas las razas de perro.

  • 2.- Declara una funci贸n getRandomDog que obtenga una imagen random de una raza.

  • 3.- Declara una funci贸n getAllImagesByBreed que obtenga todas las im谩genes de una raza.

  • 4.- Declara una funcion getAllImagesByBreed2(breed) que devuelva las im谩genes de la raza pasada por el argumento

GitHub API (I) - 驴Quieres saber mi informaci贸n? Aqu铆 la tienes

  • 5.- Declarara una funci贸n getGitHubUserProfile(username) que obtenga el perfil de usuario de github a partir de su nombre de usuario. (https://api.github.com/users/{username}).

  • 6.- Declara una funci贸n printGithubUserProfile(username) que reciba como argumento el nombre de un usuario (username), retorne {img, name} y pinte la foto y el nombre en el DOM.

  • 7. Crea una funci贸n getAndPrintGitHubUserProfile(username) que contenga una petici贸n a la API para obtener informaci贸n de ese usuario y devuelva un string que represente una tarjeta HTML como en el ejemplo, la estructura debe ser exactamente la misma:

<section>
    <img src="url de imagen" alt="imagen de usuario">
    <h1>Nombre de usuario</h1>
    <p>Public repos: (n煤mero de repos)</p>
</section>
  • 8.- Manipulaci贸n del DOM: Crea un input de tipo texto, y un bot贸n buscar. El usuario escribir谩 en el input el nombre de usuario de GitHub que quiera buscar. Despu茅s llamaremos a la funci贸n getAndPrintGitHubUserProfile(username) que se ejecute cuando se pulse el bot贸n buscar.(Esto no se testea).

GitHub API (II)- Promesas, promesas y m谩s promesas

  • 9.- Dada una lista de usuarios de github guardada en una array,crea una funcion fetchGithubUsers(userNames) que utilice 'https://api.github.com/users/${name}' para obtener el nombre de cada usuario.
    Objetivo: Usar Promise.all()
    Recordatorio: Una llamada a fetch() devuelve un objeto promesa.
    Pregunta. 驴cu谩ntas promesas tendremos?

Hasta que no se resuelvan todas las promesas desencadenadas por cada fetch(), no se cargar谩n los datos.

Pasos:

  • Mapear el array y hacer un fetch() para cada usuario. Esto nos de vuelve un array lleno de promesas.
  • Con Promise.all() har谩s que se tenga que resolver todo el proceso de peticiones a GitHub a la vez.
  • Cuando Promise.all() haya terminado: Consigue que se imprima por consola la url del repositorio de cada usuario. Consigue que se imprima por consola el nombre de cada usuario.

advanced-js-asynchronous-code's People

Contributors

guille-rubio avatar javierespinosap avatar

Watchers

 avatar

advanced-js-asynchronous-code's Issues

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.