Digital Calculator

Developer
JasonPark
Size
2,547 Kb
Views
8,096
  1. Digital Calculator Previews
  2. Digital Calculator HTML Codes
  3. Digital Calculator CSS Codes
  4. Digital Calculator JS Codes

How do I make an digital calculator?

What is a digital calculator? How do you make a digital calculator? This script and codes were developed by JasonPark on 19 December 2022, Monday.

Digital Calculator Previews
IQ Test

Digital Calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Digital Calculator</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="calculator-wrapper" class="container"> <div id="calculator"> <div id="display-panel" class="row col s12"> <div class="panel-top">Digital Calculator</div> <input id="display" type="text"> </div> <div id="button-panel" class="row col s12"> <div class="row"> <button class="btn col op s3">AC</button> <button class="btn col op s3">CE</button> <button class="btn col op s3">/</button> <button class="btn col op s3">X</button> </div> <div class="row"> <button class="btn col number s3">7</button> <button class="btn col number s3">8</button> <button class="btn col number s3">9</button> <button class="btn col op s3">+</button> </div> <div class="row"> <button class="btn col number s3">4</button> <button class="btn col number s3">5</button> <button class="btn col number s3">6</button> <button class="btn col op s3">-</button> </div> <div class="row"> <span class="col s3"> <button class="btn number">3</button> <button class="btn number">0</button> </span> <span class="col s3"> <button class="btn number">2</button> <button class="btn number">00</button> </span> <span class="col s3"> <button class="btn number">1</button> <button class="btn op">.</button> </span> <span class="col s3"> <button id="eval" class="btn op">=</button> </span> </div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Digital Calculator - Script Codes CSS Codes

#calculator-wrapper {
}
#calculator { height:400px; width:300px; margin:20px auto; padding:0.5%; padding:2%; background-color:#ccff90; position:relative; box-shadow:5px 5px 20px; border-radius:1%;
}
#display-panel { height:100px;
}
#display-panel input { background-color:white; text-align:right;
}
#display { border: 1px solid #9d9c9c;
}
#button-panel { width:100%;
}
#button-panel .row { margin-bottom:3px;
}
#button-panel .row .col{ padding:0;
}
#button-panel .btn { color:black; background-color:white;
}
#eval { height:72px;
}

Digital Calculator - Script Codes JS Codes

(function(doc, win){ var numClick = new Event('numClick', {num:undefined}); var opClick = new Event('opClick', {op:undefined}); var numbersDOM = doc.getElementsByClassName('number'); var opsDOM = doc.getElementsByClassName('op'); var display = doc.getElementById('display'); // Add Event Listeners display.addEventListener('numClick', function(e){ this.value += e.num; }, false); Object.keys(numbersDOM).map(function(elem){ numbersDOM[elem].addEventListener('click', function(e){ e.stopPropagation(); numClick.num = e.target.innerHTML; display.dispatchEvent(numClick); }); }); display.addEventListener('opClick', function(e){ switch(e.op){ case "+": console.log('PLUS'); break; case "-": console.log('MINUS'); break; case "X": console.log('MULTI'); break; case "/": console.log('DIVISIOn'); break; case "AC": console.log('Default'); break; case "CE": console.log('Default input'); break; case "=": console.log('Evaluate!'); break; } }, false); Object.keys(opsDOM).map(function(elem){ console.log(opsDOM[elem]); }); Object.keys(opsDOM).map(function(elem){ opsDOM[elem].addEventListener('click', function(e){ console.log(e); e.stopPropagation(); opClick.op = e.target.innerHTML; display.dispatchEvent(opClick); console.log(e.path.length); }) });
})(document, window);
Digital Calculator - Script Codes
Digital Calculator - Script Codes
Home Page Home
Developer JasonPark
Username wooljs
Uploaded December 19, 2022
Rating 3
Size 2,547 Kb
Views 8,096
Do you need developer help for Digital Calculator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

JasonPark (wooljs) Script Codes
Name
Search popup
Polar Coordinate - Rose shape
Prescription
Main-contents
Javascript Queue
Lookbook module
YxT
Cs
Tic Tac Toe Game with React and Redux
Polar Coordinate - Archimedean spiral
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!