Berikut adalah contoh kode untuk membuat kalkulator dan jam digital menggunakan HTML, CSS, dan JavaScript.
HTML (index.html)
HTML
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator dan Jam Digital</title>
</head>
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<div class="digital-clock" id="clock"></div>
<button onclick="clearResult()">C</button>
<button onclick="calculate()">=</button>
<button onclick="appendNumber(1)">1</button>
<button onclick="appendNumber(2)">2</button>
<button onclick="appendNumber(3)">3</button>
<button onclick="appendNumber(4)">4</button>
<button onclick="appendNumber(5)">5</button>
<button onclick="appendNumber(6)">6</button>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="appendNumber(0)">0</button>
<button onclick="appendOperator('+')">+</button>
<button onclick="appendOperator('-')">-</button>
<button onclick="appendOperator('*')">*</button>
<button onclick="appendOperator('/')">/</button>
</div>
</body>
</html>CSS (style.css)
CSS
/* CSS untuk kalkulator */
body {
background-color: #2e466e;
}
.calculator {
width: 300px;
margin: 40px auto;
padding: 40px;
border: 2px solid #ccc;
border-radius: 5px;
background-color:#7d5d3b;
}
.calculator input[type="text"] {
box-sizing : border-box;
width: 100%;
padding: 10px;
font-size: 11pt;
margin-bottom: 20px;
border-top: #000 2px solid;
}
.calculator button {
width: 48%;
background-color: #eae0c2;
padding: 10px;
border-top: #000 2px solid;
color: #000;
text-decoration: none;
font-weight: bold;
margin: 5px auto;
border-radius: 4px;
}
.calculator button:hover {
background:linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%);
background-color:#ccc2a6;
}
.calculator button:active {
position:relative;
top:1px;
}
/* CSS untuk jam digital */
.digital-clock {
width: 275px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
font-size: 24px;
box-shadow:inset 0px 1px 0px 0px #a6827e;
background:linear-gradient(to bottom, #7d5d3b 5%, #634b30 100%);
background-color:#7d5d3b;
color: #fff;
}JavaScript (script.js)
JavaScript
// JavaScript untuk kalkulator
function appendNumber(number) {
document.getElementById('result').value += number;
}
function appendOperator(operator) {
document.getElementById('result').value += operator;
}
function calculate() {
var result = eval(document.getElementById('result').value);
document.getElementById('result').value = result;
}
function clearResult() {
document.getElementById('result').value = '';
}
// JavaScript untuk jam digital
function updateClock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
var time = hours + ':' + minutes + ':' + seconds;
document.getElementById('clock').innerHTML = time;
setTimeout(updateClock, 1000);
}
updateClock();Output:
See the Pen Jam Digital menggunakan HTML, CSS, dan JavaScript by WebbizID (@De-Orchids) on CodePen.
Baca juga:
Silakan gunakan kode di atas untuk membuat kalkulator dan jam digital menggunakan HTML, CSS, dan JavaScript. Anda dapat menyesuaikan tampilan dan fungsionalitas sesuai kebutuhan Anda.
Leave a Reply