zeroclickinfo-goodies/share/goodie/calculator/content.handlebars

<div class="calculator--wrap tile--calculator" tabindex="0">
    <div class="tile__calc clearfix">
        <button class="tile__skip-calc">Skip calculator</button>
        <div class="tile__display">
            <div class="tile__display__aside--wrap">
                <span class="tile__display__aside" id="expression"></span>
            </div>
            <span class="tile__display__main" id="display"></span>

            <ul class="tile__options">
                <li class="tile__option tile__option__sci" data-tab="sci"><span>Scientific</span></li>
                <li class="tile__option tile__option__basic tile__option--active" data-tab="basic"><span>Basic</span></li>
                <li class="tile__option tile__option__history" data-tab="history" ><span>History</span></li>
            </ul>
        </div>

        <div class="tile__tabs">

            <!-- scientific keyboard -->
            <div class="tile__calc__col tile__tab__sci">
                <span class="tile__ctrl__toggle">
                    <span>RAD</span>
                    <label class="tile__ctrl__toggle-indicator">
                        <input type="checkbox" id="tile__ctrl__toggle-checkbox">
                        <div class="tile__ctrl__toggle-slider tile__ctrl__round-icon"></div>
                    </label>
                    <span>DEG</span>
                </span>
                <button class="tile__ctrl__btn" value="(">(</button>
                <button class="tile__ctrl__btn" value=")">)</button>

                <button class="tile__ctrl__btn" value="sin(">sin</button>
                <button class="tile__ctrl__btn" value="cos(">cos</button>
                <button class="tile__ctrl__btn" value="tan(">tan</button>
                <button class="tile__ctrl__btn" value="π">&#x3c0;</button>

                <button class="tile__ctrl__btn" value="!">x!</button>
                <button class="tile__ctrl__btn" value="<sup>2</sup>">x<sup>2</sup></button>
                <button class="tile__ctrl__btn" value="<sup>3</sup>">x<sup>3</sup></button>
                <button class="tile__ctrl__btn" value="<sup>□</sup>">x<sup>y</sup></button>

                <button class="tile__ctrl__btn" value="1/(">1/x</button>
                <button class="tile__ctrl__btn" value="&#x221A;(">&#x221A;x</button>
                <button class="tile__ctrl__btn" value="<sup>□</sup>&#x221A"><sup>x</sup>&#x221A;y</button>
                <button class="tile__ctrl__btn" value="EE">EE</button>

                <button class="tile__ctrl__btn" value="log(">log</button>
                <button class="tile__ctrl__btn" value="ln(">ln</button>
                <button class="tile__ctrl__btn" value="e<sup>□</sup>">e<sup>x</sup></button>
                <button class="tile__ctrl__btn" value="e">e</button>
            </div>

            <!-- numeric keyboard -->
            <div class="tile__calc__col tile__tab__basic">
                <button class="tile__ctrl__btn tile__ctrl--double" id="clear_button" value="C">C</button>
                <button class="tile__ctrl__btn tile__ctrl--ops" value="%">%</button>
                <button class="tile__ctrl__btn tile__ctrl--important" value="÷">&divide;</button>

                <button class="tile__ctrl__btn" value="7">7</button>
                <button class="tile__ctrl__btn" value="8">8</button>
                <button class="tile__ctrl__btn" value="9">9</button>
                <button class="tile__ctrl__btn tile__ctrl--important" value="×">&times;</button>

                <button class="tile__ctrl__btn" value="4">4</button>
                <button class="tile__ctrl__btn" value="5">5</button>
                <button class="tile__ctrl__btn" value="6">6</button>
                <button class="tile__ctrl__btn tile__ctrl--important" value="-">&minus;</button>

                <button class="tile__ctrl__btn" value="1">1</button>
                <button class="tile__ctrl__btn" value="2">2</button>
                <button class="tile__ctrl__btn" value="3">3</button>
                <button class="tile__ctrl__btn tile__ctrl--important" value="+">+</button>

                <button class="tile__ctrl__btn tile__ctrl--double" value="0">0</button>
                <button class="tile__ctrl__btn" value=".">.</button>
                <button class="tile__ctrl__btn tile__ctrl--important" value="=">=</button>
            </div>

            <!-- the ledger (history) section of the calculators UI -->
            <ul class="tile__calc__col tile__history"></ul>

        </div>
    </div>
</div>