Can I make a Calculator with HTML?

Question

Programing

Answer 1

you can use this java script code but what you could do is change the color of any of this by wherever you see #_-_-_-_-_-_  (the # sign and six numbers and/or letters) and use any of these colors from the chart on this web site    http://lynda.com/hue.html    and putting in your own dimensions using either divs or tables you sould also add a no script tag

<script>

function compute(obj)

{obj.expr.value = eval(obj.expr.value)}

var one = '1'

var two = '2'

var three = '3'

var four = '4'

var five = '5'

var six = '6'

var seven = '7'

var eight = '8'

var nine = '9'

var zero = '0'

var plus = '+'

var minus = '-'

var multiply = '*'

var divide = '/'

var decimal = '.'

function enter(obj, string)

{obj.expr.value += string}

function clear(obj)

{obj.expr.value = ''}

</script>

<form name="calc">

<div align="center">

<center>

<table border="0" cellpadding="0" cellspacing="4">

<tr>

<td colspan="4">

<p align="center"><input size="12" name="expr" action="compute(this.form)" style="font-size: 12pt; background-color: #005090; color: #00FF00; border: 1 solid #FFFFFF"></p>

</td>

</tr>

<tr>

<td>

<p align="center"><input type="button" value=" 7 " onclick="enter(this.form, seven)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

</td>

<td>

<p align="center"><input type="button" value=" 8 " onclick="enter(this.form, eight)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

</td>

<td>

<p align="center"><input type="button" value=" 9 " onclick="enter(this.form, nine)" style="font-weight: bold; background-color: #005090; color: #FFFFFF; border: 1 solid #FFFFFF"></p>

</td>

<td>

<p align="center"><input type="button" value=" + " onclick="enter(this.form, plus)" style="background-color: #005090; color: #FFFFFF; border: 1 solid #FFFFFF"></p>

</td>

</tr>

<tr>

<td>

<p align="center"><input type="button" value=" 4 " onclick="enter(this.form, four)" style="font-weight: bold; background-color: #005090; color: #FFFFFF; border: 1 solid #FFFFFF"></p>

</td>

<td>

<p align="center"><input type="button" value=" 5 " onclick="enter(this.form, five)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

</td>

<td>

<p align="center"><input type="button" value=" 6 " onclick="enter(this.form, six)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

</td>

<td>

<p align="center"><input type="button" value=" - " onclick="enter(this.form, minus)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

</td>

</tr>

<tr>

<td>

<p align="center"><input type="button" value=" 1 " onclick="enter(this.form, one)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

</td>

<td>

<p align="center"><input type="button" value=" 2 " onclick="enter(this.form, two)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

</td>

<td>

<p align="center"><input type="button" value=" 3 " onclick="enter(this.form, three)" style="font-weight: bold; background-color: #005090; color: #FFFFFF; border: 1 solid #FFFFFF"></p>

</td>

<td>

<p align="center"><input type="button" value=" x " onclick="enter(this.form, multiply)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

</td>

</tr>

<tr>

<td colspan="2">

<p align="center"><input type="button" value=" 0 " onclick="enter(this.form, zero)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

</td>

<center>

<td>

<p align="center"><input type="button" value=" . " onclick="enter(this.form, decimal)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

</td>

<td>

<p align="center"><input type="button" value=" %" onclick="enter(this.form, divide)" style="background-color: #005090; color: #FFFFFF; border: 1 solid #FFFFFF"></p>

</td>

</tr>

</center>

<tr>

<td colspan="2">

<p align="center"><input type="button" value=" = " onclick="compute(this.form)" style="background-color: #00A800; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

</td>

<td colspan="2">

<p align="right"><input type="reset" value=" AC " onclick="clear(this.form)" style="background-color: #FF3300; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

</td>

</tr>

</table>

</center>

</div>

</form>

Answer 2

no,but you can do this with combination of html and java script, this is good example:

<script>

function compute(obj)

   {obj.expr.value = eval(obj.expr.value)}

var one = '1'

var two = '2'

var three = '3'

var four = '4'

var five = '5'

var six = '6'

var seven = '7'

var eight = '8'

var nine = '9'

var zero = '0'

var plus = '+'

var minus = '-'

var multiply = '*'

var divide = '/'

var decimal = '.'

function enter(obj, string)

   {obj.expr.value += string}

function clear(obj)

   {obj.expr.value = ''}

</script>

<form name="calc">

  <div align="center">

    <center>

    <table border="0" cellpadding="0" cellspacing="4">

      <tr>

        <td colspan="4">

          <p align="center"><input size="12" name="expr" action="compute(this.form)" style="font-size: 12pt; background-color: #005090; color: #00FF00; border: 1 solid #FFFFFF"></p>

        </td>

      </tr>

      <tr>

        <td>

          <p align="center"><input type="button" value=" 7 " onclick="enter(this.form, seven)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

        </td>

        <td>

          <p align="center"><input type="button" value=" 8 " onclick="enter(this.form, eight)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

        </td>

        <td>

          <p align="center"><input type="button" value=" 9 " onclick="enter(this.form, nine)" style="font-weight: bold; background-color: #005090; color: #FFFFFF; border: 1 solid #FFFFFF"></p>

        </td>

        <td>

          <p align="center"><input type="button" value=" + " onclick="enter(this.form, plus)" style="background-color: #005090; color: #FFFFFF; border: 1 solid #FFFFFF"></p>

        </td>

      </tr>

      <tr>

        <td>

          <p align="center"><input type="button" value=" 4 " onclick="enter(this.form, four)" style="font-weight: bold; background-color: #005090; color: #FFFFFF; border: 1 solid #FFFFFF"></p>

        </td>

        <td>

          <p align="center"><input type="button" value=" 5 " onclick="enter(this.form, five)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

        </td>

        <td>

          <p align="center"><input type="button" value=" 6 " onclick="enter(this.form, six)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

        </td>

        <td>

          <p align="center"><input type="button" value=" -  " onclick="enter(this.form, minus)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

        </td>

      </tr>

      <tr>

        <td>

          <p align="center"><input type="button" value=" 1 " onclick="enter(this.form, one)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

        </td>

        <td>

          <p align="center"><input type="button" value=" 2 " onclick="enter(this.form, two)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

        </td>

        <td>

          <p align="center"><input type="button" value=" 3 " onclick="enter(this.form, three)" style="font-weight: bold; background-color: #005090; color: #FFFFFF; border: 1 solid #FFFFFF"></p>

        </td>

        <td>

          <p align="center"><input type="button" value=" x " onclick="enter(this.form, multiply)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

        </td>

      </tr>

      <tr>

        <td colspan="2">

          <p align="center"><input type="button" value="    0   " onclick="enter(this.form, zero)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

        </td>

        <center>

        <td>

          <p align="center"><input type="button" value=" .  " onclick="enter(this.form, decimal)" style="background-color: #005090; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

        </td>

        <td>

          <p align="center"><input type="button" value=" %" onclick="enter(this.form, divide)" style="background-color: #005090; color: #FFFFFF; border: 1 solid #FFFFFF"></p>

        </td>

        </tr>

      </center>

      <tr>

        <td colspan="2">

          <p align="center"><input type="button" value="   =    " onclick="compute(this.form)" style="background-color: #00A800; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

        </td>

        <td colspan="2">

          <p align="right"><input type="reset" value="  AC   " onclick="clear(this.form)" style="background-color: #FF3300; color: #FFFFFF; font-weight: bold; border: 1 solid #FFFFFF"></p>

        </td>

      </tr>

    </table>

    </center>

  </div>

</form>