Scribd
Upload
22 views5 pages

Calculator Code

The document contains the HTML, CSS, and JavaScript code for a simple calculator application. It features a user interface with buttons for numbers and operations, and includes functionality to display input, clear the display, and calculate results using JavaScript. The design is styled with CSS for a clean and modern look.

Uploaded by

abhishekgrampura1
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
22 views5 pages

Calculator Code

The document contains the HTML, CSS, and JavaScript code for a simple calculator application. It features a user interface with buttons for numbers and operations, and includes functionality to display input, clear the display, and calculate results using JavaScript. The design is styled with CSS for a clean and modern look.

Uploaded by

abhishekgrampura1
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

Calculator HTML, CSS, and JS Code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Calculator</title>

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

</head>

<body>

<div class="calculator">

<input type="text" id="display" class="display" disabled />

<div class="buttons">

<button onclick="clearDisplay()">C</button>

<button onclick="appendToDisplay('7')">7</button>

<button onclick="appendToDisplay('8')">8</button>

<button onclick="appendToDisplay('9')">9</button>

<button onclick="appendToDisplay('/')">/</button>

<button onclick="appendToDisplay('4')">4</button>

<button onclick="appendToDisplay('5')">5</button>

<button onclick="appendToDisplay('6')">6</button>

<button onclick="appendToDisplay('*')">*</button>

<button onclick="appendToDisplay('1')">1</button>

<button onclick="appendToDisplay('2')">2</button>

<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('-')">-</button>

<button onclick="appendToDisplay('0')">0</button>

<button onclick="appendToDisplay('.')">.</button>

<button onclick="calculateResult()">=</button>

<button onclick="appendToDisplay('+')">+</button>

</div>

</div>

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

</body>

</html>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f4f4f4;

margin: 0;

.calculator {

background-color: white;

border-radius: 10px;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

padding: 20px;
width: 260px;

.display {

width: 100%;

height: 50px;

text-align: right;

font-size: 24px;

padding: 10px;

margin-bottom: 10px;

border: 2px solid #ddd;

border-radius: 5px;

.buttons {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 10px;

button {

padding: 20px;

font-size: 18px;

background-color: #f0f0f0;

border: 1px solid #ccc;

border-radius: 5px;

cursor: pointer;
transition: background-color 0.3s;

button:hover {

background-color: #ddd;

button:active {

background-color: #ccc;

// Function to append value to the display

function appendToDisplay(value) {

document.getElementById('display').value += value;

// Function to clear the display

function clearDisplay() {

document.getElementById('display').value = '';

// Function to calculate the result

function calculateResult() {

try {

let result = eval(document.getElementById('display').value);

document.getElementById('display').value = result;
} catch (e) {

document.getElementById('display').value = 'Error';

You might also like