I’ve been trying to build a calculator to understand javascript better as a n00b, but I can’t figure out why I have this error.
I type 64 on the calculator, then it types 648, instead of 8.
What I’d like it to do… is be able to type in √(68) in the calculator and then it displays 8…
so say, √(16)+2 = 6. ^^;; As supposed to √(16+2)= 4.24264068
but I’m not quite sure if I’m asking for too much and it wasn’t clear from puttering around how one would do this.
I’m thinking more like the TI calculator type of function, instead of the scientific calculator function.
BTW, I’m aware that the rest of it barely functions…
else if (value == "√") {
value = Math.sqrt(display.value);
}
Live version with the bugs: https://kimyoonmi.com/calculator/
calculator.php
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<p>
<div id="calccontainer">
<div id="calculator">
<input type=text id="display">
<div id="buttons"></div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
.css
body {
margin:0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#calccontainer{
background-color: lightyellow;
border-radius: 10px;
}
#calculator {
font-family: Arial, sans-serif;
background color: yellow;
border-radius: 15px;
max-width: 800px;
overflow: hidden;
border-collapse: separate;
}
#display {
background-color: white;
color: black;
text-align: left;
font-size: 50px;
border-width: 1px;
border-color: gold;
border-radius: 15px;
outline: none;
width: 100%;
box-sizing: border-box;
}
#buttons{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
padding 5px;
}
#buttons button{
width: 100px;
height: 100px:
border: 0;
border-radius: 20px;
background-color: gold;
color: white;
font-size: 3rem;
font-weight: bold;
cursor: pointer;
border-collapse: separate;
}
const display = document.getElementById("display");
const buttonValues = [
"Rad", "º", "x!", "(", ")", "%", "AC",
"Inv", "sin", "log", "7", "8", "9", "÷",
"π", "cos", "ln", "4", "5", "6", "x",
"e", "tan", "√", "1", "2", "3", "+",
"Ans", "EXP", "xʸ", "0", ".", "=", "-", "+/-", "x⁻¹",
]
const leftSymbols = ["Rad", "º", "x!", "Inv", "sin", "log", "π", "cos", "ln", "e", "tan", "√", "Ans", "EXP", "xʸ", "+/-", "x⁻¹",]
const topSymbols = ["(", ")", "%", "AC"]
const rightSymbols = [ "÷", "x", "-", "+", "="]
//A+B, A×B, A-B, A÷B
let A = 0;
let operator = null;
let B = null;
function clearAll() {
A = null;
operator = null;
B = null;
}
for (let i = 0; i < buttonValues.length; i++) {
let value = buttonValues[i];
let button = document.createElement("button");
button.innerText = value;
//styling button colors
if (value == "=") {
button.style.backgroundColor = "brown";
}
else if (rightSymbols.includes(value)) {
button.style.backgroundColor = "orange";
}
else if (leftSymbols.includes(value)) {
button.style.backgroundColor = "darkorange";
button.style.color = "white";
}
else if (topSymbols.includes(value)) {
button.style.backgroundColor = "orange";
button.style.color = "white";
}
//process button clicks
button.addEventListener("click", function() {
if (leftSymbols.includes(value)) {
if (value == "x!") {
}
else if (value == "√") {
value = Math.sqrt(display.value);
}
else if (value == "π") {
value = 3.141592653589;
}
}
else if (rightSymbols.includes(value)) { //÷,=,-,+
}
if (value == "=") {
if (A != null) {
B = display.value;
let numA = Number(A);
let numB = Number(B);
if (operator == "÷") {
display.value = numA/numB;
}
else if (operator == "×") {
display.value = numA*numB;
}
else if (operator == "-") {
display.value = numA-numB;
}
else if (operator == "+") {
display.value = numA+numB;
}
clearAll();
}
}
else if (topSymbols.includes(value)) { //AC +/- %
if (value == "AC") {
clearAll();
display.value = "";
}
else if (value == "+/-") {
if (display.value != "" && display.value != "0") {
if (display.value[0] == "-") { //remove -
display.value = display.value.slice(1);
} else { //add -
display.value = "-" + display.value;
}
}
}
else if (value == "%") {
display.value = Number(display.value) / 100;
}
else if (value == "(") {
display.value = "(" + Number(display.value);
}
else if (value == ")") {
display.value = (display.value) + ")";
}
}
else { //digits or .
if (value == ".") {
//don't add multiple decimal places
if (display.value != "" && !display.value.includes(value)) {
display.value += value;
}
}
//not a dot, number instead
else if (display.value == "0") {
display.value = value;
}
else {
display.value += value;
}
}
});
//add button to calculator
document.getElementById("buttons").appendChild(button);
}