Pokedex Test

Developer
Nick Hehr
Size
2,677 Kb
Views
26,312
  1. Pokedex Test Previews
  2. Pokedex Test HTML Codes
  3. Pokedex Test CSS Codes
  4. Pokedex Test JS Codes

How do I make an pokedex test?

This was made during a pair programming session with an interviewee using the Poke API (pokeapi.co) and whatever front-end tooling they wanted. . What is a pokedex test? How do you make a pokedex test? This script and codes were developed by Nick Hehr on 15 August 2022, Monday.

Pokedex Test Previews
IQ Test

Pokedex Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pokedex Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main class="pokedex">
</main>
<div class="templates"> <article class="pokemon"> <h2></h2> <img src="" /> <span class="poketype"></span> </article>
</div> <script src="js/index.js"></script>
</body>
</html>

Pokedex Test - Script Codes CSS Codes

.pokedex .pokemon { width: 100%; background: #CCCCCC;
}
.pokedex .pokemon h2 { text-align: center; width: 100%; text-transform: capitalize;
}
.pokedex .pokemon img { width: 100%;
}
.pokedex .pokemon .poketype { display: block; text-align: center; text-transform: capitalize;
}

Pokedex Test - Script Codes JS Codes

(function() { var model = { list : "http://pokeapi.co/api/v2/pokemon/", pokemonList : [] /* pokemon : [{ "name": "", "url": "", "imageSrc": "" }] */ }; var controller = (function() { var pokedexElement = document.querySelector(".pokedex"), pokemonElementPointer = document.querySelector(".templates .pokemon"); function getData(url, callback) { var request = new XMLHttpRequest(); request.open('GET', url, true); request.send(); request.onload = callback; } function parseNames(progressEvent) { if (this.status === 200) { useNames(JSON.parse(this.responseText)['results']); } else { throw new Error("Bad request: " + this.status); } } function loadPokedex() { getData(model.list, parseNames); } function useNames(pokemonList) { pokemonList.forEach(function(pokemon) { getData(pokemon.url, parsePokemon); }); } function parsePokemon() { if (this.status === 200) { insertPokemonOnPage(JSON.parse(this.responseText)); } else { throw new Error("Bad request: " + this.status); } } function insertPokemonOnPage(pokemon) { var name = pokemon.name, sprite = pokemon.sprites.front_default, poketype = pokemon.types[0].type.name, pokemonElement = pokemonElementPointer.cloneNode(true); pokemonElement.querySelector("h2").innerHTML = name; pokemonElement.querySelector("img").src = sprite; pokemonElement.querySelector(".poketype").innerHTML = poketype; pokedexElement.appendChild(pokemonElement); } return { "loadPokedex" : loadPokedex }; })(); controller.loadPokedex();
})();
Pokedex Test - Script Codes
Pokedex Test - Script Codes
Home Page Home
Developer Nick Hehr
Username HipsterBrown
Uploaded August 15, 2022
Rating 3
Size 2,677 Kb
Views 26,312
Do you need developer help for Pokedex Test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nick Hehr (HipsterBrown) Script Codes
Name
DogSight.js
A Sexy Button Hover
Triangular Pattern Background
Playing with React-Motion
SVG Basics
The CodePen Quiz
Lettering Pure JS
ATOM Icon in CSS and Animated
CSS Icons
Hexagonal Icon Backgrounds in CSS
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!