Scribd
Upload
54 views4 pages

Graphical Calculator

The document describes a student project to design a graphical calculator using HTML, CSS, and JavaScript, including code snippets for the HTML, CSS, and JavaScript used to create the calculator interface and functionality. It includes code for the HTML page structure and buttons, CSS styling, and JavaScript functions to handle number input, operations, clearing, and backspacing. The output is a functional graphical calculator app that can perform basic mathematical calculations through the coded buttons and displayed operations.

Uploaded by

Muskan agarwal
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
54 views4 pages

Graphical Calculator

The document describes a student project to design a graphical calculator using HTML, CSS, and JavaScript, including code snippets for the HTML, CSS, and JavaScript used to create the calculator interface and functionality. It includes code for the HTML page structure and buttons, CSS styling, and JavaScript functions to handle number input, operations, clearing, and backspacing. The output is a functional graphical calculator app that can perform basic mathematical calculations through the coded buttons and displayed operations.

Uploaded by

Muskan agarwal
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/ 4

Muskan Agarwal

MCA (Section: A)
RollNo:55
Experiment
Objective - Write a java script program to design a graphical
calculator.
HTML Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="Calc.css">
<title>Calculator</title>
</head>
<body>
<div class="main">
<input type="text" id = 'res'>
<div class="btn">
<input type="button" value = 'C' onclick = "Clear()">
<input type="button" value = '%' onclick = "Solve('%')">
<input type="button" value = '←' onclick ="Back('←')">
<input type="button" value = '/' onclick = "Solve('/')">
<br>
<input type="button" value = '7' onclick = "Solve('7')">
<input type="button" value = '8' onclick = "Solve('8')">
<input type="button" value = '9' onclick = "Solve('9')">
<input type="button" value = 'x' onclick = "Solve('*')">
<br>
<input type="button" value = '4' onclick = "Solve('4')">
<input type="button" value = '5' onclick = "Solve('5')">
<input type="button" value = '6' onclick = "Solve('6')">
<input type="button" value = '-' onclick = "Solve('-')">
<br>
<input type="button" value = '1' onclick = "Solve('1')">
<input type="button" value = '2' onclick = "Solve('2')">
<input type="button" value = '3' onclick = "Solve('3')">
<input type="button" value = '+' onclick = "Solve('+')">
<br>
<input type="button" value = '00'onclick = "Solve('00')">
<input type="button" value = '0' onclick = "Solve('0')">
<input type="button" value = '.' onclick = "Solve('.')">
<input type="button" value = '=' onclick = "Result()">
</div>
</div>
<script src = 'Calc.js' ></script>
</body>
</html>

CSS Code:-
*{
padding: 0;
margin: 0;
font-family: 'poppins', sans-serif;
}
body{
background-color: #495250;
display: grid;
height: 100vh;
place-items: center;
}
.main{
width: 400px;
height: 450px;
background-color: white;
position: absolute;
border: 5px solid black;
border-radius: 6px;
}
.main input[type='text'] {
width: 88%;
position: relative;
height: 80px;
top: 5px;
text-align: right;
padding: 3px 6px;
outline: none;
font-size: 40px;
border: 5px solid black;
display: flex;
margin: auto;
border-radius: 6px;
color: black;
}
.btn input[type='button']{
width:90px;
padding: 2px;
margin: 2px 0px;
position: relative;
left: 13px;
top: 20px;
height: 60px;
cursor: pointer;
font-size: 18px;
transition: 0.5s;
background-color: #495250;
border-radius: 6px;
color: white;
}
.btn input[type='button']:hover{
background-color: black;
color: white;
}

Javascript code:-
function Solve(val) {
var v = document.getElementById('res');
v.value += val;
}
function Result() {
var num1 = document.getElementById('res').value;
var num2 = eval(num1);
document.getElementById('res').value = num2;
}
function Clear() {
var inp = document.getElementById('res');
inp.value = '';
}
function Back() {
var ev = document.getElementById('res');
ev.value = ev.value.slice(0,-1);
}
OUTPUT:-

You might also like