Scribd
Upload
5 views5 pages

Calculator Usig Css Style Sheet Code

The document outlines the creation of a simple calculator using HTML, CSS, and JavaScript. It includes a structured layout with a display area and buttons arranged in a grid format, styled for a modern appearance. The CSS provides styling for the calculator's body, display, and buttons, enhancing user interaction with hover effects.

Uploaded by

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

Calculator Usig Css Style Sheet Code

The document outlines the creation of a simple calculator using HTML, CSS, and JavaScript. It includes a structured layout with a display area and buttons arranged in a grid format, styled for a modern appearance. The CSS provides styling for the calculator's body, display, and buttons, enhancing user interaction with hover effects.

Uploaded by

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

Calculator usig html

css javascript
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title> <style> body { display: flex;
justify-content: center; align-items: center; height: 100vh;
background-color: #f4f4f4; }
.calculator { width: 250px; background: #222; padding:
20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0,
0, 0.3); } .display { width: 100%; height: 50px;
text-align: right; font-size: 2em; padding: 10px; border:
none; background: #333; color: white; border-radius:
5px;
} .buttons { display: grid; grid-template-columns: repeat(4,
1fr); gap: 10px; margin-top: 10px; } button
{ height: 50px; font-size: 1.2em; border: none;
border-radius: 5px; background: #444; color: white;
cursor: pointer;
} button:hover { background: #666; }

You might also like