0

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.

Improve this question
3
  • Do I understand it right that the '5' button has two cases (1: Inactive; 2: Active, highlight '7') and the '7' button has three cases (1: Inactive; 2: Active, highlight '3'; 3: Active, highlight '+')?
    – Bart van Ingen Schenau
    Jan 22, 2014 at 7:27
  • I don't think the individual buttons should be responsible for knowing what comes next. There should be a single component that understands what the current calculation is ("257+6732"), and that should be responsible for deciding which button to highlight at each step. The only responsibility that the buttons should have is to send a message (call a method) on that component to inform it when a button is pressed.
    – Dr. Wily's Apprentice
    Jan 22, 2014 at 15:20
  • Dr. Wily, I am too new to development to grasp this concept. What kind of component would I be able to create to understand the equation?
    – user115648
    Jan 23, 2014 at 2:45

1 Answer 1

Reset to default
0

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

Improve this answer
4
  • I really like to idea of creating actions for the buttons that are conditional on their style attributes. I am a designer, and trying to pick up on web development as quickly as I can, so coding this was sounds like a challenge for me... Here is a link to the .swf file that I created in flash the same design.
    – user115648
    Jan 23, 2014 at 2:37
  • ge.tt/52fLV1G1/v/0?c
    – user115648
    Jan 23, 2014 at 2:39
  • (I whited out most of the content, but click around and you'll find your way through) Is it possible to duplicate this design in HTML5 using actionscript snippets? If not it looks like I'll have another few weeks of sleeplessness trying to get a handle on coding, lol.
    – user115648
    Jan 23, 2014 at 2:42
  • Definitely possible to use HTML5. You'd have to rewrite the logic from actionscript to javascript. It's true you won't learn it in a day but it is the way to go presently.
    – Simon Minshall
    Jan 23, 2014 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.