change button color on keypress for 2 seconds

Question

I have a div that has its background-color set to red now, when I press a key in my keyboard, let's say the number 1 key I want it to change color to green, and if i press it again I want it to change back to red.

This is not hard at all using something like jQuery. But in addition to this I want it to do the following:

If i press the same key in my keyboard (number 1) for 2 seconds I want it to change color to orange, but I want the color change to be animated like a css3 transition.

On top of this I want to be able to know when the transition is "finished" so I can change the color to blue.

But!! If the transition didn’t complete (i.e. the user didn’t press for at least 2 seconds) then I want the color to return to the original red.

Is this possible using jQuery? Or possible at all? Any help would be appreciated

Answer 1

yes it's possible with several things

switch from red to green on 1 pressed

• $(document).keypress(function(event) -> to check all key press on document
• "1" keyboard touch match to code 49

toggle class between red and green

    let classToAdd =  $('#my-elem').hasClass('green') ? 'red' : 'green';
    $('#my-elem').removeClass();
    $('#my-elem').toggleClass(classToAdd);

launch transition if 2 seconds press

here i launch a timeout when key 49 is pressed (launch after 2 secondes)

myTimeout = setTimeout(orangeTransition, 2000);

and cancel this timeout on key up

  $(document).keyup(function(event) {
    clearTimeout(myTimeout);
    myTimeout = undefined;
  });

pass to blue when transition end

you can listend to event transition end to launch a function whene transition finished

$('#my-elem').on("transitionend",

to continue normal color if transition not finished just let key press listener run as previously define

let myTimeout = undefined;

function orangeTransition() {
    $('#my-elem').removeClass();
    $('#my-elem').toggleClass('orange');
}

$('#my-elem')
.on("transitionend",
 function(e){
    $('#my-elem').removeClass();
    $('#my-elem').toggleClass('blue');
 });

$(document).keypress(function(event) {
  if (event.charCode === 49 && !myTimeout) {
    let classToAdd =  $('#my-elem').hasClass('green') ? 'red' : 'green';
    $('#my-elem').removeClass();
    $('#my-elem').toggleClass(classToAdd);
    myTimeout = setTimeout(orangeTransition, 2000);
  }
});

$(document).keyup(function(event) {
  clearTimeout(myTimeout);
  myTimeout = undefined;
});

.blue {
  background: blue;
}

.green {
  background: green;
}

.red {
  background: red;
}

.orange {
  background: orange;
  -webkit-transition: background 1000ms linear;
  -ms-transition: background 1000ms linear;
  transition: background 1000ms linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-elem" class="red">Press 1</div>