JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<div id="container">
    <form action="#" method="post" autocomplete="off" id="calc">
        <input type="text" id="character" name="character" autocomplete="off" />
    </form>
    <div id="suggestions">
    </div>
</div>

CSS

body {
    background: #eee;
    font-family: sans-serif;
}
#container {
    position: relative;
}
#character {
    margin-left: 20px;
}
#suggestions {
    background: #fff;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    display: none;
    position: absolute;
}
#suggestions li {
    cursor: default;
    display: block;
}
#suggestions li:hover {
    background: #08b;
    color: #fff;
}

JavaScript

function Character(name, initHP, initMP, minHP, maxHP, minMP, maxMP) {
    var self = this;

    this.name = name;
    this.initialHP = initHP;
    this.initialMP = initMP;
    this.minHP = minHP;
    this.maxHP = maxHP;
    this.minMP = minMP;
    this.maxMP = maxMP;

    this.getAverageHPByLevel = function(level) {
        return self.initialHP + ((self.minHP + self.maxHP) / 2) * (level - 1);
    };
}

var charInput = document.getElementById('character'),
    suggestionBox = document.getElementById('suggestions'),
    characters = [
        new Character("knight", 200, 100, 20, 30, 2, 8),
        new Character("sorcerer", 100, 100, 20, 30, 5, 15),
        new Character("priest", 100, 100, 20, 30, 5, 15),
        new Character("necromancer", 100, 100, 20, 30, 5, 15)
        ];

suggestionBox.style.left = charInput.offsetLeft + "px";
suggestionBox.style.width = charInput.offsetWidth + "px";

function itemClickHandler(i) {
    return function () {
        charInput.value = characters[i].name;
    };
}

function populateSuggestions() {
    var i, list = document.createElement('ul'),
        item;

    for (var i = 0; i < characters.length; i++) {
        item = document.createElement('li');
        item.appendChild(document.createTextNode(characters[i].name));
        item.onclick = itemClickHandler(i);
        list.appendChild(item);
    }
    suggestionBox.appendChild(list);
}

populateSuggestions();
charInput.onfocus = function () {
    suggestionBox.style.display = "block";
};
charInput.onblur = function () {
    setTimeout(function(){
    suggestionBox.style.display = "none";
    }, 100); // this is super ugly
};