Absolute Nonsense

by Cwalkdawg

HTML

<div id="input_numbers">

</div>
<div id="controls">

</div>
<div id="select_numbers">

</div>

CSS

.selected {
    background-color: #ff0000;
    font-weight: bold;
}

#controls {
    margin: 0 auto;
}

#select_numbers {
    margin: 0 auto;
}

#select_numbers span {
    padding: 4px;
    margin: 10px;
    border: solid thin black;
}

input[type=button] {
    margin: 10px;
    padding: 4px;
}

JavaScript

function populateSelectNumbers() {
    var selectNumbers = document.getElementById("select_numbers");
    for (var i = 0; i <= 9; i++) {
        let numEl = document.createElement("span");
        numEl.innerText = i;
        selectNumbers.append(numEl);
    }
}

function populateControls() {
    var controls = document.getElementById("controls"),
        plus = makeIncrementControl(3),
        push = makePushButton(),
        minus = makeIncrementControl(-2);

    controls.append(minus);
    controls.append(push);
    controls.append(plus);
}

function makeIncrementControl(incrementAmount) {
    var control = document.createElement("input"),
        display = incrementAmount >= 0 ? "+" + incrementAmount : incrementAmount;

    control.setAttribute("type", "button");
    control.setAttribute("value", display);
    control.addEventListener("click", incrementButtonEvent);
    control.incrementAmount = incrementAmount;

    return control;
}

function makePushButton() {
    var control = document.createElement("input");

    control.setAttribute("type", "button");
    control.setAttribute("value", "Add Number");
    control.setAttribute("id", "add_number");
    control.addEventListener("click", pushButtonEvent);

    return control;
}

function incrementButtonEvent(amount) {
    var select_numbers = document.getElementById("select_numbers");
}

function pushButtonEvent() {
    // what shitty code you have grandma...
    // all the better to write this quicker my dear

    try {
        var select_numbers = document.getElementById("select_numbers"),
            input_numbers = document.getElementById("input_numbers"),
            selected = select_numbers.getElementsByClassName("selected")[0],
            current = input_numbers.getElementsByTagName("span"),
            value = selected.innerText,
            add = document.createElement("span");

        if (current.length === 3) {
            input_numbers.append(createHyphen());
        } else if (current.length...