-
Notifications
You must be signed in to change notification settings - Fork 18
/
index.html
33 lines (33 loc) · 1.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>MonsterId.js</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript" src="build/monsterid.min.js"></script>
</head>
<body>
<a href="https://github.com/kevingaudin/monsterid.js" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
This page demonstrate's an implementation of the MonsterID concept only with browser compatible JavaScript.
<hr/>
<p>Generate your own monster. Summon him by name:</p>
<img id="yourMonster" class="avatar"/>
<br/>
<input placeholder="Your monster's name" type="text" id="monstername" onkeyup="MonsterId.getAvatar(this.value, document.getElementById('yourMonster'));"/>
<hr/>
<p>Here come the monsters : <button onclick="addMonsters()">Moar !</button></p>
<script type="text/javascript">
var monstercount = 0;
var addMonsters = function() {
var nbMonsters = monstercount + 100;
for(var i = monstercount; i < nbMonsters; i++) {
var avatar = document.createElement('img');
avatar.className = "avatar";
document.body.appendChild(avatar);
MonsterId.getAvatar("monster" + i, avatar);
monstercount++;
}
};
addMonsters();
</script>
</body>
</html>