Skip to content

Commit

Permalink
Revised Options
Browse files Browse the repository at this point in the history
  • Loading branch information
@dantoniodi
dantoniodi committed Apr 3, 2024
1 parent 1852514 commit f02dd52
Show file tree
Hide file tree
Showing 16 changed files with 57 additions and 516 deletions.
0 .gitattributes → dex/.gitattributes
View file
File renamed without changes.
0 img/apple-touch-icon.png → dex/img/apple-touch-icon.png
View file
File renamed without changes
0 img/favicon-16x16.png → dex/img/favicon-16x16.png
View file
File renamed without changes
0 img/favicon-32x32.png → dex/img/favicon-32x32.png
View file
File renamed without changes
0 img/favicon.ico → dex/img/favicon.ico
View file
File renamed without changes.
0 img/site.webmanifest → dex/img/site.webmanifest
View file
File renamed without changes.
32 changes: 19 additions & 13 deletions v3/index.html → dex/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,19 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="apple-touch-icon" sizes="180x180" href="./img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16x16.png">
<link rel="manifest" href="./img/site.webmanifest">
<title>Pokédex</title>
</head>
<body>
<div class="container"></div>
<h1 class="title">Pokédex</h1>
<div class="options">
<h1 class="title">Pokédex</h1>
<div class="options">
<div>
<label for="optGen">Sort by:</label>
<select id="optGen">
<option value="" disabled selected>Any Generation</option>
<option value="0" disabled selected>Any Generation</option>
<option value="1">Gen I</option>
<option value="2">Gen II</option>
<option value="3">Gen III</option>
Expand All @@ -25,7 +29,7 @@ <h1 class="title">Pokédex</h1>
</select>
<label for="optType">or</label>
<select id="optType">
<option value="" disabled selected>Any Type</option>
<option value="0" disabled selected>Any Type</option>
<option value="1">Normal</option>
<option value="2">Fighting</option>
<option value="3">Flying</option>
Expand All @@ -45,16 +49,18 @@ <h1 class="title">Pokédex</h1>
<option value="17">Dark</option>
<option value="18">Fairy</option>
</select>
<span class="total"></span>
<div class="radio">
<input type="radio" id="form1" name="form" value="default" checked>
<label for="form1">Normal</label>
<input type="radio" id="form2" name="form" value="shiny">
<label for="form2">Shiny</label>
</div>
</div>
<ul class="pokedex"></ul>
<span class="total"></span>
<div class="radio" id="optView">
<input type="checkbox" id="sprite" name="sprite" value="gif" checked>
<label for="sprite">Animated</label>
</div>
<div class="radio" id="optForm">
<input type="checkbox" id="rarity" name="rarity" value="shiny">
<label for="rarity">Shiny</label>
</div>
</div>
<div class="container"></div>
</body>
</html>
<script src="main.js"></script>
0 main copy.js → dex/main copy.js
View file
File renamed without changes.
36 changes: 18 additions & 18 deletions main.js → dex/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
var chosenGen = 1;
var chosenType = 0;
var chosenForm = 'default';
var chosenView = 'gif';
var chosenForm = 'default';
const pokeContainer = document.querySelector('.container');
const optGen = document.querySelector('#optGen');
const optType = document.querySelector('#optType');
Expand Down Expand Up @@ -34,19 +34,15 @@ optType.addEventListener('change', (event) => {
})

optForm.addEventListener("click", function(event) {
if(event.target.value) {
pokeContainer.innerHTML = ''
chosenForm = event.target.value
chosenType != 0 ? getByType(chosenType) : getByGen(chosenGen)
}
pokeContainer.innerHTML = ''
chosenForm = event.target.checked ? event.target.value : 'default'
chosenType != 0 ? getByType(chosenType) : getByGen(chosenGen)
})

optView.addEventListener("click", function(event) {
if(event.target.value) {
pokeContainer.innerHTML = ''
chosenView = event.target.value
chosenType != 0 ? getByType(chosenType) : getByGen(chosenGen)
}
pokeContainer.innerHTML = ''
chosenView = event.target.checked ? event.target.value : 'png'
chosenType != 0 ? getByType(chosenType) : getByGen(chosenGen)
})

//unused just for info
Expand Down Expand Up @@ -121,6 +117,7 @@ const createCard = (poke) => {
let pokeTypes = poke.types.map(typeInfo => typeInfo.type.name)
let abilities = poke.abilities.map(pokeAbs => pokeAbs.ability.name)
let stats = poke.stats.map(pokeStats => pokeStats.base_stat)
let total = stats.reduce((a, b) => a + b, 0)
let color = pokeColors[pokeTypes[0]]
var txtAbs = '';

Expand All @@ -145,18 +142,21 @@ const createCard = (poke) => {
<div class="info">
<span class="number">#${number}</span>
<h3 class="name">${name}</h3>
<small class="type">${pokeTypes.join(' - ')}</small>
<small class="type">${pokeTypes.join(' • ')}</small>
</div>
</div>
<div class="back-card">
<h3>Abilities:</h3>${txtAbs}<br>
<h3>Base Stats:</h3>
<p><small>HP: </small>${stats[0]}</p>
<p><small>Attack: </small>${stats[1]}</p>
<p><small>Defense: </small>${stats[2]}</p>
<p><small>Sp. Attack: </small>${stats[3]}</p>
<p><small>Sp. Defense: </small>${stats[4]}</p>
<p><small>Speed: </small>${stats[5]}</p>
<ul>
<li>${stats[0]}<small> HP</small></li>
<li>${stats[1]}<small> Attack</small></li>
<li>${stats[2]}<small> Defense</small></li>
<li>${stats[3]}<small> Sp. Attack</small></li>
<li>${stats[4]}<small> Sp. Defense</small></li>
<li>${stats[5]}<small> Speed</small></li>
<li>${total}<small> Total</small></li>
</ul>
</div>
</div>`

Expand Down
19 changes: 15 additions & 4 deletions style.css → dex/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ h1 {

.options {
display: flex;
column-gap: 1rem;
margin-bottom: 20px;
column-gap: 3rem;
margin: 20px;
}

.container {
Expand All @@ -41,7 +41,7 @@ h1 {
}

.flip-card {
min-width: 160px;
min-width: 220px;
min-height: 280px;
perspective: 1000px;
border-radius: 10px;
Expand Down Expand Up @@ -79,6 +79,16 @@ h1 {
transform: rotateY(180deg);
}

.back-card ul {
list-style: none;
}

.back-card li small {
font-size: 0.6rem;
text-transform: uppercase;
margin-left: 5px;
}

.image {
background-color: rgba(255, 255, 255, 0.6);
border-radius: 50%;
Expand Down Expand Up @@ -116,12 +126,13 @@ h1 {

.name {
margin: 13px 0 7px;
font-size: 1.5rem;
letter-spacing: 1.5px;
text-transform: capitalize;
}

.type {
font-size: 0.7rem;
font-size: 0.8rem;
font-weight: bolder;
text-transform: uppercase;
}
Expand Down
70 changes: 5 additions & 65 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,10 @@
<!DOCTYPE html>
<html lang="pt-br">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="apple-touch-icon" sizes="180x180" href="./img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16x16.png">
<link rel="manifest" href="./img/site.webmanifest">
<title>Pokédex</title>
<meta http-equiv="refresh" content="0; URL='./dex/"/>
<title>Redirect</title>
</head>
<body>
<h1 class="title">Pokédex</h1>
<div class="options">
<div>
<label for="optGen">Sort by:</label>
<select id="optGen">
<option value="0" disabled selected>Any Generation</option>
<option value="1">Gen I</option>
<option value="2">Gen II</option>
<option value="3">Gen III</option>
<option value="4">Gen IV</option>
<option value="5">Gen V</option>
<option value="6">Gen VI</option>
<option value="7">Gen VII</option>
<option value="8">Gen VIII</option>
<option value="9">Gen IX</option>
</select>
<label for="optType">or</label>
<select id="optType">
<option value="0" disabled selected>Any Type</option>
<option value="1">Normal</option>
<option value="2">Fighting</option>
<option value="3">Flying</option>
<option value="4">Poison</option>
<option value="5">Ground</option>
<option value="6">Rock</option>
<option value="7">Bug</option>
<option value="8">Ghost</option>
<option value="9">Steel</option>
<option value="10">Fire</option>
<option value="11">Water</option>
<option value="12">Grass</option>
<option value="13">Electric</option>
<option value="14">Psychic</option>
<option value="15">Ice</option>
<option value="16">Dragon</option>
<option value="17">Dark</option>
<option value="18">Fairy</option>
</select>
</div>
<span class="total"></span>
<div class="radio" id="optForm">
<input type="radio" name="rarity[]" value="default" checked>
<label for="form1">Normal</label>
<input type="radio" name="rarity[]" value="shiny">
<label for="form2">Shiny</label>
</div>
<div class="radio" id="optView">
<input type="radio" name="style[]" value="gif" checked>
<label for="ord1">Animated</label>
<input type="radio" name="style[]" value="png">
<label for="ord2">Static</label>
</div>
</div>
<div class="container"></div>
</body>
</html>
<script src="main.js"></script>
<body></body>
</html>
27 changes: 0 additions & 27 deletions v2/app.js
View file

This file was deleted.

17 changes: 0 additions & 17 deletions v2/index.html
View file

This file was deleted.

Loading

0 comments on commit f02dd52

Please sign in to comment.