-
Notifications
You must be signed in to change notification settings - Fork 383
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1390 from Ketanop321/pokedex/gamepokedex
added pokedex game
- Loading branch information
Showing
5 changed files
with
221 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
# **Pokedex Game** | ||
|
||
<p>Pokédex - Bulbapedia, the community-driven Pokémon encyclopedia | ||
The Pokédex (Japanese: ポケモン図鑑 illustrated Pokémon encyclopedia) is an invaluable tool to Trainers in the Pokémon world. It gives information about all Pokémon in the world that are contained in its database, although it differs in how it acquires and presents information over the different media.</p> | ||
|
||
<br> | ||
|
||
## **Description 📃** | ||
This game provides various pokemons to choose from and score accordingly. | ||
- | ||
## **Functionalities 🎮** | ||
- Easy to play | ||
- Scoring system so that you can compare points with your friends. | ||
- Responsive design for most of the monitors. | ||
<br> | ||
|
||
## **How to play? 🕹️** | ||
- Your aim is to enter the name of the pokemon showing on the device screen. | ||
- You can use prev and next options to see next pokemon on the screen. | ||
|
||
<br> | ||
|
||
|
||
## **Screenshots 📸** | ||
|
||
<h3>Pokedox Game</h3> | ||
<img width="1440" alt="Screenshot 2023-07-22 at 12 53 26 PM" src="https://github.com/kunjgit/GameZone/assets/102572480/7f0a07c3-2c15-45d2-b2bd-71c4e6d19041"> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;500;600;700;800&display=swap'); | ||
|
||
* { | ||
margin: 0; | ||
padding: 0; | ||
box-sizing: border-box; | ||
font-family: 'Oxanium', cursive; | ||
} | ||
|
||
body { | ||
text-align: center; | ||
background: linear-gradient(to bottom, #6ab7f5, #fff); | ||
min-height: 100vh; | ||
overflow: hidden; | ||
} | ||
|
||
main { | ||
display: inline-block; | ||
margin-top: 2%; | ||
padding: 15px; | ||
position: relative; | ||
} | ||
|
||
.pokedex { | ||
width: 100%; | ||
max-width: 425px; | ||
} | ||
|
||
.pokemon_image { | ||
position: absolute; | ||
bottom: 55%; | ||
left: 50%; | ||
transform: translate(-63%, 20%); | ||
height: 18%; | ||
} | ||
|
||
.pokemon_data { | ||
position: absolute; | ||
font-weight: 600; | ||
color: #aaa; | ||
top: 54.5%; | ||
right: 27%; | ||
font-size: clamp(8px, 5vw, 25px); | ||
} | ||
|
||
.pokemon_name { | ||
color: #3a444d; | ||
text-transform: capitalize; | ||
} | ||
|
||
.form { | ||
position: absolute; | ||
width: 65%; | ||
top: 65%; | ||
left: 13.5%; | ||
} | ||
|
||
.input_search { | ||
width: 100%; | ||
padding: 4%; | ||
outline: none; | ||
border: 2px solid #333; | ||
border-radius: 5px; | ||
font-weight: 600; | ||
color: #3a444d; | ||
font-size: clamp(8px, 5vw, 1rem); | ||
box-shadow: -3px 4px 0 #888, -5px 7px 0 #333 | ||
} | ||
|
||
.buttons { | ||
position: absolute; | ||
bottom: 10%; | ||
left: 50%; | ||
width: 65%; | ||
transform: translate(-57%, 0); | ||
display: flex; | ||
gap: 20px; | ||
} | ||
|
||
.button { | ||
width: 50%; | ||
padding: 4%; | ||
border: 2px solid #000; | ||
border-radius: 5px; | ||
font-size: clamp(8px, 5vw, 1rem); | ||
font-weight: 600; | ||
color: white; | ||
background-color: #444; | ||
box-shadow: -2px 3px 0 #222, -4px 6px 0 #000; | ||
} | ||
|
||
.button:active { | ||
box-shadow: inset -4px 4px 0 #222; | ||
font-size: 0.9rem; | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
||
<!-- Links --> | ||
<link rel="icon" href="./favicons/favicon-16x16.png"> | ||
<link rel="stylesheet" href="./css/style.css"> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> | ||
<!-- Main JS --> | ||
<script defer src="./js/script.js"></script> | ||
|
||
<title>Pokédex</title> | ||
</head> | ||
<body> | ||
<div style="text-align: center; | ||
margin-top: 20px; | ||
font-size: 30px; "><a href="#"><i style="color:black;" class="fas fa-home home-icon"></i></a></div> | ||
<main> | ||
<img src="#" alt="pokemon" class="pokemon_image"> | ||
|
||
<h1 class="pokemon_data"> | ||
<span class="pokemon_number"></span> - | ||
<span class="pokemon_name"></span> | ||
</h1> | ||
|
||
<form class="form"> | ||
<input | ||
type="search" | ||
class="input_search" | ||
placeholder="Name or Number" | ||
required | ||
/> | ||
</form> | ||
|
||
<div class="buttons"> | ||
<button class="button btn-prev">Prev <</button> | ||
<button class="button btn-next">Next ></button> | ||
</div> | ||
|
||
<img src="./img/pokedex.png" alt="pokedex" class="pokedex"> | ||
</main> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
//initial variables | ||
const PokemonName= document.querySelector('.pokemon_name'); | ||
const PokemonNumber= document.querySelector('.pokemon_number'); | ||
const PokemonImage= document.querySelector('.pokemon_image'); | ||
const form = document.querySelector('.form'); | ||
const input = document.querySelector('.input_search'); | ||
const buttonPrev = document.querySelector('.btn-prev'); | ||
const buttonNext = document.querySelector('.btn-next'); | ||
|
||
let searchPokemon=1; | ||
//bring the data from the pokeApi | ||
const fetchPokemon = async (pokemon) => { | ||
const APIresponse = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon}`); | ||
if (APIresponse.status ===200){ | ||
const data= await APIresponse.json(); | ||
return data;} | ||
} | ||
|
||
const renderPokemon = async (pokemon)=>{ | ||
//waiting for the response of the api | ||
PokemonName.innerHTML = 'carregando...'; | ||
PokemonNumber.innerHTML = ''; | ||
|
||
const data = await fetchPokemon(pokemon); | ||
//select the info that we want from the api | ||
if(data){ | ||
PokemonName.innerHTML = data.name; | ||
PokemonNumber.innerHTML = data.id; | ||
PokemonImage.src = data['sprites']['versions']['generation-v']['black-white']['animated']['front_default']; | ||
input.value=''; | ||
} else{ | ||
// PokemonImage.style.display='none'; | ||
PokemonName.innerHTML = 'não encontrado :c'; | ||
PokemonNumber=''; | ||
} | ||
} | ||
//search the name of the pokemon from the search bar | ||
form.addEventListener('submit',(event) =>{ | ||
event.preventDefault(); | ||
renderPokemon(input.value.toLowerCase()); | ||
}); | ||
//button previous pokemon | ||
buttonPrev.addEventListener('click',(event) =>{ | ||
alert('prev clicked') | ||
}); | ||
//button next pokemon | ||
buttonNext.addEventListener('click',(event) =>{ | ||
alert('next clicked') | ||
}); | ||
|
||
renderPokemon(searchPokemon); | ||
|