Solve numeric keypad puzzle using javascript

Question

I was attending an interview a few days ago and the company gave me an puzzle to solve using Javascript, but I could not complete it.

You can see the code here:

$(document).ready(function(){
    $("#phone").find("button").mouseup(function(event){
        var button_pressed = $(event.currentTarget).data("value")
        $("#result").val(t9($("#result").val(),button_pressed))
    })
})
function t9(text,button_pressed){
    // Write your code here
    return text
}

#phone button{
    height: 50px;
    width: 75px;
}
#phone button span{
    display: block;
    margin-top: 5px;
    font-size: 10px;
}
#result{
    width: 225px;
    height: 25px;
    margin-left:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="phone">
    <tr>
        <td colspan="3">
            <input type="text" id="result" />
        </td>
    </tr>
    <tr>
        <td>
            <button data-value="1" class="key">1
                <span>. , !</span>
            </button>
        </td>
        <td>
            <button data-value="2" class="key">2
                <span>a b c</span>
            </button>
        </td>
        <td>
            <button data-value="3" class="key">3
                <span>d e f</span>
            </button>
        </td>
    </tr>
    <tr>
        <td>
            <button data-value="4" class="key">4
                <span>g h i</span>
            </button>
        </td>
        <td>
            <button data-value="5" class="key">5
                <span>j k l</span>
            </button>
        </td>
        <td>
            <button data-value="6" class="key">6
                <span>m n o</span>
            </button>
        </td>
    </tr>
    <tr>
        <td><button data-value="7" class="key">7
            <span>p q r s</span>
            </button>
        </td>
        <td>
            <button data-value="8" class="key">8
                <span>t u v</span>
            </button>
        </td>
        <td>
            <button data-value="9" class="key">9
                <span>w x y z</span>
            </button>
        </td>
    </tr>
    <tr>
        <td><button data-value="*" class="key">*</button></td>
        <td><button data-value="0" class="key">0</button></td>
        <td><button data-value="#" class="key">#</button></td>
    </tr>
</table>

Please run code snippet

Now,
Click 2 -> output should be -> a
Click 2 again -> output should be -> b
Click 2 again -> output should be -> c

Click 3 -> output should be -> c(+d) => cd
click 3 again -> output should be -> c(+e) => ce
click 3 after 2-3 second -> output should be -> ce(+d) => ced

longpress 1 -> output should be -> ced(+1) => ced1
longpress 2 -> output should be -> ced1(+2) => ced12
longpress 3 -> output should be -> ced12(+3) => ced123

finally when you..
click 1 -> output should be -> ced123(+".") => ced123.
click 1 again -> output should be -> ced123(+",") => ced123,
click 1 again -> output should be -> ced123(+"!") => ced123!

I could not find any solution for this kind of time related program. If you have enough time to help me solve it then I would be very grateful. If you have any guideline or any documentation related to this please provide me..

Answer 1

You only need to remember last time and last button and compare them to know whether you should "increment" a character or not.

The actual increment will be easier if you also remember the last index, but you can also get it from the last character of previous text if you want to.

As for the long press, it may be the real test because the code provided does not give you enough to detect that. Ultimately you need a mousedown to determine whether a long press has happened.

$(document).ready(function(){
    $("#phone").find("button").mouseup(function(event){
        var button_pressed = $(event.currentTarget).data("value");
        $("#result").val(t9($("#result").val(),button_pressed));
    }).mousedown( t9_down );
});

function t9(text,button_pressed){
    const { last_time, last_down, last_button } = t9, // Load states
        keys = [ '0', '.,!', 'abc', 'def', 'ghi', 'jkl', 'mno', 'pqrs', 'tuv', 'wxyz' ],
        long_press = 1000, // ms
        timeout = 2000; // ms
    let index = 0, // Which character?
        now = new Date().getTime(),
        candidates = keys[ button_pressed ] || button_pressed; // All characters
    // Handle complex buttons
    if ( candidates.length > 1 ) {
       if ( last_button === button_pressed && now - last_time <= timeout ) {
           // Quick click of same button
           const len = text.length - 1,
               last_char = text.charAt( len );
           index = ( candidates.indexOf( last_char ) + 1 ) % candidates.length;
           text = text.substr( 0, len );
       } else if ( now - last_down > long_press )
           // Long press
           now = candidates = button_pressed;
       // Save states
       Object.assign( t9, { last_time: now, last_down: 0, last_button: button_pressed } );
    }
    text += String( candidates )[ index ];
    return text;
}

function t9_down(event) {
    if ( ! ~~$(event.currentTarget).data("value") ) return;
    t9.last_down = new Date().getTime();
}

#phone button{
    height: 50px;
    width: 75px;
}
#phone button span{
    display: block;
    margin-top: 5px;
    font-size: 10px;
}
#result{
    width: 225px;
    height: 25px;
    margin-left:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="phone">
  <tr>
    <td colspan="3">
      <input type="text" id="result" />
  <tr>
    <td><button data-value="1" class="key">1<span>. , !</span></button>
    <td><button data-value="2" class="key">2<span>a b c</span></button>
    <td><button data-value="3" class="key">3<span>d e f</span></button>
  <tr>
    <td><button data-value="4" class="key">4<span>g h i</span></button>
    <td><button data-value="5" class="key">5<span>j k l</span></button>
    <td><button data-value="6" class="key">6<span>m n o</span></button>
  <tr>
    <td><button data-value="7" class="key">7<span>p q r s</span></button>
    <td><button data-value="8" class="key">8<span>t u v</span></button>
    <td><button data-value="9" class="key">9<span>w x y z</span></button>
  <tr>
    <td><button data-value="*" class="key">*</button>
    <td><button data-value="0" class="key">0</button>
    <td><button data-value="#" class="key">#</button>
</table>