API DOM manipulation

Question

API DOM manipulation

144 Views Asked by OldsoulPhil At 10 April 2025 at 18:03

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JavaScript API</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Brenen's Pokedex</h1>
  <section>
    <div class="collection-heading">
      <h2>Collection</h2>
    </div>
    <div id="pokedex" class="collection-container">

    </div>
  </section>
  <section>
    <div class="favorites-heading">
      <h2>Favorites</h2>
    </div>
    <div id="pokedex-two" class="fav-container">

    </div>
  </section>
  <script src="script.js" async defer></script>
</body>

</html>

const pokedex = document.querySelector('#pokedex');
const pokedex2 = document.querySelector('#pokedex-two');
const allCards = document.getElementsByClassName('card');


console.log(pokedex);
console.log(pokedex2);
console.log(allCards);

const fetchPokemon = async () => {
  const url = `https://pokeapi.co/api/v2/pokemon?limit=30`;
  const res = await fetch(url);
  const data = await res.json();
  const pokemon = data.results.map((result, index) => ({
    ...result,
    id: index + 1,
    image: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index + 1}.png`
  }));
  displayPokemon(pokemon);
};

const displayPokemon = (pokemon) => {
  const pokemonHTMLString = pokemon.map((monster) =>
    `<div class="card">
    <img class="card-img" src='${monster.image}'/>
    <h2 class="card-title">${monster.id}.${monster.name}</h2>
  </div>
  `).join('');
  pokedex.innerHTML = pokemonHTMLString;
};

fetchPokemon();

I have built a function using async await to fetch data from an API. Then I would like to try and build an addEventListener function so that I can click on every childnode (div element)(pokemon card) to move from (div parent element) to another (div parent element). I have trouble trying to write out the functionality for the function. Please help!

Original Q&A

There are 1 best solutions below

**Bartosz Konikiewicz** · Answer 1

As @Daedalus has mentioned in a comment, you are using reduce incorrectly (perhaps filter and map as well). You could rewrite your function like this to obtain the desired result:

function getGreatestDiscoveryYear(data) {
  const occurrences = data.reduce((acc, curr) => {
    if (curr.discoveryYear in acc) {
      return { ...acc, [curr.discoveryYear]: acc[curr.discoveryYear] + 1 }
    }
    return { ...acc, [curr.discoveryYear]: 1 }
  }, {})

  const maxOccurrences = Math.max(...Object.values(occurrences))

  return Object.entries(occurrences).filter(([_, value]) => value === maxOccurrences).map(([key]) => key)
}

First, you use reduce on data to get an object which has discoveryYear as keys and number of discoveries as values. Then, you need to find which year is the most prevalent - I used Math.max to achieve it. Finally, you can print an array of discovery years with the most occurrences (please note that there may be many of them).

API DOM manipulation

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in API

Related Questions in DOM-EVENTS

Related Questions in ADDEVENTLISTENER

Related Questions in HTMLCOLLECTION

Trending Questions

Popular # Hahtags

Popular Questions