پیشنمایش زنده
کد HTML
<div class="calculator">
<div class="output">
<span class="result"></span>
</div>
<div class="buttons">
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>*</button>
<button class="bg-red">C</button>
<button>0</button>
<button class="bg-green">=</button>
<button>/</button>
</div>
</div>
کد CSS
.calculator {
border: 1px solid rgb(179, 179, 179);
border-radius: 0.375rem;
width: 190px;
height: 254px;
font-family: Arial, sans-serif;
margin: 0 auto;
padding: 10px;
}
.output {
border: 1px solid #ccc;
border-radius: 0.375rem;
height: 40px;
margin-bottom: 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
}
.result {
font-size: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
button {
border: none;
border-radius: 0.375rem;
padding: 10px;
background-color: #eee;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #ddd;
}
button:active {
background-color: #ccc;
}
.bg-green {
background-color: rgba(0, 177, 29, 0.651);
color: white;
}
.bg-green:hover {
background-color: rgba(0, 231, 39, 0.651);
color: white;
}
.bg-red {
background-color: rgba(223, 4, 4, 0.651);
color: white;
}
.bg-red:hover {
background-color: rgba(255, 1, 1, 0.651);
color: white;
}