dedemenezes/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Pokémon Cards</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="data:image/x-icon;" type="image/x-icon" />
    <!-- bootstrap and fontawesome -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v6.1.2/css/all.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

    <!-- imported libraries go here -->
    <script type="importmap">
      {
        "imports": {}
      }
    </script>

    <!-- Import your own javascript -->
    <script src="lib/pokemon.js" type="module" defer></script>
  </head>
  <body class="bg-dark">
    <div id="app" class="container">
      <h1>Gotta Catch 'Em All</h1>
      <div class="two-columns">
        <div id="cardsContainer" class="grid"></div>

        <template id="cardTemplate">
          <div class="pokemon-card">
            <img class="pokemon-card-image" />
            <h2 class="pokemon-card-title"></h2>
            <p class="pokemon-card-subtitle"></p>
            <a class="pokemon-card-link"></a>
          </div>
        </template>

        <div id="infoContainer"></div>

        <template id="infoTemplate">
          <div class="info">
            <img class="pokemon-card-image" />
            <h2 class="pokemon-card-title"></h2>
            <p class="pokemon-card-subtitle"></p>
          </div>
        </template>
      </div>
    </div>
  </body>
</html>

## pokemon.js
// 1. Select the template element
const cardTemplate = document.querySelector("#cardTemplate")
// console.log(cardTemplate)
// console.log(cardTemplate.content)
const cardsContainer = document.querySelector('#cardsContainer')
// console.log(cardsContainer)

const infoTemplate = document.querySelector('#infoTemplate')
const infoContainer = document.querySelector('#infoContainer')

// 1. Get the list of pokemons from the api
// 2. Make a request to the api
// 3. Parse the JSON into a Javascript object
// 4. Get the template tag
// 5. USe the template to display the information
// 6. Display ALL the pokemons in the page

fetch("https://pokeapi.co/api/v2/pokemon?limit=151") // MAKE THE REQUEST
  .then(response => response.json()) // PARSE THE RESPONSE
  .then((data) => {
    console.log(data);
    // console.log(data.next);
    data.results.forEach((pokemon) => {
      // console.log(pokemon) //=> { name: 'aerodactyl', url: 'https://pokeapi.co/api/v2/pokemon/142/' }
      // console.log(pokemon.url)
      fetch(pokemon.url)
        .then(response => response.json())
        .then((pokemonInfo) => {
          // console.log(pokemonInfo.sprites.front_default)
          // 2. Clone the template (inner tags too)
          const cardClone = cardTemplate.content.cloneNode(true)
          // console.log(cardClone)
          // 3. Assign the value to the right tags
          // 3.1 select the right tag
          const header = cardClone.querySelector('h2')
          // 3.2 manipulate
          header.innerText = pokemon.name
          cardClone.querySelector('img').src = pokemonInfo.sprites.back_default
          // console.log(cardClone)
          // 4. Add it to the cards container
          cardClone.querySelector('a').addEventListener('click', (event) => {
            const infoClone = infoTemplate.content.cloneNode(true);
            infoClone.querySelector('h2').innerText = pokemon.name
            infoClone.querySelector('img').src = pokemonInfo.sprites.front_default
              // console.log(pokemonInfo.types[0].type.name)
            const typesArray = []
            pokemonInfo.types.forEach((typeObject) => {
              // console.log(typeObject.type.name)
              typesArray.push(typeObject.type.name)
            })
            // console.log(typesArray.join(", "))
            infoClone.querySelector('p').innerText = typesArray.join(", ")

            infoContainer.innerHTML = ''

            infoContainer.appendChild(infoClone)
          })
          // 5. Add an event listener to the a tag

          cardsContainer.appendChild(cardClone)
        })
    })
  })


console.log("DO YOU SEE THIS BEFORE DATA?")

## style.css
body {
  font-family: "Press Start 2P", cursive;
  color: #fff;
}

h1 {
  font-size: 2rem;
  text-align: center;
  margin: 2rem 0;
}

.two-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 768px) {
  .two-columns {
    grid-template-columns: 1fr;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17ch, 100%), 1fr));
  gap: 1rem;
}

.pokemon-card,
.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
  border: 10px solid #f7d25e;
  background: linear-gradient(45deg, #a4c8e2 0%, #6590b5 100%);
  background-size: 200% 200%;
  position: relative;
  color: #000;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
    background-position 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.pokemon-card:hover {
  /* 3D rotation animation   */
  transform: rotate3d(1, 0.5, 0.1, 30deg);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  background-position: 100% 50%;
  border-color: #f7d25e;
}

.pokemon-card-image {
  width: 100%;
}

.pokemon-card-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.info {
  height: 100vh;
  position: sticky;
  top: 0;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Pokémon Cards</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="shortcut icon" href="data:image/x-icon;" type="image/x-icon" />
	<!-- bootstrap and fontawesome -->
	<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
	crossorigin="anonymous"
	/>
	<link rel="stylesheet" href="style.css" />
	<link
	rel="stylesheet"
	href="https://use.fontawesome.com/releases/v6.1.2/css/all.css"
	/>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

	<!-- imported libraries go here -->
	<script type="importmap">
	{
	"imports": {}
	}
	</script>

	<!-- Import your own javascript -->
	<script src="lib/pokemon.js" type="module" defer></script>
	</head>
	<body class="bg-dark">
	<div id="app" class="container">
	<h1>Gotta Catch 'Em All</h1>
	<div class="two-columns">
	<div id="cardsContainer" class="grid"></div>

	<template id="cardTemplate">
	<div class="pokemon-card">
	<img class="pokemon-card-image" />
	<h2 class="pokemon-card-title"></h2>
	<p class="pokemon-card-subtitle"></p>
	<a class="pokemon-card-link"></a>
	</div>
	</template>

	<div id="infoContainer"></div>

	<template id="infoTemplate">
	<div class="info">
	<img class="pokemon-card-image" />
	<h2 class="pokemon-card-title"></h2>
	<p class="pokemon-card-subtitle"></p>
	</div>
	</template>
	</div>
	</div>
	</body>
	</html>
	// 1. Select the template element
	const cardTemplate = document.querySelector("#cardTemplate")
	// console.log(cardTemplate)
	// console.log(cardTemplate.content)
	const cardsContainer = document.querySelector('#cardsContainer')
	// console.log(cardsContainer)

	const infoTemplate = document.querySelector('#infoTemplate')
	const infoContainer = document.querySelector('#infoContainer')

	// 1. Get the list of pokemons from the api
	// 2. Make a request to the api
	// 3. Parse the JSON into a Javascript object
	// 4. Get the template tag
	// 5. USe the template to display the information
	// 6. Display ALL the pokemons in the page

	fetch("https://pokeapi.co/api/v2/pokemon?limit=151") // MAKE THE REQUEST
	.then(response => response.json()) // PARSE THE RESPONSE
	.then((data) => {
	console.log(data);
	// console.log(data.next);
	data.results.forEach((pokemon) => {
	// console.log(pokemon) //=> { name: 'aerodactyl', url: 'https://pokeapi.co/api/v2/pokemon/142/' }
	// console.log(pokemon.url)
	fetch(pokemon.url)
	.then(response => response.json())
	.then((pokemonInfo) => {
	// console.log(pokemonInfo.sprites.front_default)
	// 2. Clone the template (inner tags too)
	const cardClone = cardTemplate.content.cloneNode(true)
	// console.log(cardClone)
	// 3. Assign the value to the right tags
	// 3.1 select the right tag
	const header = cardClone.querySelector('h2')
	// 3.2 manipulate
	header.innerText = pokemon.name
	cardClone.querySelector('img').src = pokemonInfo.sprites.back_default
	// console.log(cardClone)
	// 4. Add it to the cards container
	cardClone.querySelector('a').addEventListener('click', (event) => {
	const infoClone = infoTemplate.content.cloneNode(true);
	infoClone.querySelector('h2').innerText = pokemon.name
	infoClone.querySelector('img').src = pokemonInfo.sprites.front_default
	// console.log(pokemonInfo.types[0].type.name)
	const typesArray = []
	pokemonInfo.types.forEach((typeObject) => {
	// console.log(typeObject.type.name)
	typesArray.push(typeObject.type.name)
	})
	// console.log(typesArray.join(", "))
	infoClone.querySelector('p').innerText = typesArray.join(", ")

	infoContainer.innerHTML = ''

	infoContainer.appendChild(infoClone)
	})
	// 5. Add an event listener to the a tag

	cardsContainer.appendChild(cardClone)
	})
	})
	})


	console.log("DO YOU SEE THIS BEFORE DATA?")
	body {
	font-family: "Press Start 2P", cursive;
	color: #fff;
	}

	h1 {
	font-size: 2rem;
	text-align: center;
	margin: 2rem 0;
	}

	.two-columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	}
	@media (max-width: 768px) {
	.two-columns {
	grid-template-columns: 1fr;
	}
	}

	.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17ch, 100%), 1fr));
	gap: 1rem;
	}

	.pokemon-card,
	.info {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	border-radius: 0.5rem;
	background-color: #fff;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
	border: 10px solid #f7d25e;
	background: linear-gradient(45deg, #a4c8e2 0%, #6590b5 100%);
	background-size: 200% 200%;
	position: relative;
	color: #000;
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
	background-position 0.2s ease-in-out, border-color 0.2s ease-in-out;
	}
	.pokemon-card:hover {
	/* 3D rotation animation */
	transform: rotate3d(1, 0.5, 0.1, 30deg);
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
	background-position: 100% 50%;
	border-color: #f7d25e;
	}

	.pokemon-card-image {
	width: 100%;
	}

	.pokemon-card-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	}

	.info {
	height: 100vh;
	position: sticky;
	top: 0;
	}