Scribd
Upload
2 views

!-- Calculator Buttons --

The document provides the HTML and CSS code for a calculator interface, including buttons for numbers and operations. It emphasizes the use of HTML entities for displaying symbols and includes styling details for the calculator's body, display screen, and buttons. The CSS also specifies button dimensions, colors, and hover effects to enhance user interaction.

Uploaded by

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

!-- Calculator Buttons --

The document provides the HTML and CSS code for a calculator interface, including buttons for numbers and operations. It emphasizes the use of HTML entities for displaying symbols and includes styling details for the calculator's body, display screen, and buttons. The CSS also specifies button dimensions, colors, and hover effects to enhance user interaction.

Uploaded by

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

<!

-- Calculator Buttons -->


<div class="calc-button-row">
<button class="ac">AC</button>
<button class="opt">&#43;&#47;&#8722;</button>
<button class="opt">&#37;</button>
<button class="opt">&#247;</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="opt">&#215;</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="opt">&#8722;</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="opt">&#43;</button>
<button>0</button>
<button>.</button>
<button>&#9003;</button>
<button class="opt">&#61;</button>
</div>
</div>
It is good practice to use HTML entities to display symbols.

The CSS code that styles the structure of the calculator is shown below:

/*Calculator Body*/
.calc-body {
width: 275px;
margin: auto;
min-height: 400px;
box-shadow: 0 8px 50px -7px black;
background: #3A4655;
}
/*Calculator Display Screen*/
.calc-screen {
padding: 1rem;
}
#calc-operation {
font-size: 1.3rem;
text-align: right;
color: #727B86;
padding-bottom: .5rem;
}
#calc-typed {
font-size: 2rem;
text-align: right;
color: #fff;
}
/*Calculator Buttons*/
.calc-button-row{
display: table;
}
.calc-button-row button {
display: table-cell;
width: 25%;
background: #425062;
color: #fff;
height: 65px;
font-size: 1.3rem;
border: none;
border-color:#3C4857;
border-width: 1px 1px 0px 0;
border-style: solid;
}
.calc-button-row button.ac {
color: #ff7665;
}
.calc-button-row button.opt {
color: #ffbc56;
}
/*The border has been managed in every fourth button so that the design will not
distract.*/
.calc-button-row button:nth-child(4n){
border-right: none;
}
.calc-button-row button:active {
position: relative;
top: 1px;
}
.calc-button-row button:hover {
background: #3e4b5c;
}
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates

© 2009 — 2024 W3schools® of Technology.


About UsContact UsCopyrightPrivacy Policy

You might also like