Skip to content

Instantly share code, notes, and snippets.

Created August 4, 2023 10:09
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
.calculator {
width: 250px;
/* Rest of the CSS remains the same */
.calculator {
width: 250px;
margin: 0 auto;
.display {
border: 1px solid #ccc;
padding: 5px;
text-align: right;
margin-bottom: 10px;
.result {
font-size: 20px;
font-weight: bold;
margin-top: 5px;
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
button[value="="] {
grid-column: span 2;
button {
width: 100%;
height: 40px;
background-color: #f0f0f0;
border: 1px solid #ccc;
cursor: pointer;
font-size: 16px;
button:hover {
background-color: #d0d0d0;
button:active {
background-color: #ccc;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment