JSFiddle - React, Tailwind, and code Playground

by Bryan Braun

HTML

<form>
    <label for="day">Day of Football Season: </label>
    <input id="day" placeholder="4, 19, etc." type="textfield" />
</form>
<p>Seth is wearing a: <span id="lucky-item"></span></p>

JavaScript

/*
  Key:
    Every 3rd day: Orange Bears hat
    Every 7th day: Blue Bears hat
    Common multiples: Jay Cutler Jersey
*/

/**
 * Given the day of the football season, return the lucky item being worn.
 *
 * @param int
 *   The day of the football season.
 * @return string
 *   The outfit being worn.
 */
function getLuckyItem(day) {
    if (day % 3 === 0) {
        if (day % 7 === 0) {
            return "Jay Cutler Jersey";
        }
        return "Orange Bears hat";
    } else if (day % 7 === 0) {
        return "Blue Bears hat";
    } else {
        return "Normal Outfit";
    }
}

/**
 * Utility function for determining if a value is a number.
 */
function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

/**
 * Controller for updating the UI.
 */
var luckyItem,
    field = document.getElementById("day");
    output = document.getElementById("lucky-item");

field.addEventListener("keyup", function(e){
    var day = field.value;
    console.log(day);
    if (isNumber(day) && day > 0) {
        luckyItem = getLuckyItem(day);
    } else {
        luckyItem = "";
    }
    
    output.innerHTML = luckyItem;
});