Help me sort out this script

Joined
Oct 17, 2023
Messages
1
Reaction score
0
I am trying to create a simple calculator in html,css and js. I have been stuck here for a few hours now and I just cant figure out why this doesn't work. Any help is appreciated.


HTML:




Code:
<html>
    <title>Calculator</title>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js" defer></script>
    </head>
    <body>
        <div id="calculatorBox">
            <input type="number" id="box">
            <br>
            <input type="button" value="9" class="exp">
            <input type="button" value="8" class="exp">
            <input type="button" value="7" class="exp">
            <br>
            <input type="button" value="6" class="exp">
            <input type="button" value="5" class="exp">
            <input type="button" value="4" class="exp">
            <br>
            <input type="button" value="3" class="exp">
            <input type="button" value="2" class="exp">
            <input type="button" value="1" class="exp">
            <br>
            <input type="button" value="C" class="exp">
            <input type="button" value="0" class="exp">
            <input type="button" value="." class="exp">
            <br>
            <input type="button" value="+" class="exp">
            <input type="button" value="-" class="exp">
            <input type="button" value="*" class="exp">
            <input type="button" value="/" class="exp">
            <input type="button" value="=" class ="exp" onclick="calc()">
        </div>
    </body>
</html>



JS:



`function calc(){
const box=document.getElementById("box");

const btns=document.querySelectorAll(".exp");


btns.forEach(function(btn){
btn.addEventListener('click',function(){

console.log(btn.value);

if (btn.value === "="){

try{
res=eval(box.value);
box.value=res;
}
catch(error){
box.value="Error";
}
}
else if (btn.value === "C"){
box.value=" ";
}
else{
box.value+=btn.value;
}
})

});
}`



CSS:



`
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
}
#box{
border-color: aqua;
border-width: 10px;
}
#calculatorBox {
width: 300px;
margin: 100px auto;
padding: 10px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 5px;
}

input[type="number"] {
width: 100%;
padding: 5px;
font-size: 18px;
border: none;
border-bottom: 1px solid #ccc;
outline: none;
color:cornflowerblue;
}

input[type="button"] {
width: 70px;
height: 40px;
margin: 5px;
font-size: 18px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

input[type="button"]:hover {
background-color: #555;
}
`
 
Joined
Jul 4, 2023
Messages
354
Reaction score
41
Check this
[ code on-line ]
HTML:
<div id="calculatorBox">
  <input type="text" id="box" readonly>
  <br>
  <input type="button" value="9" class="exp">
  <input type="button" value="8" class="exp">
  <input type="button" value="7" class="exp">
  <br>
  <input type="button" value="6" class="exp">
  <input type="button" value="5" class="exp">
  <input type="button" value="4" class="exp">
  <br>
  <input type="button" value="3" class="exp">
  <input type="button" value="2" class="exp">
  <input type="button" value="1" class="exp">
  <br>
  <input type="button" value="C" class="exp">
  <input type="button" value="0" class="exp">
  <input type="button" value="." class="exp">
  <br>
  <input type="button" value="+" class="exp">
  <input type="button" value="-" class="exp">
  <input type="button" value="*" class="exp">
  <input type="button" value="/" class="exp">
  <input type="button" value="=" class="exp">
</div>
CSS:
body {
  background-color: #f0f0f0;
}
#box{
  border-color: aqua;
  border-width: 10px;
}
#calculatorBox {
  font-family: Arial, sans-serif;
  width: 300px;
  margin: 100px auto;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
}

input#box {
  width: 100%;
  padding: 5px;
  margin-bottom: 5px;
  font-size: 18px;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
  color: cornflowerblue;
}

input.exp {
  width: 70px;
  height: 40px;
  margin: 5px;
  font-size: 18px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

input.exp:hover {
  background-color: #555;
}
JavaScript:
window.onload = load;

function load() {
  const box = document.querySelector('#box');
  const btns = document.querySelectorAll('.exp');

  btns.forEach(function(btn) {
    btn.addEventListener('click', function() {
      console.log(this.value);

      if (this.value === '=') {
        try {
          box.value = eval(box.value);
        }
        catch(error) {
          box.value = 'Error';
        }
      }
      else if (this.value === 'C') {
        box.value = '';
      }
      else {
        box.value += this.value;
      }
    });
  });
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,754
Messages
2,569,520
Members
44,996
Latest member
rainocode

Latest Threads

Top