Cara Membuat Kalkulator Minimalis Bergaya Gen Z dengan HTML, CSS, dan JavaScript
Kalkulator adalah alat yang sering digunakan dalam kehidupan sehari-hari. Untuk generasi muda yang menginginkan desain yang lebih modern dan stylish, kita akan membuat kalkulator dengan tampilan minimalis dan warna soft khas Gen Z menggunakan HTML, CSS, dan JavaScript. Berikut langkah-langkahnya:
1. Struktur HTML
Kita mulai dengan membuat struktur dasar HTML untuk kalkulator.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Gen Z</title>
</head>
<body>
<div class="calculator">
<input type="text" class="display" id="display" disabled>
<div class="buttons">
<button class="wide" onclick="clearDisplay()">AC</button>
<button onclick="backspace()">⌫</button>
<button class="operator" onclick="appendValue('*')">×</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button class="operator" onclick="appendValue('/')">÷</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button class="operator" onclick="appendValue('-')">−</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button class="operator" onclick="appendValue('+')">+</button>
<button onclick="appendValue('.')">.</button>
<button onclick="appendValue('0')">0</button>
<button class="equal operator" onclick="calculate()">=</button>
<button class="operator" onclick="appendValue('%')">%</button>
</div>
</div>
</body>
</html>
2. Desain dengan CSS
Agar tampilan lebih modern dan minimalis, kita tambahkan CSS dengan warna pastel soft.
<style>
body {
font-family: 'Poppins', sans-serif;
text-align: center;
background-color: #f0f0f3;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
background: #ffffff;
padding: 20px;
border-radius: 15px;
box-shadow: 8px 8px 15px #babecc, -8px -8px 15px #ffffff;
}
.display {
width: 100%;
height: 60px;
font-size: 2em;
text-align: right;
margin-bottom: 15px;
border: none;
background: #ecf0f3;
padding: 10px;
border-radius: 10px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 15px;
font-size: 1.5em;
border: none;
background: #ecf0f3;
cursor: pointer;
border-radius: 10px;
box-shadow: 3px 3px 5px #babecc, -3px -3px 5px #ffffff;
}
button:active {
box-shadow: inset 3px 3px 5px #babecc, inset -3px -3px 5px #ffffff;
}
.operator {
background: #ff8c8c;
color: white;
}
.operator:active {
background: #ff6b6b;
}
.wide {
grid-column: span 2;
}
</style>
3. Fungsi JavaScript
Tambahkan JavaScript agar kalkulator bisa berfungsi.
<script>
function appendValue(value) {
document.getElementById("display").value += value;
}
function clearDisplay() {
document.getElementById("display").value = "";
}
function backspace() {
let display = document.getElementById("display");
display.value = display.value.slice(0, -1);
}
function calculate() {
try {
document.getElementById("display").value = eval(document.getElementById("display").value);
} catch {
alert("Input tidak valid!");
}
}
</script>
Kesimpulan
Dengan menggunakan HTML, CSS, dan JavaScript, kita bisa membuat kalkulator dengan desain minimalis yang lebih modern dan cocok untuk generasi muda. Dengan tampilan soft dan bersih, kalkulator ini memberikan pengalaman pengguna yang lebih nyaman. Selamat mencoba!
Posting Komentar untuk "Cara Membuat Kalkulator Minimalis Bergaya Gen Z dengan HTML, CSS, dan JavaScript"