Attempted JavaScript Calc Analysis

function display(val) {
    document.getElementById("textval").value += val
}
function evaluate() {
    let x = document.getElementById("textval").value
    let y = eval(x)
    document.getElementById("textval").value = y
}
function clr() {
    document.getElementById("textval").value = ""
}
// defining our calculator function
function myCalc() {
  var style1 = (
    "input[type='button']" +
    "{border-radius: 10px;background-color: blue;color: white; border-color: #pink; width: 100%;}" 
 );
  
  var style2=( 
    "input[type='text']" +
  "{border-radius: 10px;text-align: right;background-color: yellow;color: white;border-color: white;width: 100%}"
 );
  // HTML Body of Table is build as a series of concatenations (+=)
  var body = "";

  // making a header
  body += "<p>Calculator</p>";
  body += "<div class=title>A JS Calculator</div>";
  body +=  "<table border='1'>";
  body +=     "<tr>";
  body +=          "<td><input type='button' value='c' onclick='clr()' /> </td>";
  body +=          "<td colspan='3'><input type='text' id='textval' /></td>";
  body +=     "</tr>";
  body +=  "<tr>";
 body +=    "<td><input type='button' value='+' onclick='display('+')' /> </td>";
 body +=    "<td><input type='button' value='1' onclick='display('1')' /> </td>";
 body +=    "<td><input type='button' value='2' onclick='display('2')' /> </td>";
 body +=    "<td><input type='button' value='3' onclick='display('3')' /> </td>";
 body += "</tr>";
body += "<tr>";
body +=     "<td><input type='button' value='-' onclick='display('-')' /> </td>";
body +=     "<td><input type='button' value='4' onclick='display('4')' /> </td>";
body +=     "<td><input type='button' value='5' onclick='display('5')' /> </td>";
body +=     "<td><input type='button' value='6' onclick='display('6')' /> </td>";
body += "</tr>";
body += "<tr>";
body +=     "<td><input type='button' value='*' onclick='display('*')' /> </td>";
body +=     "<td><input type='button' value='7' onclick='display('7')' /> </td>";
body +=     "<td><input type='button' value='8' onclick='display('8')' /> </td>";
body +=     "<td><input type='button' value='9' onclick='display('9')' /> </td>";
body += "</tr>";
body += "<tr>";
body +=     "<td><input type='button' value='/' onclick='display('/')' /> </td>";
body +=     "<td><input type='button' value='.' onclick='display('.')' /> </td>";
body +=     "<td><input type='button' value='0' onclick='display('0')' /> </td>";
body +=     "<td><input type='button' value='=' onclick='evaluate()' /> </td>";
body += "</tr>";
  body += "</table>";
   
   // Build and HTML fragment of div, table, table body
  return (
    "<div" +
      "<table>" +
        body +
      "</table>" +
    "</div>"
  );

};

$$.html(myCalc());

<div

Calculator

A JS Calculator

<input type='button' value='+' onclick='display('+')' />	<input type='button' value='1' onclick='display('1')' />	<input type='button' value='2' onclick='display('2')' />	<input type='button' value='3' onclick='display('3')' />
<input type='button' value='-' onclick='display('-')' />	<input type='button' value='4' onclick='display('4')' />	<input type='button' value='5' onclick='display('5')' />	<input type='button' value='6' onclick='display('6')' />
<input type='button' value='*' onclick='display('*')' />	<input type='button' value='7' onclick='display('7')' />	<input type='button' value='8' onclick='display('8')' />	<input type='button' value='9' onclick='display('9')' />
<input type='button' value='/' onclick='display('/')' />	<input type='button' value='.' onclick='display('.')' />	<input type='button' value='0' onclick='display('0')' />

What did we notice in the code?

• Functions and variables are defined to avoide repeating code
• stands for table data x</li>
• stands for table row</li>
• is a container for HTML elements, and usually defines a second of the document</li> </ul>
  </div> </div> </div>