Ygg
Ygg
PostsComments
RReactiflux
Created by Ygg on 3/8/2023 in #help-threads-react
✅ – Ygg – 22-32 Mar 8
Thanks for your time! Really helped!
10 replies
RReactiflux
Created by Ygg on 3/8/2023 in #help-threads-react
✅ – Ygg – 22-32 Mar 8
I'll learn more about it, I answered based on a quickly search. That's something I wasn't aware it even exist osfrog
10 replies
RReactiflux
Created by Ygg on 3/8/2023 in #help-threads-react
✅ – Ygg – 22-32 Mar 8
I see! So if I wrap the loading around it, it'll only re-render this component? Or I should wrap the whole page?
10 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
Just for the sake of reference in case anyone come here, it looks like this now 😄 
// draw poke cards at main page
function drawPokeCard(pokemon) {
  const { name, imgURL, types, id, mainType } = pokemon;
  const pokeNumber = "#" + lpad(id, 3, 0);

  // create ui
  const pokeCard = document.createElement("article");

  // add classes
  pokeCard.classList.add("pokemon", mainType);

  // draw the card
  pokemonList.append(pokeCard);
  pokeCard.innerHTML = `
      <div class="info">
        <p class="number">${pokeNumber}</p>
        <p class="name">${name}</p>
        <div class="types">
          ${types.map((type) => `<p class=${type}>${type}</p>`).join("")}
        </div>
      </div>
      <div class="image">
        <img
          src=${imgURL}
          alt=${name}
        />
      </div>`;

  // add event listener
  pokeCard.addEventListener("click", () => {
    drawModalWithPokemon(pokemon);

    toggleModal();
  });
}
// draw poke cards at main page
function drawPokeCard(pokemon) {
  const { name, imgURL, types, id, mainType } = pokemon;
  const pokeNumber = "#" + lpad(id, 3, 0);

  // create ui
  const pokeCard = document.createElement("article");

  // add classes
  pokeCard.classList.add("pokemon", mainType);

  // draw the card
  pokemonList.append(pokeCard);
  pokeCard.innerHTML = `
      <div class="info">
        <p class="number">${pokeNumber}</p>
        <p class="name">${name}</p>
        <div class="types">
          ${types.map((type) => `<p class=${type}>${type}</p>`).join("")}
        </div>
      </div>
      <div class="image">
        <img
          src=${imgURL}
          alt=${name}
        />
      </div>`;

  // add event listener
  pokeCard.addEventListener("click", () => {
    drawModalWithPokemon(pokemon);

    toggleModal();
  });
}
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
Much easier to work than trying to abstract everything bighmm
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
Damn, not a question but I realized that I could just create the <article> with .createElement and then add the rest with .innerHTML
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
Thank you very much for your time and Subone :3
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
also, I couldn't figure out how to make the types without innerHTML, is this okay? 
  // add types
  typesContainer.innerHTML = `${types
    .map((type) => `<p class=${type}>${type}</p>`)
    .join("")}`;
  // add types
  typesContainer.innerHTML = `${types
    .map((type) => `<p class=${type}>${type}</p>`)
    .join("")}`;
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
Wich is not a big deal, just wondering how I could improve this
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
I'm only asking because I had experience with React before and doing the opposite way going back to JS make it looks like I'm typing a lot
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
I could try to make a function to create new elements like @Liil' Boo sugested, but is it the best way?
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
But then comes the question... is there a better way to do it rather than doing it step by step?
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
The event listener finally worked as I wanted
  // add event listener
  pokeCard.addEventListener("click", () => {
    console.log("click");
  });
  // add event listener
  pokeCard.addEventListener("click", () => {
    console.log("click");
  });
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
I did it by myself today and achieve the same UI I had before with this 
function drawPokeCard(pokemon) {
  const { name, types, id, mainType } = pokemon;
  const imgURL =
    "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/";

  // create ui
  const pokeCard = document.createElement("article");
  const info = document.createElement("div");
  const number = document.createElement("p");
  const pokeName = document.createElement("p");
  const typesContainer = document.createElement("div");
  const type = document.createElement("p");
  const imgContainer = document.createElement("div");
  const img = document.createElement("img");

  // add classes
  pokeCard.classList.add("pokemon", mainType);
  info.classList.add("info");
  number.classList.add("number");
  pokeName.classList.add("name");
  typesContainer.classList.add("types");
  type.classList.add("type");
  imgContainer.classList.add("image");

  // add content
  number.innerText = "#" + lpad(id, 3, 0);
  pokeName.innerText = name;
  img.src = imgURL + id + ".png";
  img.alt = name;

  // draw the card
  pokemonList.append(pokeCard);
  pokeCard.append(info, imgContainer);
  info.append(number, pokeName, typesContainer);
  imgContainer.append(img);

  // add event listener
  pokeCard.addEventListener("click", () => {
    console.log("click");
  });

  // add types
  typesContainer.innerHTML = `${types
    .map((type) => `<p class=${type}>${type}</p>`)
    .join("")}`;
}
function drawPokeCard(pokemon) {
  const { name, types, id, mainType } = pokemon;
  const imgURL =
    "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/";

  // create ui
  const pokeCard = document.createElement("article");
  const info = document.createElement("div");
  const number = document.createElement("p");
  const pokeName = document.createElement("p");
  const typesContainer = document.createElement("div");
  const type = document.createElement("p");
  const imgContainer = document.createElement("div");
  const img = document.createElement("img");

  // add classes
  pokeCard.classList.add("pokemon", mainType);
  info.classList.add("info");
  number.classList.add("number");
  pokeName.classList.add("name");
  typesContainer.classList.add("types");
  type.classList.add("type");
  imgContainer.classList.add("image");

  // add content
  number.innerText = "#" + lpad(id, 3, 0);
  pokeName.innerText = name;
  img.src = imgURL + id + ".png";
  img.alt = name;

  // draw the card
  pokemonList.append(pokeCard);
  pokeCard.append(info, imgContainer);
  info.append(number, pokeName, typesContainer);
  imgContainer.append(img);

  // add event listener
  pokeCard.addEventListener("click", () => {
    console.log("click");
  });

  // add types
  typesContainer.innerHTML = `${types
    .map((type) => `<p class=${type}>${type}</p>`)
    .join("")}`;
}
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
Sorry, didn't saw your message before trying out today nervousr
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
I'll read it carefuly
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
So weird to be able to make this easily with React but when I go to the fundamentals I see I'm just a lil potato
30 replies
RReactiflux
Created by Ygg on 10/31/2022 in #help-js
✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
I know that this is really basic but is so abstract that my head is just spinnig right now lily
30 replies