PKMN

Developer
Ash
Size
3,802 Kb
Views
32,384
  1. PKMN Previews
  2. PKMN HTML Codes
  3. PKMN CSS Codes
  4. PKMN JS Codes

How do I make an pkmn?

What is a pkmn? How do you make a pkmn? This script and codes were developed by Ash on 09 August 2022, Tuesday.

PKMN Previews
IQ Test

PKMN - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>PKMN</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <div id="nonSelected" class="container"> </div> <div id="selected" class="container"> <div id="info"> <div class="btn save">SAVE PKMN</div> <div class="btn new">CLEAR PKMN</div> <div id="stats"></div> <div id="pokemon"> </div> </div> </div>
</div>
<!--container--> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

PKMN - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Hind);
body { font-family: 'Hind', sans-serif; background: linear-gradient(45deg, white 25%, #eee 25%, #eee 50%, white 50%, white 75%, #eee 75%); background-size: 50px 50px; animation: animatedBackground 40s linear infinite;
}
@keyframes animatedBackground { from { background-position: 0px 0px; } to { background-position: 0px 100vh; }
}
.wrap { margin: 20px auto; width: 50%; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; background: #eee; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.container { display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; flex-wrap: wrap;
}
#nonSelected { display: flex; min-width: 50%; flex-direction: row; align-items: stretch; justify-content: space-between; background-color: #ccc; padding: 10px; box-shadow: 4px 4px 1px rgba(0, 0, 0, 0.2); z-index: 99; position: relative; top: -10px; left: -10px;
}
#selected { min-width: 40%; flex-grow: 1; background-color: #eee; padding: 10px;
}
#stats { padding: 10px;
}
#info { display: block; flex-grow: 1; background-color: #fff; padding-top: 10px; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
}
img { object-fit: none; /* Do not scale the image */ object-position: center; /* Center the image within the element */ height: 90px; width: 90px;
}
.btn { background: #ddd; display: inline-block; padding: 2px 10px; margin: 5px; box-shadow: 5px 5px 1px rgba(0, 0, 0, 0.2);
}
.btn:hover { background: #eee; position: relative; top: 2px; left: 2px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
#pokemon { display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; flex-wrap: wrap;
}
.innerdiv { text-align: center;
}

PKMN - Script Codes JS Codes

var currentPokemon = 0;
var maxPokemon = 6;
$( document ).ready(function initial() { $("#stats").prepend(currentPokemon + " Pokemon Selected"); loadapi();
});
$("#nonSelected").on("click", (".innerdiv"), function move() { if ($(this).parent().attr("id") == "nonSelected" && currentPokemon < maxPokemon) { $(this).appendTo('#pokemon').addClass('.selectedimg'); currentPokemon++; console.log(currentPokemon); $("#stats").html(currentPokemon + " Pokemon Selected"); } else if (currentPokemon == maxPokemon) { $("#stats").html(currentPokemon + " Pokemon Selected Your team is full!"); }
});
$("#selected").on("click", (".innerdiv"), function moveback() { $(this).prependTo('#nonSelected').removeClass('.selectedimg');
currentPokemon--; console.log(currentPokemon); $("#stats").html(currentPokemon + " Pokemon Selected");
});
$("#selected").on("click", (".new"), function clear() { $(".innerdiv").prependTo('#nonSelected').removeClass('.selectedimg'); currentPokemon = 0; $("#stats").html(currentPokemon + " Pokemon Selected");
});
function loadapi() { console.log("We're ready!"); function letsGetPokemon() { for(wishedNo = 0; wishedNo < 10; wishedNo ++){ function getRandomPokemonID() { return Math.floor(Math.random() * (151 - 1)) + 1; } var pokeUrl = "http://pokeapi.co/api/v2/pokemon/" + getRandomPokemonID(); $.ajax({ url: pokeUrl, type: "GET", dataType: "json", success: function(data) { var pokeName = data.name, pokeSprite = data.sprites.front_default; $("#nonSelected").append ("<div class='innerdiv'>" +pokeName+ "<br><img src='" +pokeSprite+ "'></div>"); } }) .fail(function() { console.log("There was a problem handling the request"); }) .always(function() { console.log("The request finished"); }); }} letsGetPokemon();
};
PKMN - Script Codes
PKMN - Script Codes
Home Page Home
Developer Ash
Username littleginger
Uploaded August 09, 2022
Rating 3
Size 3,802 Kb
Views 32,384
Do you need developer help for PKMN?

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!

Ash (littleginger) Script Codes
Name
Cute Tags
Sky Clock
Contact form
Travel Site Demo
RSS Feed
Telescope
Codepen profile CSS
Cute Bunny
Pixel Cafe Menu
CSS Isometric Pokemon
Create amazing web content 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!