FREE CODE CAMP - Build a JavaScript Calculator PROJECT

free-code-camp-build-a-javascript-calculator-project.markdown

FREE CODE CAMP - Build a JavaScript Calculator PROJECT

A Pen by Jose Campos on CodePen.

License.

index.html

<div id="calc_wrpr">  
<table class="tg" id="table">
<colgroup>
<col style="width: 20px">
<col style="width: 28px">
<col style="width: 20px">
<col style="width: 20px">
</colgroup>
  <h1><a href="https://www.freecodecamp.com/challenges/build-a-javascript-calculator" target="_blank">FREECODECAMP</a><br/> Build a JavaScript Calculator</h1>
  <tr>
    <input autofoucs value="0" id="calc" type="text" onkeypress="handleKeyPress(event)"/>
  </tr>
  <tr>
    <th class="tg-wjqe" onclick="alert('More options?')">☰</th>
    <th class="operator tg-wjqe">/</th>
    <th class="operator tg-wjqe">*</th>
    <th class="operator tg-wjqe">-</th>
  </tr>
  <tr>
    <td class="tg-jsj9">7</td>
    <td class="tg-jsj9">8</td>
    <td class="tg-jsj9">9</td>
    <td class="operator tg-r4gn" rowspan="2">+</td>
  </tr>
  <tr>
    <td class="tg-jsj9">4</td>
    <td class="tg-jsj9">5</td>
    <td class="tg-jsj9">6</td>
  </tr>
  <tr>
    <td class="tg-jsj9">1</td>
    <td class="tg-jsj9">2</td>
    <td class="tg-jsj9">3</td>
    <td class="tg-r4gn" rowspan="2" onclick="calc()">=</td>
  </tr>
  <tr>
    <td class="tg-jsj9" colspan="2">0</td>
    <td class="tg-r4gn" onClick='document.getElementById("calc").value = 0'>&lt;</td>
  </tr>  
</table>
<h2>&copy NONE; A PEN BY Jose Campos</h2>
</div>
<div id="info">
<h3>Type in any algebra with the keyboard and hit return<br /> or click the buttons...</h3>
  <h4>Built using:</h4>
  <a href="http://mathjs.org/docs/getting_started.html" target="_blank"><img src="http://mathjs.org/css/img/mathjs_330x100.png" alt="mathjs logo" /></a>
  <h4>COPY / PASTE, EXAMPLES</h4>
  <ul>
    <li>1.2 * (2 + 4.5)</li>
    <li>5.08 cm to inch</li>
    <li>sin(45 deg) ^ 2</li>
    <li>9 / 3 + 2i</li>
    <li>det([-1, 2; 3, 1])</li> 
  </ul>
</div>

script.js

//EVALUATE STRING USING MATHJS
function calc() {
    var value = String(document.getElementById("calc").value);   
    document.getElementById("calc").value = (math.eval(value)); 
}
//REACT TO TABLE CLICK EVENTS
var table = document.getElementById('table'),
    cells = table.querySelectorAll('.tg-jsj9,.operator');
for (var i=0,len=cells.length; i<len; i++){
    cells[i].onclick = function(){
      document.getElementById("calc").value += this.innerHTML;
    }
}
//RETURN ALSO ON ENTER KEYPRESS
function handleKeyPress(e){
 var key=e.keyCode || e.which;
  if (key==13){
    calc();
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.13.1/math.min.js"></script>

style.css

h1,h2,a {
  color:white;
  font-size:2.2vw;
  text-align:center;
  font-variant: small-caps;
}
#calc_wrpr {
  opacity:.7;
  border-radius:5%;
  display: inline-block;
  margin: 30px;
  background-color: darkblue;
  border: 3px solid darkblue;
}
input {
  width: 32.3vw;
  min-width:292px;
  margin-left:2px;
  font-size:12vh;
}
table {
  height: 70vh;
  min-height:300px;
  width: 33vw;
  min-width:300px;
}
tg  {border-collapse:collapse;border-spacing:0;border-color:#aabcfe;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:0px 0px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#669;background-color:#e8edff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:0px 0px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#039;background-color:#b9c9fe;}
.tg .tg-jsj9{font-size:10vh;font-family:"Comic Sans MS", cursive, sans-serif !important;;text-align:center;vertical-align:center}
.tg .tg-wjqe{font-weight:bold;font-size:10vh;font-family:"Comic Sans MS", cursive, sans-serif !important;;text-align:center;vertical-align:center}
.tg .tg-r4gn{font-weight:bold;font-size:10vh;font-family:"Comic Sans MS", cursive, sans-serif !important;;background-color:#b9c9fe;color:#003399;text-align:center;vertical-align:center}
th,td:hover{
  cursor:pointer;
}
#info{
  display: inline-block;
  text-align:left;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet" />