Scribd
Upload
8 views

WEB_TECH__8

The document outlines a program to create a simple calculator using JavaScript, detailing the aim, algorithm, and code structure. It includes HTML for layout, CSS for styling, and JavaScript functions for calculator operations. The implementation has been successfully completed and executed.

Uploaded by

akshaya180612
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

WEB_TECH__8

The document outlines a program to create a simple calculator using JavaScript, detailing the aim, algorithm, and code structure. It includes HTML for layout, CSS for styling, and JavaScript functions for calculator operations. The implementation has been successfully completed and executed.

Uploaded by

akshaya180612
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

EX.

NO: 8

PROGRAMS USING DOM


DATE:24-09-2024

AIM:
To create a simple calculator using javascript.

ALGORITHM:
Step 1: Start with the html version using DOCTYPE tag.
Step 2: Create the buttons to enter numbers, arithmetic operations, equals to, clear
and backspace with event handlers like onclick, onmouseover, onmouseout etc..
Step 3: Create functions for equals to, insert, backspace and arithmetic operations to
perform calculations.
Step 4: End

CODE:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator Program</title>
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #e3f2fd;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.formstyle {
width: 320px;
height: 400px;
border-radius: 12px;
padding: 20px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);

AKSHAYA R (71812201017)
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
}

h1 {
font-size: 1.5rem;
color: #00796b;
margin-bottom: 20px;
}

.textview {
width: 100%;
height: 50px;
font-size: 1.5rem;
padding: 5px;
text-align: right;
border: 2px solid #00796b;
border-radius: 8px;
margin-bottom: 15px;
background-color: #f0f0f0;
}

.btn {
width: 60px;
height: 60px;
margin: 5px;
font-size: 1.2rem;
border-radius: 8px;
border: none;
background-color: #00796b;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}

.btn:hover {
background-color: #004d40;
}

.btn:active {
background-color: #00362e;
}

.btn-large {
width: 128px;

AKSHAYA R (71812201017)
}
.btn-equal {
height: 130px;
background-color: #ff5722;
}

.btn-equal:hover {
background-color: #e64a19;
}
</style>
<script>
function insert(num) {
document.form1.textview.value += num;
}

function equal() {
const exp = document.form1.textview.value;
if (exp) {
document.form1.textview.value = eval(exp);
}
}

function backspace() {
const exp = document.form1.textview.value;
document.form1.textview.value = exp.substring(0, exp.length - 1);
}
</script>
</head>
<body>
<div class="formstyle">
<h1>Simple Calculator</h1>
<form name="form1">
<input class="textview" name="textview" readonly>
</form>
<div>
<button class="btn" onclick="document.form1.textview.value = ''">C</button>
<button class="btn" onclick="backspace()">B</button>
<button class="btn" onclick="insert('/')">/</button>
<button class="btn" onclick="insert('*')">x</button>
</div>
<div>
<button class="btn" onclick="insert(7)">7</button>
<button class="btn" onclick="insert(8)">8</button>
<button class="btn" onclick="insert(9)">9</button>
<button class="btn" onclick="insert('-')">-</button>
</div>

AKSHAYA R (71812201017)
<div>
<button class="btn" onclick="insert(4)">4</button>
<button class="btn" onclick="insert(5)">5</button>
<button class="btn" onclick="insert(6)">6</button>
<button class="btn" onclick="insert('+')">+</button>
</div>
<div>
<button class="btn" onclick="insert(1)">1</button>
<button class="btn" onclick="insert(2)">2</button>
<button class="btn" onclick="insert(3)">3</button>
<button class="btn-equal" onclick="equal()">=</button>
</div>
<div>
<button class="btn btn-large" onclick="insert(0)">0</button>
<button class="btn" onclick="insert('.')">.</button>
</div>
</div>
</body>
</html>

OUTPUT:

AKSHAYA R (71812201017)
RESULT:
Thus, the implementation of simple calculator using JavaScript has been
completed and executed successfully.

AKSHAYA R (71812201017)

You might also like