Calculator Tools Calculator Tools
Create

Monster CCG

Nov 13, 2023

About this app

A fun and colorful collectible card game with real world monsters.

Monster CCG

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>Monster CCG</title>
<meta name="description" content="A fun and colorful collectible card game with real world monsters.">
<meta name="keywords" content="CCG, Monsters, Card Game, Web Game">

<link href="https://fonts.googleapis.com/css2?family=Rowdies&display=swap" rel="stylesheet">

<style>
/* App CSS Goes Here */
body {
font-family: 'Rowdies', cursive;
background: linear-gradient(to right, #ff9966, #ff5e62);
color: white;
}
.card {
background: #ffffff;
border-radius: 15px;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
padding: 20px;
margin: 20px;
text-align: center;
color: black;
}
.monster-icon {
font-size: 3em;
}
.monster-name {
font-size: 1.5em;
margin-top: 10px;
}
.monster-description {
font-size: 1em;
margin-top: 10px;
}
</style>

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.

let monsters = [
{name: 'Bigfoot', icon: '🦍', description: 'A large, hairy, muscular, bipedal ape-like creature.'},
{name: 'Loch Ness Monster', icon: '🐉', description: 'A large aquatic creature believed to inhabit Loch Ness in the Scottish Highlands.'},
{name: 'Yeti', icon: '🐻', description: 'A creature said to live in the Himalayan region of Nepal, Bhutan, and Tibet.'},
{name: 'Chupacabra', icon: '🐺', description: 'A legendary creature in the folklore of parts of the Americas.'},
{name: 'Mermaid', icon: '🧜‍♀️', description: 'An aquatic creature with the head and upper body of a female human and the tail of a fish.'}
];

// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
let mainContainer = document.getElementById('main-container');
for(let monster of monsters) {
let monsterCard = document.createElement('div');
monsterCard.className = 'card';
monsterCard.innerHTML = `
<span class="monster-icon">${monster.icon}</span>
<div class="monster-name">${monster.name}</div>
<div class="monster-description">${monster.description}</div>
`;
mainContainer.appendChild(monsterCard);
}
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
</head>
<body>
<div id="main-container" class="container">
<!-- App HTML Goes Here -->
</div>
</body>
</html>