codingtcher.com
Theme Night
Home
Login

Create a calculator in javascript example

Home » Tutorial Post » Create a calculator in javascript example
Css Code

   *{
      padding: 0;margin: 0;box-sizing: border-box;
      font-family: 'Times New Roman', Times, serif';
    }
    main{
      width: 240px;
      margin: 100px auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 10px, repeat(6, 1fr);
      grid-gap:2px;
      cursor: default;
    }
    main div{
      border: 1px solid;
      height: 40px;
      width: 60px;
      font-size: 30px;
      text-align: center;
      line-height: 40px;
      background-color: #eee;
      border-radius: 3px;
      user-select: none;
    }
    #result{
      height: 40px;
      background-color: #f0ffff;
      border-color: #aaa;
      width: 100%;
      grid-column: 1/-1;
      text-align: right;
      border-radius: 0px;
      padding: 0 2px;
      user-select: none;
      overflow: hidden;
    }
    #display{
      height: 25px;
      background-color: #cbcfcf;
      border-color: #aaa;
      width: 100%;
      grid-column: 1/-1;
      font-size: 11px;
      text-align: right;
      line-height: 25px;
      border-radius: 0px;
      padding: 0 4px;
      overflow: hidden;
      user-select: none;
    }
    .dot{
      font-size: 50px;
      line-height: 15px;
    }
    .sqrt{
      font-size: 30px;
      line-height: 25px;
    }
    sup{
     font-size:12px;
    }


Html Code

<main>
    <div id="display">0</div>
    <div id="result">0</div>
    <div onclick="clearAll();changeFontSize();cFontSizeDisplay();">C</div>
    <div onclick="display(this);">%</div>
    <div onclick="backOne();changeFontSize();cFontSizeDisplay();">x</div>
    <div onclick="display(this);">/</div>
    <div onclick="display(this);">7</div>
    <div onclick="display(this);">8</div>
    <div onclick="display(this);">9</div>
    <div onclick="display(this);">*</div>
    <div onclick="display(this);">4</div>
    <div onclick="display(this);">5</div>
    <div onclick="display(this);">6</div>
    <div onclick="display(this);">-</div>
    <div onclick="display(this);">1</div>
    <div onclick="display(this);">2</div>
    <div onclick="display(this);">3</div>
    <div onclick="display(this);">+</div>
    <div onclick="getsquare();changeFontSize();" class="sqrt">x<sup>2</sup></div>
    <div onclick="display(this);">0</div>
    <div onclick="display(this);" class="dot">.</div>
    <div onclick="result();changeFontSize();" class="equal">=</div>
</main>

Javascript Code


Related Post