Conectar la función con la descripción de personajes

Estos cursos cortitos y prácticos son fantásticos! Permiten poner en práctica todo lo que se aprende en cursos teóricos más largos.

Aquí se podrían desestructurar los datos que tenemos en el HTML y tener un código (en mi opinión) más lindo y se que se entiende más.
.

export const Character = async () => {

  const id = getHash();
  const character = await getData(id);

  const { image, name,  episode, status, species, gender, origin, location} = character;

  const view = `
    <div class="Characters-inner">
      <article class="Characters-card">
        <img src="${image}" alt="${name}">
        <h2>${name}</h2>
      </article>
      <article class="Character-card">
        <h3>Episodes: ${episode.length}</h3>
        <h3>Status: ${status}</h3>
        <h3>Species: ${species}</h3>
        <h3>Gender: ${gender}</h3>
        <h3>Origin: ${origin.name}</h3>
        <h3>Last Location: ${location.name}</h3>
      </article
    </div>
  `;
  return view;
};

.
Más info: https://github.com/FiliSantillan/Bits#bits

Si no les llegara a funcionar que les aparezca la info del personaje verifiquen que la URL de la API tenga el / al final

const API = 'https://rickandmortyapi.com/api/character/
'```

Este curso esta muy aspero!!! Creo que este y el de Jquery a Js abren un mundo de posibilidades para practicar con apps y APIs cuando uno esta comenzando.
Bien ahí!

Les comparto un problemita con el que me crucé, al momento de dar click a algún personaje no me aparecía l oque debería y me salía este error en consola:

El problema era que a la ruta de la API le faltaba un “/”, lo lo escribía así:

Y debería ser así:

Y voilà:

Lo cierto es que sí hay un refresh cuando se hace clic en la palabra 100tifi.co que está en el Header. Para evitarlo, cambien el valor del atributo href a # en vez de /:

<a href="#">100tifi.co</a>

De esta manera, el evento hashchange, que ejecuta la función router, es disparado.

Se continúa con el curso.

UNA HORA buscando un error de por qué no hacía fetch la data, me saltaba el catch de getData
Hasta que veo que usé comillas simples ’ ’ en vez de
Nada, eso
xd

Tenia el sgt problema: daba clic a un personaje y la URL cambiaba pero el contenido de la web no.

solucion: habia exportado los templates HOME y Character con parentesis al final y en el /routes no habia puesto los parentesis!

Los typos son hell cuando no los encuentras,jajaja pero justo cuando das con ello se vuelve el heaven, 😃

Me pueden apoyar con este error, me muestra el listado de personajes, pero al dar clic en uno especifico no muestra los detalles. Al inspeccionar el elemento me muestra estos errores la consola:

TypeError: character is undefined (main.js line 469 > eval:13:25)

Fetch Error SyntaxError: “JSON.parse: unexpected character at line 1 column 1 of the JSON data” (getData.js:12:13)

Mi archivo getData.js

const API = 'https://rickandmortyapi.com/api/character/';

const getData = async (id) => {
    const apiURL = id ? '${API}${id}' : API;
    try {
        const response = await fetch(apiURL);
        const data = await response.json();
        return data;
    } catch (error){
        console.log('Fetch Error', error);
    };
};

export default getData; 	

**
Mi archivo Characters.js**

import getHash from '../utils/getHash';
import getData from '../utils/getData';

const Character = async () => {
    const id = getHash();
    const character = await getData(id);
    const view = `
    <div class="Characters-inner">
        <article class="Characters-card">
            <img src="${character.image}" alt="${character.name}">
            <h2>${character.name}</h2>
        </article>
        <article class="Characters-card">
            <h3>Episodes: <span>${character.episode.length}</span></h3>
            <h3>Status: <span>${character.status}</span></h3>
            <h3>Species: <span>${character.species}</span></h3>
            <h3>Gender: <span>${character.gender}</span></h3>
            <h3>Origin: <span>${character.origin.name}</span></h3>
            <h3>Last Location: <span>${character.location.name}</span></h3>
        </article>
    </div>
    `;

    return view;
};

export default Character;

Dejo mi repositorio en el cual podrán encontrar una rama de cada clase.

https://github.com/ivallejo/Cientifico

https://github.com/ivallejo/Cientifico/tree/descripcionpersonaje

Solo me linkea el primer personaje, los demás renderiza el nombre y la foto pero no me da acceso a los detalles.

tuve errores pero bueno se soluciono y sirvió 😄

src/pages/Character.js

import getHash from '../utils/getHash';
import getData from '../utils/getData';

const Character = async () => {
    const id = getHash();
    const character = await getData(id);
    const view = `
    <div className="Characters-inner">
        <article className="Characters-card">
            <img src=${character.image} alt="${character.name}"/>
            <h2>${character.name}</h2>
            <article className="Characters-card">
                <h3>Episodes: <span>${character.episode.length}	</span></h3>
                <h3>Status: <span>${character.status}</span></h3>
                <h3>Species: <span>${character.species}</span></h3>
                <h3>Gender: <span>${character.gender}</span></h3>
                <h3>Origin: <span>${character.origin.name}</span></h3>
                <h3>Last location: <span>${character.location.name}</span></h3>
            </article>
        </article>
    </div>
    `;
    return view;
}

export default Character;

Es cierto que frameworks y librerías como React abstraen bastante el proceso de armado de una SPA, pero me pregunto si realmente vale la pena todo el hype que generan siendo JavaScipt vainilla una opción tan poderosa y completa. Hacer este curso me demostró lo impresionante que por sí mismo puede ser JavaScript.

Lo logré hacer solo y no estuvo tan diferente

Class 12: Conectar la función con la descripción de personajes

pages
	character.js

import getHash from '../utils/getHash';
import getData from '../utils/getData';

const Characer = async () => {
    const id = getHash();
    const character = await getData(id);
    const view = `
        <div class="Characters-inner">
            <article class="Characters-card">
                <img src="${character.image}" alt="${character.name}">
                <h2>${character.name}</h2>
            </article>
            <article class="Characters-card">
                <h3>Episodes: <span>${character.episode.length}</span></h3>
                <h3>Status: <span>${character.status}</span></h3>
                <h3>Species: <span>${character.especies}</span></h3>
                <h3>Gender: <span>${character.gender}</span></h3>
                <h3>Origin: <span>${character.origin.name}</span></h3>
                <h3>Last Location: <span>${character.location.name}</span></h3>
            </article>
        </div>
    `;
    return view;
}

export default Characer;

Banda estuve como 2 horas buscando un error y resulto siendo que escribi .lenght en lugar de .length en el archivo resolveRoutes.js Me quiero volver changoooo!!!

uff mi cerebro me duele :c

cuando estamos en los detalles del personaje y damos clic a link de 100tifi.co si se hace refresh. Esto es normal verdad!
porque oscar dijo que no tiene refresca. Me imagino que no tiene que refrescar para cargar los detalles !

import getHash from '../utils/getHash';
import getData from '../utils/getData';

const Character = async () => {
    const id = getHash();
    const character = await getData(id);

    const view = `
    <div class="Characters-inner">
        <article class="Character-card">
            <img src="${character.image}" alt"${character.name}">
            <h2>${character.name}</h2>
        </article>
        <article class="Character-card">
            <h3>Epsiodes:<span>${character.episode.length}</span></h3>
            <h3>Status:<span>${character.status}</span></h3>
            <h3>Species:<span>${character.species}</span></h3>
            <h3>Gender:<span>${character.gender}</span></h3>
            <h3>Origin:<span>${character.origin.name}</span></h3>
            <h3>Last Location:<span>${character.location.name}</span></h3>
        </article>
    </div>
    `;
    return view;
};

export default Character;```

Yo vengo del curso basico de Vue y al ver este otro, se estoy sintiendo muy bien afianzando conocimientos y relacionando, ya que este es como funciona React y Vue por debajo. Excelente.

Esto está muy genial

Vamos Genial 😄

ok muy bueno el curso

SUPER !!!

Genial, todo claro.

Me encanta como va quedando ❤️

Caharacter.js

import getHash from '../utils/getHash'
import getData from '../utils/getData'

const Character = async() => {

    const id = getHash();
    const character = await getData(id);
    const view = `
    <div class="Characters-inner">
        <article class="Characters-card">
            <img src="${character.image}" alt=""${character.name}">
            <h2>${character.name}</h2>
        </article class="Character-card">
            <h3>Episodes: <span>${character.episode.length}</span></h3>
            <h3>Status:  <span>${character.status}</span></h3>
            <h3>Species:  <span> ${character.species}</span></h3>
            <h3>Gender:   <span>${character.gender}</span></h3>
            <h3>Origin:  <span> ${character.origin.name}</span></h3>
            <h3>Last Location :  <span> ${character.location.name}</span></h3>
        <article>

        </article>
    </div>`;
    return view;

};
export default Character;```

Qué curso tan genial!!!

Genial. que gran curso, como yo lo veo es como una introducción muy básica de lo que sigue, React, Vue, Angular

Conectar la función con la descripción de personajes

Ahora debemos editar el archivo Character.js para mostrar el resultado del personaje.

import getHash from '../utils/getHash';
import getData from '../utils/getData';

const Character = async () => {
    const id = await getHash();
    const character = await getData(id);

    const view = `
    
    <div class="Character-inner">
        <article class="Characters-card">
            <img src="${character.image}" alt="${character.name}">
        </article>
        <h2>${character.name}</h2>

        <article class="Character-card">
            <h3>Episode: <span>${character.episode.length}</span></h3>
            <h3>Status: <span>${character.status}</span></h3>
            <h3>Species: <span>${character.species}</span></h3>
            <h3>Gender: <span>${character.gender}</span></h3>
            <h3>Origin: <span>${character.origin.name}</span></h3>
            <h3>Last Location: <span>${character.location.name}</span></h3>

        </article>

    </div>
    
    `
    return view;
}

export default Character;

Hola!, yo personalmente como reto, quise implementar todo el tema de routing en una clase, como se hace mas o menos en el curso de Router para SPA con JS si quieren ver como lo plantee aquí les dejo el repo, agradecería si lo ven y me dan feedback 😄. A lo mejor también les puede ayudar a entender mejor.

Les comparto también la clase con el router

Copié el código del profesor desde github y sigue saliendo “Error 404”. No era problema de mi código, alguien me puede ayudar?

import getHash from '../utils/getHash';
import getData from '../utils/getData';

const Character = async () => {
  const id = getHash();
  const character = await getData(id);
  const view = `
    <div class="Characters-inner">
      <article class="Characters-card">
        <img src="${character.image}" alt="${character.name}">
        <h2>${character.name}</h2>
      </article>
      <article class="Characters-card">
        <h3>Episodes: <span>${character.episode.length}</span></h3>
        <h3>Status: <span>${character.status}</span></h3>
        <h3>Species: <span>${character.species}</span></h3>
        <h3>Gender: <span>${character.gender}</span></h3>
        <h3>Origin: <span>${character.origin.name}</span></h3>
        <h3>Last Location: ${character.location.name}</h3>
      </article>
    </div>
  `;
  return view;
};

export default Character;

const API = 'https://rickandmortyapi.com/api/character/';

const getData = async (id) => {
  const apiURL = id ? `${API}${id}` : API;
  try{
    const response = await fetch(apiURL);
    const data = await response.json();
    return data;
  } catch(error){
    console.log('Fetch Error', error);
  };
};

export default getData;

Es de los pocos profesores que pongo en velocidad 1x

Ya esta funcionando la App, trae los personajes y los muestra correctamente. Vamos a configurar un archivo CSS para mejorar la presentación.