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
// TODO write your code here
// console.log("Connected!")
const cardTemplate = document.querySelector('#cardTemplate');
const cardsContainer = document.getElementById('cardsContainer');

const infoTemplate = document.getElementById('infoTemplate');
const infoContainer = document.getElementById('infoContainer');

// console.log(cardsContainer)

const url = "https://pokeapi.co/api/v2/pokemon?limit=151"

// Asynchronously
fetch(url) // Make the HTTP request
  .then(response => response.json()) // parse the response
  .then((data) => { // play with the actual data
    console.log(data.results) // an array of objects
    data.results.forEach((pokemon) => {
      // console.log(pokemon)
      // console.log(pokemon.name)
      fetch(pokemon.url)
        .then(response => response.json())
        .then((pokemonData) => {
          // console.log(pokemonData.sprites.front_default)
          // Clone the template, including the inner tags
          const clone = cardTemplate.content.cloneNode(true)
          const header = clone.querySelector('h2')
          header.textContent = pokemon.name
          clone.querySelector('img').src = pokemonData.sprites.front_default
          // console.log(clone)
          // 1. select the element
          // 2. Add an event listener
          clone.querySelector('a').addEventListener('click', (event) => {
            const infoClone = infoTemplate.content.cloneNode(true)
            console.log(infoClone);
            infoClone.querySelector('h2').textContent = pokemon.name
            infoClone.querySelector('img').src = pokemonData.sprites.front_shiny
            // console.log(pokemonData.types[0].type.name);
            const typeNames = [];
            // 1. iterate over the types array
            pokemonData.types.forEach((pokemonType) => {
              // 2. access the name for each one of the types
              // console.log(pokemonType.type.name)
              // 3. store the name inside an array
              typeNames.push(pokemonType.type.name)
            })
            // console.log(typeNames.join("/"))
            // 4. Join them together and display
            infoClone.querySelector('p').textContent = typeNames.join("/")

            // clean the info container
            infoContainer.innerHTML = '';

            infoContainer.appendChild(infoClone)
          })
          // 3. when the event happens we can perform our manipulations
          cardsContainer.appendChild(clone)
        })
    })
  })

// console.log('HELLO!')
// Added to display asynchrounous request

## 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>
	// TODO write your code here
	// console.log("Connected!")
	const cardTemplate = document.querySelector('#cardTemplate');
	const cardsContainer = document.getElementById('cardsContainer');

	const infoTemplate = document.getElementById('infoTemplate');
	const infoContainer = document.getElementById('infoContainer');

	// console.log(cardsContainer)

	const url = "https://pokeapi.co/api/v2/pokemon?limit=151"

	// Asynchronously
	fetch(url) // Make the HTTP request
	.then(response => response.json()) // parse the response
	.then((data) => { // play with the actual data
	console.log(data.results) // an array of objects
	data.results.forEach((pokemon) => {
	// console.log(pokemon)
	// console.log(pokemon.name)
	fetch(pokemon.url)
	.then(response => response.json())
	.then((pokemonData) => {
	// console.log(pokemonData.sprites.front_default)
	// Clone the template, including the inner tags
	const clone = cardTemplate.content.cloneNode(true)
	const header = clone.querySelector('h2')
	header.textContent = pokemon.name
	clone.querySelector('img').src = pokemonData.sprites.front_default
	// console.log(clone)
	// 1. select the element
	// 2. Add an event listener
	clone.querySelector('a').addEventListener('click', (event) => {
	const infoClone = infoTemplate.content.cloneNode(true)
	console.log(infoClone);
	infoClone.querySelector('h2').textContent = pokemon.name
	infoClone.querySelector('img').src = pokemonData.sprites.front_shiny
	// console.log(pokemonData.types[0].type.name);
	const typeNames = [];
	// 1. iterate over the types array
	pokemonData.types.forEach((pokemonType) => {
	// 2. access the name for each one of the types
	// console.log(pokemonType.type.name)
	// 3. store the name inside an array
	typeNames.push(pokemonType.type.name)
	})
	// console.log(typeNames.join("/"))
	// 4. Join them together and display
	infoClone.querySelector('p').textContent = typeNames.join("/")

	// clean the info container
	infoContainer.innerHTML = '';

	infoContainer.appendChild(infoClone)
	})
	// 3. when the event happens we can perform our manipulations
	cardsContainer.appendChild(clone)
	})
	})
	})

	// console.log('HELLO!')
	// Added to display asynchrounous request
	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;
	}