My JavaScript Calculator
A simple calculator made using JavaScript
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>