beverage-calculator.html

<!-- Created by: Kyle Shervington -->

<!-- Description: A tool that allows users to calculate how many drinks will be needed for their event, based on event duration and number of guests -->
<!-- Client: Twyst Cocktail -->
<!-- Business Contact: Najee Wooten -->

<style>
    input {
        width: 50%;
        background: none;
        border: none;
        border-bottom: solid 1px gray;
    }

    table {
        width: 100%;
        text-align: center;
        background-color: rgba(61, 68, 53, 0.9);
        border-color: #3D4435;
        color: white;
        border-radius: 20px 0px 20px 0px;
        border-style: hidden;
    }

    table th {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 20px 0px 0px 0px;
    }

    #drink-guest-form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-bottom: 10px;
        gap: 15px;
    }

    #drink-guest-form div {
        display: flex;
        flex-direction: column;
        padding: 0px 10px 0px 0px;
        width: 40%;
    }

    #wineCount,
    #beerCount,
    #spiritCount,
    #alcFreeCount {
        font-size: 1.25em;
    }

    #toggle-container {
        width: 100%;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }

    #toggle-container>div {
        display: flex;
        flex-direction: row;
        width: 30%;
        border: 1px solid black;
        font-size: 0.75em;
    }

    #reset-button {
        position: absolute;
        right: 0;
        cursor: pointer;
        padding: 7px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        color: rgba(0, 0, 0, 0.6);
        background-color: rgba(0, 0, 0, 0.15);
        font-family: sans-serif;
        font-weight: bold;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    #reset-button:hover {
        background-color: rgb(0, 0, 0);
        color: white;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .subtext {
        color: #b0b0b0;
        font-size: 0.75em;
    }

    .toggle-button {
        flex: 1;
        text-align: center;
        padding: 0px;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .active {
        background-color: black;
        color: white;
    }

    #drink-guest-form .advanced {
        display: none;
    }

    /** RANGE INPUT STYLING **/
    /* template by deathangel908 on Stack Overflow */
    /*Chrome*/
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        input[type='range'] {
            overflow: hidden;
            -webkit-appearance: none;
            appearance: none;
            background-color: transparent;
        }

        input[type='range']::-webkit-slider-runnable-track {
            -webkit-appearance: none;
            height: 1rem;
        }

        input[type='range']::-webkit-slider-thumb {
            width: 0.75rem;
            -webkit-appearance: none;
            height: 1rem;
            cursor: ew-resize;
            background: #000000;
            box-shadow: -50rem 0 0 50rem rgba(61, 68, 53, 0.9);
        }

    }

    /* FF */
    input[type="range"]::-moz-range-progress {
        background-color: rgba(61, 68, 53, 0.9);
    }

    input[type="range"]::-moz-range-track {
        background-color: transparent;
    }

    /* IE */
    input[type="range"]::-ms-fill-lower {
        background-color: rgba(61, 68, 53, 0.9);
    }

    input[type="range"]::-ms-fill-upper {
        background-color: transparent;
    }

    /** END RANGE INPUT STYLING **/
</style>

<div>

    <button id="reset-button" onclick="ResetValues(event)">Reset</button>

    <div id="toggle-container">
        <div id="inner-toggle-container">
            <div class="toggle-button active" id="simple-button">Simple</div>
            <div class="toggle-button" id="advanced-button">Advanced</div>
        </div>

    </div>

    <div id="drink-guest-form">
        <div>
            <label for="eventDuration">Duration of event</label>
            <input type="number" placeholder="# of hours" name="eventDuration" id="eventDuration"
                onchange="updateEventDuration(event)" min="0" />
        </div>

        <div>
            <label for="guestCount"># of guests</label>
            <input type="number" placeholder="ex. 34" name="guestCount" id="guestCount"
                onchange="updateGuestCount(event)" min="0" />
        </div>

        <div class="advanced">
            <label for="wineGuestPercent"><span class="percent-text-display"></span>% of guests who prefer wine</label>
            <input type="range" name="wineGuestPercent" id="wineGuestPercent" class="percent-range"
                onmouseup="setWineGuests(event)" ontouchend="setWineGuests(event)" min="0" max="100" value="0" />
        </div>

        <div class="advanced">
            <label for="beerGuestPercent"><span class="percent-text-display"></span>% of guests who prefer beer</label>
            <input type="range" name="beerGuestPercent" id="beerGuestPercent" class="percent-range"
                onmouseup="setBeerGuests(event)" ontouchend="setBeerGuests(event)" min="0" max="100" value="0" />
        </div>

        <div class="advanced">
            <label for="spiritGuestPercent"><span class="percent-text-display"></span>% of guests who prefer
                spirits</label>
            <input type="range" name="spiritGuestPercent" id="spiritGuestPercent" class="percent-range"
                onmouseup="setSpiritGuests(event)" ontouchend="setSpiritGuests(event)" min="0" max="100" value="0" />
        </div>

        <div class="advanced">
            <label for="alcFreeGuestPercent"><span class="percent-text-display"></span>% of guests who prefer
                mixers</label>
            <input type="range" name="alcFreeGuestPercent" id="alcFreeGuestPercent" class="percent-range"
                onmouseup="setAlcFreeGuests(event)" ontouchend="setAlcFreeGuests(event)" min="0" max="100" value="0" />
        </div>
    </div>

    <table border="1">
        <tr>
            <th colspan="3">Drink Breakdown</th>
        </tr>
        <tr>
            <td><span style="color:#f7ebb0">WINE</span><br>
                <span id="wineCount"></span><br>
                <span class="subtext">750 mL bottles</span>
            </td>
            <td><span style="color:#8fb2ff">BEER</span><br>
                <span id="beerCount"></span><br>
                <span class="subtext">12 oz. cans</span>
            </td>
            <td><span style="color:#c77a16">SPIRITS</span><br>
                <span id="spiritCount"></span><br>
                <span class="subtext">750 mL bottles</span>
            </td>
        </tr>
        <tr>
            <td><span style="color:#ffffff">MIXERS</span><br>
                <span id="alcFreeCount"></span><br>
                <span class="subtext">2 Liter bottles</span>
            </td>
            <td colspan="2">Total drinks to serve is: [<b><span id="totalDrinkCountDisplay"></span></b>]</td>
        </tr>
    </table>

</div>

<script>
    const AVG_DRINKS_PER_HOUR = 1.5;

    // Standard percentage preference for each drink type
    const STD_WINE_PREF = 0.35;
    const STD_BEER_PREF = 0.2;
    const STD_SPIRIT_PREF = 0.35;
    const STD_ALCFREE_PREF = 0.1;

    // Number of drinks you can get from a single bottle
    const SPIRIT_SERVING_PER_BOTTLE = 17.0;
    const WINE_SERVING_PER_BOTTLE = 5.0;
    const ALCFREE_SERVING_PER_BOTTLE = 8.0;

    const toggleContainer = document.querySelector('#toggle-container > div');
    const simpleButton = document.getElementById('simple-button');
    const advancedButton = document.getElementById('advanced-button');
    const advPercentageSliders = document.querySelectorAll('.percent-range');
    const percentTextArray = document.querySelectorAll('.percent-text-display');

    let eventDuration, guestCount;
    let advanced, advWineGuests, advBeerGuests, advSpiritGuests, advAlcFreeGuests;

    eventDuration = guestCount = 0;

    // By default, user is shown simple view
    advanced = false

    advWineGuests = advBeerGuests = advSpiritGuests = advAlcFreeGuests = 0;

    const updateDrinkBreakdown = (totalDrinks) => {

        if (advanced) {
            advDrinkBreakdownUpdate(totalDrinks);
            return;
        }

        let mixerBottles, bottlesOfSpirit;
        bottlesOfSpirit = Math.ceil(parseFloat(totalDrinks * STD_SPIRIT_PREF) / SPIRIT_SERVING_PER_BOTTLE);

        // Calculate # of bottles to be used as mixers, assuming 1:3 (spirit:mixer) ratio for cocktails
        // ** 750 mL per spirit bottle; 2000 mL per mixer bottle **
        mixerBottles = Math.ceil(((bottlesOfSpirit * 750.0) * 3.0) / 2000.0);

        document.getElementById('wineCount').innerText = Math.ceil(parseFloat(totalDrinks * STD_WINE_PREF) / WINE_SERVING_PER_BOTTLE);
        document.getElementById('beerCount').innerText = Math.ceil(parseFloat(totalDrinks * STD_BEER_PREF));
        document.getElementById('spiritCount').innerText = bottlesOfSpirit;
        document.getElementById('alcFreeCount').innerText = Math.ceil((parseFloat(totalDrinks * STD_ALCFREE_PREF) / ALCFREE_SERVING_PER_BOTTLE)) + mixerBottles;
    }

    const finalCalculation = () => {
        let numTotalDrinks;

        numTotalDrinks = Math.ceil(AVG_DRINKS_PER_HOUR * eventDuration) * guestCount;

        if (numTotalDrinks != 0) {
            document.getElementById('totalDrinkCountDisplay').innerText = numTotalDrinks;
            updateDrinkBreakdown(numTotalDrinks);
        }
    };

    const updateEventDuration = (e) => {
        eventDuration = e.target.value;
        finalCalculation();
    }

    const updateGuestCount = (e) => {

        // Set guest count; typecast because it will add as strings otherwise
        guestCount = e.target.value;

        // Recalculate # of guests 
        if (advanced) {
            advWineGuests = parseInt(parseFloat(document.getElementById('wineGuestPercent').value / 100) * guestCount);
            advBeerGuests = parseInt(parseFloat(document.getElementById('beerGuestPercent').value / 100) * guestCount);
            advSpiritGuests = parseInt(parseFloat(document.getElementById('spiritGuestPercent').value / 100) * guestCount);
            advAlcFreeGuests = parseInt(parseFloat(document.getElementById('alcFreeGuestPercent').value / 100) * guestCount);
        }

        finalCalculation();
    }

    // Toggle between simple and advanced mode
    const toggleInputMode = () => {

        let advancedInputs, displayToggle;

        // Select all inputs to be shown in the advanced mode
        advancedInputs = document.querySelectorAll('#drink-guest-form .advanced');

        // Toggle advanced boolean
        advanced = !advanced;
        // Determine whether advanced inputs will be shown or hidden
        displayToggle = advanced ? 'flex' : 'none';

        // Show or hide simple inputs
        switch (advanced) {
            case true:
                advancedButton.classList.add('active');
                simpleButton.classList.remove('active');
                break;

            case false:
                simpleButton.classList.add('active');
                advancedButton.classList.remove('active');
                break;
        }

        // Make each advanced input visible
        advancedInputs.forEach((input) => {
            input.style.display = displayToggle;
        });

        finalCalculation();
    }

    const setWineGuests = (e) => {
        advWineGuests = Math.ceil(parseFloat(e.target.value / 100) * guestCount);
        finalCalculation();
    }

    const setBeerGuests = (e) => {
        advBeerGuests = Math.ceil(parseFloat(e.target.value / 100) * guestCount);
        finalCalculation();
    }

    const setSpiritGuests = (e) => {
        advSpiritGuests = Math.ceil(parseFloat(e.target.value / 100) * guestCount);
        finalCalculation();
    }

    const setAlcFreeGuests = (e) => {
        advAlcFreeGuests = Math.ceil(parseFloat(e.target.value / 100) * guestCount);
        finalCalculation();
    }

    const advDrinkBreakdownUpdate = (totalDrinks) => {
        let mixerBottles, bottlesOfSpirit;
        let advWinePref, advBeerPref, advSpiritPref, advAlcFreePref;

        // Percentages of guest preferences derived from advanced input
        advWinePref = parseFloat(advWineGuests / guestCount);
        advBeerPref = parseFloat(advBeerGuests / guestCount);
        advSpiritPref = parseFloat(advSpiritGuests / guestCount);
        advAlcFreePref = parseFloat(advAlcFreeGuests / guestCount);

        bottlesOfSpirit = Math.ceil(parseFloat(totalDrinks * advSpiritPref) / SPIRIT_SERVING_PER_BOTTLE);

        // Calculate # of bottles to be used as mixers, assuming 1:3 ratio for cocktails
        // ** 750 mL per spirit bottle; 2000 mL per mixer bottle **
        mixerBottles = Math.ceil(((bottlesOfSpirit * 750.0) * 3.0) / 2000.0);

        document.getElementById('wineCount').innerText = Math.ceil(parseFloat(totalDrinks * advWinePref) / WINE_SERVING_PER_BOTTLE);
        document.getElementById('beerCount').innerText = Math.ceil(parseFloat(totalDrinks * advBeerPref));
        document.getElementById('spiritCount').innerText = bottlesOfSpirit;
        document.getElementById('alcFreeCount').innerText = Math.ceil((parseFloat(totalDrinks * advAlcFreePref) / ALCFREE_SERVING_PER_BOTTLE)) + mixerBottles;
    }

    // Switch between simple and advanced mode
    toggleContainer.addEventListener('click', () => {
        toggleInputMode();
    });

    let runningMax = 100;

    // Allows percentages to be shown as they are changing
    advPercentageSliders.forEach((elem, index) => {
        elem.addEventListener('input', (e) => {

            let currTotal = Array.from(advPercentageSliders)
                .filter((s, i) => i !== index)
                .reduce((acc, s) => acc + parseInt(s.value), 0);

            runningMax = 100 - currTotal;

            // Causes percentage slider to stop without exceeding 100% total for all percentages
            elem.value = elem.value <= runningMax ? elem.value : runningMax;

            // Change the percentage text shown in the UI
            elem.previousElementSibling.querySelector('span').innerText = elem.value;
        });
    });

    // Not working as expected; Causes 'NaN' in drink breakdown table
    const ResetValues = (event) => {

        event.target.value = 0;

        toggleInputMode();

        // Reset input fields
        document.getElementById('eventDuration').value = "";
        document.getElementById('guestCount').value = "";

        // Reset guest percentage sliders (advanced)
        advPercentageSliders.forEach((elem, index) => {
            elem.value = 0;
        });

        // Reset major values
        updateEventDuration(event);
        updateGuestCount(event);

        // Reset guest count values per drink type
        setWineGuests(event);
        setBeerGuests(event);
        setSpiritGuests(event);
        setAlcFreeGuests(event);

        // Reset table values
        updateDrinkBreakdown(0);
        document.getElementById('totalDrinkCountDisplay').innerText = 0;

        percentTextArray.forEach((elem) => {
            elem.innerText = 0;
        });
    }

</script>