Scribd
Upload
24 views5 pages

Calculator

This document contains the code for a basic calculator application including the HTML, CSS, and JavaScript files. The HTML contains the layout and buttons for the calculator. The CSS styles the calculator components and buttons. The JavaScript code handles button clicks, performs calculations, and updates the display screen.

Uploaded by

Sudhesh VS
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
24 views5 pages

Calculator

This document contains the code for a basic calculator application including the HTML, CSS, and JavaScript files. The HTML contains the layout and buttons for the calculator. The CSS styles the calculator components and buttons. The JavaScript code handles button clicks, performs calculations, and updates the display screen.

Uploaded by

Sudhesh VS
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

Index.

html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" href="style.css">

<title>Calculator</title>

</head>

<body>

<div class="container">

<h1>Calculator By CodeWithHarry</h1>

<div class="calculator">

<input type="text" name="screen" id="screen">

<table>

<tr>

<td><button>(</button></td>

<td><button>)</button></td>

<td><button>C</button></td>

<td><button>%</button></td>

</tr>

<tr>

<td><button>7</button></td>

<td><button>8</button></td>

<td><button>9</button></td>

<td><button>X</button></td>

</tr>

<tr>
<td><button>4</button></td>

<td><button>5</button></td>

<td><button>6</button></td>

<td><button>-</button></td>

</tr>

<tr>

<td><button>1</button></td>

<td><button>2</button></td>

<td><button>3</button></td>

<td><button>+</button></td>

</tr>

<tr>

<td><button>0</button></td>

<td><button>.</button></td>

<td><button>/</button></td>

<td><button>=</button></td>

</tr>

</table>

</div>

</div>

</body>

<script src="index.js"></script>

</html>
Style.css

.container{

text-align: center;

margin-top:23px

table{

margin: auto;

input{

border-radius: 21px;

border: 5px solid #244624;

font-size:34px;

height: 65px;

width: 456px;

button{

border-radius: 20px;

font-size: 40px;

background: #978fa0;

width: 102px;

height: 90px;

margin: 6px;

.calculator{

border: 4px solid #13695d;

background-color: #ff99f7;

padding: 23px;

border-radius: 53px;

display: inline-block;
}

h1{

font-size: 28px;

font-family: 'Courier New', Courier, monospace;

Index.js

let screen = document.getElementById('screen');

buttons = document.querySelectorAll('button');

let screenValue = '';

for (item of buttons) {

item.addEventListener('click', (e) => {

buttonText = e.target.innerText;

console.log('Button text is ', buttonText);

if (buttonText == 'X') {

buttonText = '*';

screenValue += buttonText;

screen.value = screenValue;

else if (buttonText == 'C') {

screenValue = "";

screen.value = screenValue;

else if (buttonText == '=') {

screen.value = eval(screenValue);

else {

screenValue += buttonText;

screen.value = screenValue;

}
})

You might also like