Part 3: Menambahkan CSS pada Web Kalkulator
Pada Part 3 ini, kita akan belajar bagaimana cara memberikan tampilan yang lebih menarik pada web kalkulator menggunakan CSS (Cascading Style Sheets). Jika sebelumnya kalkulator hanya berupa elemen HTML biasa, kali ini kita akan mempercantik tampilannya.
Apa itu CSS?
CSS adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dari halaman web, seperti warna, ukuran, tata letak, dan gaya teks. Dengan CSS, kalkulator yang kita buat akan terlihat lebih rapi dan modern.
Langkah-langkah Menambahkan CSS
- Buka file
index.htmlyang sudah dibuat pada Part 2. - Tambahkan kode CSS di dalam tag
<style>pada bagian<head>. - Atur tampilan kalkulator agar terlihat lebih bagus.
Contoh Kode CSS
<style>
body {
font-family: 'Poppins', sans-serif;
display: flex;
flex-direction: column; /* ✅ jadi tersusun vertikal */
justify-content: center; /* konten di tengah vertikal */
align-items: center; /* konten di tengah horizontal */
min-height: 100vh;
background-color: #e0e0e0;
margin: 0;
}
.calculator {
background-color: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
max-width: 360px; /* Lebih lebar agar sesuai dengan tampilan */
width: 100%;
}
#result {
width: 90%;
height: 80px; /* Lebih tinggi agar lebih nyaman */
text-align: right;
font-size: 36px; /* Font lebih besar untuk visibilitas */
margin-bottom: 20px;
padding: 20px; /* Padding lebih besar */
border: none;
border-radius: 10px;
background-color: #f7f7f7;
box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1);
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
button {
height: 60px;
font-size: 24px;
font-weight: bold;
background-color: #f1f1f1;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
button:hover {
background-color: #d9d9d9;
}
button:active {
transform: scale(0.98);
box-shadow: none;
}
button.zero {
grid-column: span 2;
}
button:nth-child(4n + 4) {
background-color: #ff6666;
color: white;
}
button:nth-child(4n + 4):hover {
background-color: #ff4d4d;
}
button:nth-child(4n + 4):active {
transform: scale(0.98);
}
button#equals {
background-color: #4CAF50;
color: white;
}
button#equals:hover {
background-color: #45a049;
}
</style>
Dengan CSS di atas, tampilan kalkulator akan lebih menarik dan nyaman digunakan.
Kesimpulan
Pada Part 3 ini, kita telah mempelajari bagaimana cara menambahkan CSS agar kalkulator terlihat lebih rapi dan modern. Pada Part 4 nanti, kita akan melanjutkan dengan menambahkan JavaScript agar kalkulator bisa melakukan perhitungan.