Cup Pyramid Calculator

The first challenge I set for myself when I first wanted to be become a front-end dev.

by db_dev

HTML

<body>
    <h3>Cup Pyramid Calculator</h3>

    <label for="cup">How many cups do you have?</label>
    <input type="text" name="cup" id="cupNumber">
    <button id="submit" type="button">Calculate</button>
    <p id="message" class="alert"></p>

    <div id="container"></div>
    <p id="output"></p>

SCSS

body {
    font-family: 'Open Sans', sans-serif;
}

.alert {
    color: #cc0000;
    font-size: 12px;
}

.row {
    border-top: solid 1px;
    border-bottom: solid 1px;
    line-height: 10px;
    padding: 0 12px 12px 0;
}

.rowNumber {
    display: block;
    padding: 12px 0;
}

.cupImg {
    border: solid 1px;
    display: inline-block;
    height: 50px;
    width: auto;
}

.missing {
    opacity: .3;
}
/*
    todo: Center cups
    Make it look like a pyramid

*/

JavaScript

$(function() {
    $("#submit").on("click", function() {
        ////todo: Add clear cups
        ////todo: Allow click "enter" event
        var userCup = $("#cupNumber").val();
        ////todo: Fail everything but a whole number
        ////todo: Rename userCup to be more descriptive
        if (userCup) {
            if (!isNaN(userCup)) {
                $("#message").text("");
                calcRows(userCup);
            } else {
                $("#message").text(userCup + " is not a number.");
            }
        } else {
            $("#message").text("Please enter a number.");
        }
    });
    ////todo: Redo as Cup object with properties
    function calcRows(userCup) {

        var cupRow = 0;
        var cupPerRow = 0;
        var cupGraphic = 0;
        ////todo: Rename PlaceHolder
        var placeHolder = 0;

        $("#container").html("");

        while (userCup > 0) {
            cupPerRow = cupPerRow + 1;
            userCup = userCup - cupPerRow; // This needs to increase by 1 each time
            cupRow = cupRow + 1;

            $("#container").append("<div class='row row_" + cupRow + "'><span class='rowNumber'>Row " + cupRow + "</span></div>");

            for (var i = 0; i < cupPerRow; i++) {
                placeHolder = (cupPerRow - i) + userCup;

                if (placeHolder <= 0) {
                    $(".row_" + cupRow).append("<img src='http://via.placeholder.com/50x50' title='Missing Cup' class='cupImg missing' data-cupNumber='" + placeHolder + "'>");
                } else {
                    $(".row_" + cupRow).append("<img src='http://via.placeholder.com/50x50' alt='User Cup' title='Cup #" + placeHolder + "' class='cupImg' data-cupNumber='" + placeHolder + "'>");
                }

            }

            console.log("Row = " + cupRow + " Cup Total = " + userCup + " Cups Needed = " + cupPerRow);
        }
        if (userCup < 0) {
            var nextCupRow = cupRow;
            var userCup =...