Help me sort out this script

tomcruisemygoat · Oct 17, 2023

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;
}
`

VBService · Oct 21, 2023

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;
      }
    });
  });
}

Help with Visual Lightbox: Scripts	2	May 3, 2023
Why is the e.target not working here?	1	Dec 29, 2022
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
I need help fixing my website	2	Oct 15, 2023
Canvas drawing HTML Javascript on elementor	1	Feb 22, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Need help with code on website (noob)	2	Jul 18, 2022

Help me sort out this script

tomcruisemygoat

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads