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):
- 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.
- 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.