0

I have a price calculation form which looks very basic. I want to make it look little better. Like the '+' and '-' button look like bootstrap button and having a shadow. I also want to have a subtle background, I can't think of any idea. Please someone help me. This is my basic price calculator.

Javascript code

<script type="text/javascript">
  function Total(qty, ud, total, value) {
    qty = document.getElementById(qty);
    ud > 0 ? qty.value++ : qty.value--;
    qty.value = Math.max(qty.value, 0);
    document.getElementById(total).value = qty.value * value;
  }

</script>
<style>
.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}
</style>

html code

  <div id="purhcaseForm">
    <form id="purchase1">

      <br> Please Select Number of Pages:
      <br>
      <input type='button' name='subtract' onclick='Total("qty",1,"total",8);' value='-' />
      <input type='button' name='add' onclick='Total("qty",1,"total",8);' value='+' />
      <input type='text' name='qty' id='qty' readonly=true value="0" />
     <span class="currencyinput">$<input type='text' name='total' id='total' value="0" /></span>
    </form>
  </div>

  <div id="purhcaseForm">
    <form id="purchase2">

      <br> Please Select Number of Pages:
      <br>
      <input type='button' name='subtract' onclick='Total("qty1",-1,"total1",7);' value='-' />
      <input type='button' name='add' onclick='Total("qty1",1,"total1",7);' value='+' />
      <input type='text' name='qty1' id='qty1' readonly=true value="0" />
      <span class="currencyinput">$ <input type='text' name='total1' id='total1' value="0" /></span>
    </form>
  </div>

  <div id="purhcaseForm">
    <form id="purchase3">

      <br> Please Select Number of Pages:
      <br>
      <input type='button' name='subtract' onclick='Total("qty2",-1,"total2",6);' value='-' />
      <input type='button' name='add' onclick='Total("qty2",1,"total2",6);' value='+' />
      <input type='text' name='qty2' id='qty2' readonly=true value="0" />
      <span class="currencyinput">$  <input type='text' name='total2' id='total2' value="0" /></span>
    </form>
  </div>

  <div id="purhcaseForm">
    <form id="purchase4">

      <br> Please Select Number of Pages:
      <br>
      <input type='button' name='subtract' onclick='Total("qty3",-1,"total3",5);' value='-' />
      <input type='button' name='add' onclick='Total("qty3",1,"total3",5);' value='+' />
      <input type='text' name='qty3' id='qty3' readonly=true value="0" />
      <span class="currencyinput">$ <input type='text' name='total3' id='total3' value="0" /></span>
    </form>
  </div>

</body>

closed as off-topic by JonW Jan 25 '17 at 18:22

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – JonW
If this question can be reworded to fit the rules in the help center, please edit the question.

1

Here's a mockup. No need for the boxes around the numbers, leads people to think they can type right in the box rather than clicking the buttons. Also adding some headings and labels to elaborate the distinction of each one.


mockup

download bmml source – Wireframes created with Balsamiq Mockups

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