Membuat Kalkulator Sederhana Menggunakan HTML, CSS dan JavaScript
 |
| Live Demo (note: untuk tampilan mobile/HP tata letaknya agak berantakan). |
Disini saya menggunakan Visual Studio Code untuk text editornya. Kalian bisa menggunakan text editor lainnya seperti Sublime Text ataupun Notepad++ yang penting fungsinya sama. Untuk pengguna android kalian bisa menggunakan text editor Dcoder Untuk menulis kode HTMLnya.
Langkah pertama, silahkan kalian buat file HTMLnya dulu terserah mau kasih nama apa file HTMLnya. Disini kita buat file HTML dan CSSnya terpisah untuk mempermudah pengeditan. Selanjutnya membuat file CSS, terserah kalian juga mau kasih nama apa file CSSnya, kalau saya kasih nama syntax.css
Setelah kedua file tersebut selesai dibuat, selanjutnya masukkan kode dibawah ini di file HTML.
<!DOCTYPE html>
<html>
<head>
<title>Memebuat Kalkulator Sederhana</title>
<link rel="stylesheet" type="text/css" href="syntax.css">
</head>
Perlu diperhatikan, pada bagian href="syntax.css" merupakan bagian untuk memanggil file CSS, jika kalian memberi nama file CSSnya berbeda dengan punya saya, maka pada bagian syntax.css kalian ganti dengan nama file CSS punya kalian. (href="nama-file.css")
Selanjutnya menambahkan kode JavaScript onclick di bagian tag <body> HTML.
<body>
<form class="calculator" name="calc">
<input class="value" type="text" name="txt" readonly="">
<span class="num clear" onclick="document.calc.txt.value =''">c</span>
<span class="num" onclick="document.calc.txt.value +='/'">÷</span>
<span class="num" onclick="document.calc.txt.value +='*'">x</span>
<span class="num" onclick="document.calc.txt.value +='7'">7</span>
<span class="num" onclick="document.calc.txt.value +='8'">8</span>
<span class="num" onclick="document.calc.txt.value +='9'">9</span>
<span class="num" onclick="document.calc.txt.value +='-'">-</span>
<span class="num" onclick="document.calc.txt.value +='4'">4</span>
<span class="num" onclick="document.calc.txt.value +='5'">5</span>
<span class="num" onclick="document.calc.txt.value +='6'">6</span>
<span class="num plus" onclick="document.calc.txt.value +='+'">+</span>
<span class="num" onclick="document.calc.txt.value +='3'">3</span>
<span class="num" onclick="document.calc.txt.value +='2'">2</span>
<span class="num" onclick="document.calc.txt.value +='1'">1</span>
<span class="num" onclick="document.calc.txt.value +='0'">0</span>
<span class="num" onclick="document.calc.txt.value +='00'">00</span>
<span class="num" onclick="document.calc.txt.value +='.'">.</span>
<span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
</form>
</body>
</html>
Langkah selanjutnya mengatur warna dan tata letaknya di CSS. Tulid kode dibawah ini di file CSS kalian.
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swab');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
min-height: 100vh;
background: #091921;
.calculator
{
position: absolute;
top: 25%;
display: grid;
}
.calculator .value
{
grid-column: span 4;
height: 100px;
text-align: right;
border: none;
outline: none;
padding: 10px;
font-size: 18px;
}
.calculator span
{
display: grid;
width: 60px;
height: 60px;
color: #fff;
background: #0c2835;
place-items: center;
border: 1px rgba(0,0,0,1);
}
.calculator span:active
{
background-color: #74ff3b;
color: #111;
}
.calculator span.clear
{
grid-column: span 2;
width: 120px;
background: #ff3077;
}
.calculator span.plus
{
grid-row: span 2;
height: 120px;
}
.calculator span.equal
{
background: #03b1ff;
}
Kalkulatornya sudah jadi, sekian tutorial dari saya apabila ada kendala boleh ditanyakan dengan meninggalkan komentar dibawah
0 Response to "Membuat Kalkulator Sederhana Menggunakan HTML, CSS dan JavaScript"
Posting Komentar