Calculator Tools Calculator Tools
Create

Create a Fakémon

Aug 12, 2026

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>