Widget kalkulator (gagal)
/* Gaya CSS untuk kalkulator */
.calculator {
width: 300px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
grid-template-areas:
"empty empty empty divide"
"seven eight nine multiply"
"four five six subtract"
"one two three add"
"empty zero dot equals"
"clear clear clear delete";
}
.calculator input[type="text"] {
width: 100%;
font-size: 20px;
padding: 5px;
margin-bottom: 10px;
grid-area: empty;
}
.calculator button {
font-size: 18px;
padding: 10px;
text-align: center;
cursor: pointer;
}
/* Pengaturan grid area untuk setiap tombol */
button[data-action="clear"] {
grid-area: clear;
}
button[data-action="delete"] {
grid-area: delete;
}
button[data-action="divide"] {
grid-area: divide;
}
button[data-action="multiply"] {
grid-area: multiply;
}
button[data-action="subtract"] {
grid-area: subtract;
}
button[data-action="add"] {
grid-area: add;
}
button[data-value="0"] {
grid-area: zero;
}
button[data-value="1"] {
grid-area: one;
}
button[data-value="2"] {
grid-area: two;
}
button[data-value="3"] {
grid-area: three;
}
button[data-value="4"] {
grid-area: four;
}
button[data-value="5"] {
grid-area: five;
}
button[data-value="6"] {
grid-area: six;
}
button[data-value="7"] {
grid-area: seven;
}
button[data-value="8"] {
grid-area: eight;
}
button[data-value="9"] {
grid-area: nine;
}
button[data-action="equals"] {
grid-area: equals;
}
button[data-value="."] {
grid-area: dot;
}