Layering buttons when a number needs to be pressed more than once during an equation?

Question

I am very new to HTML5 (and web coding in general), and I am trying to create an interactive calculator. I will try to explain this as clearly as I can.

The basic idea is that the user will use pre-set equations to add numbers with the calculator. All of the buttons on the calculator will have an animated 'push down' effect, but the buttons that need to be pressed to perform the equation will light up one at a time after each successive button is pressed.

I'm getting stuck developing this when a number needs to be pressed more than once during an equation... i.e. 257+6732. - notice that the # 7 is used twice.

Here are my two ideas (both have failed):

1. In this example the #7 button would need to preform two functions (1st. light up the 'plus' button on the first click, and 2nd. light with the "three' button on the second click). I know that coding the button to perform two functions this way is possible, however, the button can ONLY be active at correct points in equation. During the remainder of the equation clicking the #7 button will not preform any function, and will only give an animated push down effect.

OR

1. The #7 button could be duplicated and on the first click the top button disappears. The 2nd #7 button would then stay hidden until the appropriate time during the equation. Again, the #7 button would have a grayed out appearance and only give an animated push down effect while the button is not in use.

Can anyone shed some light on this for me? I'm pulling my hair out over this. The entire design is complete and things look fantastic, but the value of this project is adding up to a POS until I can work out the coding.

Answer 1

You could handle the multiple states using colour. I'm unclear on how many states there are to handle but if I'm reading this right your buttons need these states: not-pressed-yet, pressed, needs-to-be-pressed and was-pressed.

• The not-pressed-yet should be plain
• The only one that should be 'pushed down' is 'pressed' or your users will be confused.
• The others you could treat more subtly, say, using:
  • a different background colour
  • a different border
  • a visual effect, such as pulsate

If a button is pressed and you need different action to happen you could make the action conditional on the style attributes. Alternatively, you could add a data tag to a given button with its state, say, <button data-state="needs-to-be-pressed">3</button> and make the action conditional on that attribute.

Do consider your end-user in this and don't make them think