JSFiddle - React, Tailwind, and code Playground

by kboucher

HTML

<input type="text" id="output" />

<ul class="buttons">
    <li><a data-value="1">1</a></li>
    <li><a data-value="2">2</a></li>
    <li><a data-value="3">3</a></li>
    <li><a data-value="4">4</a></li>
    <li><a data-value="5">5</a></li>
    <li><a data-value="6">6</a></li>
    <li><a data-value="7">7</a></li>
    <li><a data-value="8">8</a></li>
    <li><a data-value="9">9</a></li>
    <li><a data-value="*">*</a></li>
    <li><a data-value="0">0</a></li>
    <li><a data-value="#">#</a></li>
</ul>

<a class="reset">Clear</a>

CSS

body { padding: 1em; }

#output { font-size:1.6em; }

ul.buttons {
    display: block;
    margin-top: 1em;
    max-width: 300px;
}
ul.buttons li {
    background: #eee;
    float: left;
    margin: 1% 1% 0 0;
    width: 30%;
}
ul.buttons li a {
    cursor: pointer;
    display: block;
    height: 2em;
    line-height: 2em;
    text-align: center;
}

a.reset {
    background: #ccc;
    clear: left;
    cursor: pointer;
    display: block;
    float: left;
    margin: 1em 0 0;
    padding: 0.25em 0.5em;
}

JavaScript

$( document ).ready( function () {

    var $output = $( '#output' )
    
    $( 'ul.buttons a' ).unbind( 'click' ).bind( 'click', function () {

        var value = $( this ).attr( 'data-value' );
        $output.val( $output.val() + value );
    
    } );
    
    $( 'a.reset' ).unbind( 'click' ).bind( 'click', function () {

        $output.val( '' );
    
    } );

} );