Home » Minimalist Trading Digest » Javascript Calculator for the Odin Project

Javascript Calculator for the Odin Project

David Miller • • 7 min read
Javascript Calculator for the Odin Project

When I run my code no problems populate in the console however, I cannot figure out why my equal operator is not working. I can press the numbers, operators, and equal button and it shows up on the screen but it will not calculate the problem. Can anyone help me figure out what is I am missing to get the function to work correctly?

const screen = document.querySelector('.screen')
const clear = document.querySelector('.clear')
const numberButtons = document.querySelectorAll('.numbers')
const operators = document.querySelectorAll('.operators')
const equal = document.querySelector('.equal')

let previousValue = ''
let currentValue = ''

let num1 = ''
let num2 = ''


numberButtons.forEach(function(numberButton) {
  numberButton.addEventListener("click", function() {
    screen.textContent += numberButton.value;
    currentValue = parseInt(screen.innerText);

  })
})

function operate() {
  num1 = parseInt(num1);
  num2 = parseInt(num2);
  if (operators === '+') {
    num1 += num2;
  } else if (operators === '-') {
    num1 -= num2;
  } else if (operators === '*') {
    num1 *= num2;
  } else {
    num1 /= num2;
  }
}

operators.forEach(function(operators) {
  operators.addEventListener("click", function() {
    screen.textContent += operators.value;
    currentValue = (screen.innerText);

  })
})






equal.addEventListener("click", function() {
  screen.textContent += equal.value;
  currentValue = (screen.innerText);
  operate(operators, num1, num2)



})



clear.addEventListener('click', () => location.reload());
html,
body {
  height: 100%;
  width: 100%;
}

div.calc {
  font-family: 'Courier New', monospace;
  color: #FB6F92;
  font-size: 40px;
  font-weight: bolder;
  margin-left: 625px;
  margin-top: 25px;
}

div.container {
  background: #e7e7e7;
  width: 500px;
  height: 555px;
  border-radius: 10px;
  border: 5px solid #FB6F92;
  margin-left: 500px;
  margin-top: 25px;
  box-shadow: 10px 10px 10px;
}

div.screen {
  border: 5px solid #FB6F92;
  color: black;
  background: #f8f8ff;
  width: 445px;
  height: 100px;
  border-radius: 10px;
  margin-left: 20px;
  font-size: 30px;
  text-align: right;
  font-weight: bold;
  font-family: 'Courier New', monospace;
}

button.clear {
  width: 450px;
  height: 50px;
  background: #FFCCF9;
  color: black;
  border-radius: 5px;
  margin-left: 22px;
  margin-top: 6px;
}

button.clear:hover {
  background: #Ff9cee;
}

button.numbers {
  width: 75px;
  height: 75px;
  background: pink;
  color: white;
  border-radius: 5px;
  margin-left: 35px;
  margin-top: 15px;
  font-weight: bold;
  font-size: 20px;
}

button.numbers:hover {
  background: #FB6F92;
}

button.operators {
  width: 75px;
  height: 75px;
  background: #A4E7DF;
  color: black;
  border-radius: 5px;
  margin-left: 35px;
  margin-top: 15px;
  font-weight: bold;
  font-size: 20px;
}

button.operators:hover {
  background: #3bc6b6;
  #64d4c7
}

button.equal {
  width: 75px;
  height: 75px;
  background: #D1B2EA;
  color: black;
  border-radius: 5px;
  margin-left: 35px;
  margin-top: 15px;
  font-weight: bold;
  font-size: 20px;
}

button.equal:hover {
  background: #b07cda;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Calculator TOP Project</title>
  <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body style='background-color :#a0ddfb;'>
  <div class="calc"> Calculator</div>
  <div class="container">

    <br>
    <div class="screen" value="screen"></div>

    <button class="clear" onclick="clear();">Clear</button>
    <br>
    <button class='numbers' value="7"> 7</button>
    <button class='numbers' value="8">8</button>
    <button class='numbers' value="9">9</button>
    <button class='operators' value="/"> &#247;</button>
    <br>
    <button class='numbers' value="4">4</button>
    <button class='numbers' value="5">5</button>
    <button class='numbers' value="6">6</button>
    <button class='operators' value="*">    &#215;</button>
    <br>
    <button class='numbers' value="1">1</button>
    <button class='numbers' value="2">2</button>
    <button class='numbers' value="3">3</button>
    <button class='operators' value="-">-</button>
    <br>
    <button class='numbers' value=".">.</button>
    <button class='numbers' value="0">0</button>
    <button class='equal' value="=">=</button>
    <button class='operators' value="+">+</button>

  </div>
  </div>


  <script src="script.js"></script>

</body>

</html>

1 Answer

You never assign the values to num1 and num2. It looks like your calculator is mainly printing to screen. This will allow you to take a shortcut and use eval to parse that expression. But eventually you do want to program some logic into your exercise.

const screen = document.querySelector('.screen')
const clear = document.querySelector('.clear')
const numberButtons = document.querySelectorAll('.numbers')
const operators = document.querySelectorAll('.operators')
const equal = document.querySelector('.equal')

let previousValue = ''
let currentValue = ''

let num1 = ''
let num2 = ''


numberButtons.forEach(function(numberButton) {
  numberButton.addEventListener("click", function() {
    screen.textContent += numberButton.value;
    currentValue = parseInt(screen.innerText);
  })
})

function operate() {
  num1 = parseInt(num1);
  num2 = parseInt(num2);
  if (operators === '+') {
    num1 += num2;
  } else if (operators === '-') {
    num1 -= num2;
  } else if (operators === '*') {
    num1 *= num2;
  } else {
    num1 /= num2;
  }
}

operators.forEach(function(operators) {
  operators.addEventListener("click", function() {
    screen.textContent += operators.value;
    currentValue = (screen.innerText);
  })
})

equal.addEventListener("click", function() {
  /*screen.textContent += equal.value;
  currentValue = (screen.innerText);
  operate(operators, num1, num2)
  */
  var x = eval("(" + screen.textContent + ")")
  screen.innerText = x;
})

clear.addEventListener('click', () => location.reload());
html,
body {
  height: 100%;
  width: 100%;
}

div.calc {
  font-family: 'Courier New', monospace;
  color: #FB6F92;
  font-size: 40px;
  font-weight: bolder;
  margin-left: 125px;
  margin-top: 25px;
}

div.container {
  background: #e7e7e7;
  width: 500px;
  height: 555px;
  border-radius: 10px;
  border: 5px solid #FB6F92;
  margin-left: 50px;
  margin-top: 25px;
  box-shadow: 10px 10px 10px;
}

div.screen {
  border: 5px solid #FB6F92;
  color: black;
  background: #f8f8ff;
  width: 445px;
  height: 100px;
  border-radius: 10px;
  margin-left: 20px;
  font-size: 30px;
  text-align: right;
  font-weight: bold;
  font-family: 'Courier New', monospace;
}

button.clear {
  width: 450px;
  height: 50px;
  background: #FFCCF9;
  color: black;
  border-radius: 5px;
  margin-left: 22px;
  margin-top: 6px;
}

button.clear:hover {
  background: #Ff9cee;
}

button.numbers {
  width: 75px;
  height: 75px;
  background: pink;
  color: white;
  border-radius: 5px;
  margin-left: 35px;
  margin-top: 15px;
  font-weight: bold;
  font-size: 20px;
}

button.numbers:hover {
  background: #FB6F92;
}

button.operators {
  width: 75px;
  height: 75px;
  background: #A4E7DF;
  color: black;
  border-radius: 5px;
  margin-left: 35px;
  margin-top: 15px;
  font-weight: bold;
  font-size: 20px;
}

button.operators:hover {
  background: #3bc6b6;
  #64d4c7
}

button.equal {
  width: 75px;
  height: 75px;
  background: #D1B2EA;
  color: black;
  border-radius: 5px;
  margin-left: 35px;
  margin-top: 15px;
  font-weight: bold;
  font-size: 20px;
}

button.equal:hover {
  background: #b07cda;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Calculator TOP Project</title>
  <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body style='background-color :#a0ddfb;'>
  <div class="calc"> Calculator</div>
  <div class="container">

    <br>
    <div class="screen" value="screen"></div>

    <button class="clear" onclick="clear();">Clear</button>
    <br>
    <button class='numbers' value="7"> 7</button>
    <button class='numbers' value="8">8</button>
    <button class='numbers' value="9">9</button>
    <button class='operators' value="/"> &#247;</button>
    <br>
    <button class='numbers' value="4">4</button>
    <button class='numbers' value="5">5</button>
    <button class='numbers' value="6">6</button>
    <button class='operators' value="*">    &#215;</button>
    <br>
    <button class='numbers' value="1">1</button>
    <button class='numbers' value="2">2</button>
    <button class='numbers' value="3">3</button>
    <button class='operators' value="-">-</button>
    <br>
    <button class='numbers' value=".">.</button>
    <button class='numbers' value="0">0</button>
    <button class='equal' value="=">=</button>
    <button class='operators' value="+">+</button>

  </div>


</body>

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

David Miller
Author

David Miller

David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.