隨著移動互聯網的發展，計算器的使用越來越方便了。但是，如何制作一個美觀、實用的計算器呢？CSS和JS的使用是計算器制作中必不可少的一步。

首先說說CSS的使用。計算器中的樣式設計可以通過CSS來實現。比如，我們可以使用border屬性來設置計算器按鈕的邊框，background-color屬性來設置按鈕的背景色等等。此外，我們還可以使用flex布局來實現自適應和響應式的計算器設計。下面是一個CSS的示例代碼：

.calculator-button {
width: 50px;
height: 50px;
border: 1px solid #ccc;
background-color: #f6f6f6;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

接下來是JS的使用。在計算器制作中，JS可以用來實現按鈕的點擊響應和計算邏輯的編寫。我們可以使用addEventListener方法來監聽按鈕的點擊事件，然后在回調函數中編寫對應的邏輯。比如，下面的代碼演示了如何實現加法的運算邏輯：

const add = (num1, num2) =>{
return num1 + num2
}
const equalsButton = document.querySelector(".calculator-equals")
equalsButton.addEventListener("click", () =>{
const input1 = document.querySelector(".calculator-input1").value
const input2 = document.querySelector(".calculator-input2").value
const result = add(Number(input1), Number(input2))
document.querySelector(".calculator-result").value = result
})

綜上所述，CSS和JS在計算器制作中扮演著重要的角色，讓我們能夠制作出真正實用的計算器。掌握這些技能，無疑將會是你在前端開發道路上的重要進步。