Create a Fakémon
About this app
Create your own Fakémon by choosing its type, personality, color scheme, body shape, and abilities. Customize its name, dex entry, notable moves, and base stats.
Create a Fakémon
Related apps
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Create a Fakémon</title>
<meta name="description" content="Create your own Fakémon by choosing its type, personality, color scheme, body shape, and abilities. Customize its name, dex entry, notable moves, and base stats.">
<meta name="keywords" content="Fakémon, Pokémon, create, design, type, personality, color scheme, body shape, abilities, name, dex entry, notable moves, base stats">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Built-In Functions for Apps -->
<script type="text/javascript">
var localStoragePrefix = "ct-16923722967298";
var lastSave = 0;
// save to localstorage
function saveLocal(data) {
if (Date.now() - lastSave < 1000) {
return;
}
// save to cookie
let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict";
cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString();
document.cookie = cookie;
lastSave = Date.now();
}
// load from localstorage
function loadLocal() {
var cookiePrefix = localStoragePrefix + "=";
var cookieStart = document.cookie.indexOf(cookiePrefix);
if (cookieStart > -1) {
let cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd);
return JSON.parse(cookieData);
}
}
// Generate random ID
function generateId() {
var id = Math.random().toString(36).substr(2, 9);
return id;
}
</script>
<script type="text/javascript">
// App Javascript Goes Here
var fakemon = {
id: "",
type1: "",
type2: "",
personality: "",
colorScheme: [],
bodyShape: "",
abilities: [],
environment: "",
name: "",
dexEntry: "",
notableMoves: [],
baseStats: {}
};
function createFakemon() {
fakemon.id = generateId();
fakemon.type1 = prompt("Enter the primary type of your Fakémon (1 of 18 types):");
fakemon.type2 = prompt("Enter the secondary type of your Fakémon (leave blank if none or enter 1 of 18 types):");
fakemon.personality = prompt("Enter the personality of your Fakémon:");
for (let i = 0; i < 4; i++) {
let color = prompt("Enter color #" + (i + 1) + " of your Fakémon's color scheme:");
fakemon.colorScheme.push(color);
}
fakemon.bodyShape = prompt("Enter the body shape of your Fakémon:");
let abilityCount = prompt("Enter the number of abilities your Fakémon has (up to 3):");
for (let i = 0; i < abilityCount; i++) {
let ability = prompt("Enter ability #" + (i + 1) + " of your Fakémon:");
fakemon.abilities.push(ability);
}
if (abilityCount < 3) {
let addSignatureAbility = confirm("Would you like to add a signature ability for your Fakémon?");
if (addSignatureAbility) {
let signatureAbility = prompt("Enter the signature ability for your Fakémon:");
fakemon.abilities.push(signatureAbility);
}
}
renderFakemon();
}
function renderFakemon() {
let html = `
<h1>Create a Fakémon</h1>
<div>
<h2>Fakémon Details</h2>
<p>Type 1: ${fakemon.type1}</p>
<p>Type 2: ${fakemon.type2}</p>
<p>Personality: ${fakemon.personality}</p>
<p>Color Scheme: ${fakemon.colorScheme.join(", ")}</p>
<p>Body Shape: ${fakemon.bodyShape}</p>
<p>Abilities: ${fakemon.abilities.join(", ")}</p>
</div>
<div>
<h2>Customize Your Fakémon</h2>
<label for="environment">Environment:</label>
<input type="text" id="environment" placeholder="Enter the environment of your Fakémon"><br>
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter the name of your Fakémon"><br>
<label for="dexEntry">Dex Entry:</label>
<textarea id="dexEntry" placeholder="Enter the Dex entry of your Fakémon"></textarea><br>
<label for="notableMoves">Notable Moves:</label>
<input type="text" id="notableMoves" placeholder="Enter notable moves of your Fakémon"><br>
<label for="baseStats">Base Stats:</label>
<input type="number" id="hp" placeholder="HP" min="0" max="255">
<input type="number" id="atk" placeholder="Atk" min="0" max="255">
<input type="number" id="def" placeholder="Def" min="0" max="255">
<input type="number" id="spa" placeholder="SpA" min="0" max="255">
<input type="number" id="spd" placeholder="SpD" min="0" max="255">
<input type="number" id="spe" placeholder="Spe" min="0" max="255">
<button onclick="customizeFakemon()">Finish</button>
</div>
`;
$("#main-container").html(html);
}
function customizeFakemon() {
fakemon.environment = $("#environment").val();
fakemon.name = $("#name").val();
fakemon.dexEntry = $("#dexEntry").val();
let notableMoves = $("#notableMoves").val();
fakemon.notableMoves = notableMoves.split(",");
fakemon.baseStats = {
hp: $("#hp").val(),
atk: $("#atk").val(),
def: $("#def").val(),
spa: $("#spa").val(),
spd: $("#spd").val(),
spe: $("#spe").val()
};
renderFinalFakemon();
}
function renderFinalFakemon() {
let html = `
<h1>${fakemon.name}</h1>
<div>
<h2>Fakémon Details</h2>
<p>Type 1: ${fakemon.type1}</p>
<p>Type 2: ${fakemon.type2}</p>
<p>Personality: ${fakemon.personality}</p>
<p>Color Scheme: ${fakemon.colorScheme.join(", ")}</p>
<p>Body Shape: ${fakemon.bodyShape}</p>
<p>Abilities: ${fakemon.abilities.join(", ")}</p>
</div>
<div>
<h2>Customized Fakémon</h2>
<p>Environment: ${fakemon.environment}</p>
<p>Dex Entry: ${fakemon.dexEntry}</p>
<p>Notable Moves: ${fakemon.notableMoves.join(", ")}</p>
<p>Base Stats:</p>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: ${fakemon.baseStats.hp}%" aria-valuenow="${fakemon.baseStats.hp}" aria-valuemin="0" aria-valuemax="255">${fakemon.baseStats.hp}</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: ${fakemon.baseStats.atk}%" aria-valuenow="${fakemon.baseStats.atk}" aria-valuemin="0" aria-valuemax="255">${fakemon.baseStats.atk}</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: ${fakemon.baseStats.def}%" aria-valuenow="${fakemon.baseStats.def}" aria-valuemin="0" aria-valuemax="255">${fakemon.baseStats.def}</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: ${fakemon.baseStats.spa}%" aria-valuenow="${fakemon.baseStats.spa}" aria-valuemin="0" aria-valuemax="255">${fakemon.baseStats.spa}</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: ${fakemon.baseStats.spd}%" aria-valuenow="${fakemon.baseStats.spd}" aria-valuemin="0" aria-valuemax="255">${fakemon.baseStats.spd}</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: ${fakemon.baseStats.spe}%" aria-valuenow="${fakemon.baseStats.spe}" aria-valuemin="0" aria-valuemax="255">${fakemon.baseStats.spe}</div>
</div>
<button onclick="changeFakemon()">Change</button>
</div>
`;
$("#main-container").html(html);
}
function changeFakemon() {
createFakemon();
}
</script>
<style>
/* App CSS Goes Here */
h1 {
color: #ff69b4;
font-family: 'Pacifico', cursive;
text-align: center;
}
h2 {
color: #4b0082;
font-family: 'Roboto', sans-serif;
font-size: 18px;
margin-top: 20px;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 14px;
margin-bottom: 10px;
}
label {
display: block;
font-family: 'Roboto', sans-serif;
font-size: 14px;
margin-top: 10px;
}
input, textarea {
width: 100%;
padding: 5px;
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
button {
background-color: #4b0082;
color: #fff;
border: none;
padding: 10px 20px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
cursor: pointer;
}
.progress {
height: 20px;
margin-bottom: 10px;
}
.progress-bar {
background-color: #4b0082;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<script type="text/javascript">
createFakemon();
</script>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!