Design a site like this with WordPress.com
Get started

HTML CALCULATOR:HOW TO MAKE?

Hey guys! Welcome to this site namely Science & cyber. Here in this post I am going to show how to make a calculator by JavaScript and HTML &CSS.If you have any doubt, just ask in comment section.

Things you need to know

So there must be some earlier requirements for making a program

  • Basic CSS & JAVASCRIPT
  • HTML
  • USE OF INPUT TAG AND BUTTON TAG

THE CODE

<! DOCTYPE html>
<html>
<head>
<title>
HTML Calculator</title>
<style>
button{
background-color:yellow;
color:purple;
height:40px;
width:50px
}
input{background-color:white;
color:purple}
h1{font-size:250%}
</style>
</head>
<body>
<h1>ARKA'S HTML CALCULATOR</h1>
<div>
<table>
<tr>
<td colspan="4" ><input  id="res"/></td>
</tr>
<tr>
<td ><button onclick="dis(7)">7</button></td>
<td ><button onclick="dis(8)">8</button></td>
<td ><button onclick="dis(9)">9</button></td>
<td ><button onclick="dis('+')">+</button></td>
</tr>
<tr>
<td ><button onclick="dis(4)">4</button></td>
<td ><button onclick="dis(5)">5</button></td>
<td ><button onclick="dis(6)">6</button></td>
<td ><button onclick="dis('-')">-</button></td>
</tr>
<tr>
<td ><button onclick="dis(1)">1</button></td>
<td ><button onclick="dis(2)">2</button></td>
<td ><button onclick="dis(3)">3</button></td>
<td ><button onclick="dis('*')">*</button></td>
</tr>
<tr>
<td ><button onclick="dis(0)">0</button></td>
<td ><button onclick="clr()">C</button></td>
<td ><button onclick="dis('/')">/</button></td>
<td><button onclick="slv()">=</button></td>
</tr>
</table>
<script>
function clr(){
document.getElementById('res').value = " "
}
function dis(val){
document.getElementById('res').value += val
}
function slv(){
let x = document.getElementById('res').value
let y= eval(x)
document.getElementById('res').value=y
}
</script>
</body>
</html>




If you have any queries, you know what to do – just comment.

Caution

Some HTML editors have some extra rules. For example, this code does not work in w3schools html tryit editor. For the code which runs in w3schools;click Here

Solution?


If you like the post:chose upvote button if you are not wordpress blogger & click like button (like star ⭐) if you are wordpress blogger.

Byee for today, meet you soon.

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: