Cara membuat kalkulator dengan HTML dan CSS
Cara Membuat Kalkulator
Hai teman-teman perkenalkan nama saya Pilip Mulyadi, saya adalah seorang siswa kelas 11 dan saya mengambil jurusan TKJ atau yang disebut dengan (Teknik Komputer dan jaringan). Saya suka sekali dengan web desain dan pada kesempatan kali ini saya akan memberikan sebuah materi yang berisi tentang HTML dan CSS. Semoga dengan ilmu yang saya bagikan kepada kalian semua bermanfaat.
Ok teman - teman di kesempatan kali ini saya akan memberikan tutorial bagaimana cara membuat kalkulator. Kita sudah tahu bagaimana bentuk dari sebuah kalkulator. Kalkulator ini bisa berfungsi seperti kalkulator pada umumnya. Untuk membuat kalkulator di html, kalian harus menyediakan editor teks/Notepad dan simpan dengan format html. Daripada kalian penasaran coding htmlnya seperti apa, berikut dibawah inilah codingnya :
<html>
<head>
<style>
body { background-color: gray;}
div.a {text-align: center;}
div.b {text-align: left;}
.ckr {
width: 300px;
border-radius: 22px;
padding: 10px 15px;
font-size: 22px;
font-height: bold;
margin: auto;
background: linear-gradient(50deg, blue,black);
color: deepskyblue;
font-variant: small-caps;
text-shadow: 1px 1px 3px;
border: 7px solid deepskyblue;
text-align: center;
main-effect: neonEffect 12s infinite;}
input[type=text]{
width:80%;
border-radius:10;
padding:10px;
font-size:22px;
font-height:bold;
margin-top:20px;
box-shadow: 5px 10px 10px;
color: deepskyblue;
font-variant: small-caps;
text-shadow: 1px 1px 3px;
main-effect: neonEffect 12s infinite;}
input[type=button]{
width:70px;
border-radius:5;
padding:10px;
font-size:22px;
font-height:bold;
box-shadow: 5px 7px 15px;
color:deepskyblue;
font-weight:normal;
font-variant: small-caps;
text-shadow: 1px 1px 3px;
main-effect: neonEffect 12s infinite;}
h3 {box-shadow: 5px 10px 15px;
border-radius:100px;
padding: 5px 5px;
background-color: snow;
color: deepskyblue;
font-style : oblique;
font-family: times-new-roman;
font-height: bold;
margin-top: 20px;
text-shadow: 1px 1px 3px;
Main-effect: neonEffect 12s infinite;}
#del {width:49%;}
</style>
</head>
<body>
<div class="a">
<form name="cal">
<div class="ckr">
<h3> 💎Pilip Mulyadi💎 </h3>
<input type="text" name="display" placeholder="Masukan">
<br> <br>
<input type="button" value="7" onclick="cal.display.value+='7'">
<input type="button" value="8" onclick="cal.display.value+='8'">
<input type="button" value="9" onclick="cal.display.value+='9'">
<input type="button" value="x" onclick="cal.display.value+='*'">
<br> <br>
<input type="button" value="4" onclick="cal.display.value+='4'">
<input type="button" value="5" onclick="cal.display.value+='5'">
<input type="button" value="6" onclick="cal.display.value+='6'">
<input type="button" value="-" onclick="cal.display.value+='-'">
<br> <br>
<input type="button" value="1" onclick="cal.display.value+='1'">
<input type="button" value="2" onclick="cal.display.value+='2'">
<input type="button" value="3" onclick="cal.display.value+='3'">
<input type="button" value="+" onclick="cal.display.value+='+'">
<br> <br>
<input type="button" value="0" onclick="cal.display.value+='0'">
<input type="button" value="%" onclick="cal.display.value+='%'">
<input type="button" value="( )" onclick="cal.display.value+='( )'">
<input type="button" value="/" onclick="cal.display.value+='/'">
<br> <br>
<div class="Cikarang">
<input type="button" value="Hapus" onclick="cal.display.value=''" id="del">
<input type="button" value="." onclick="cal.display.value+='.'">
<input type="button" value="=" onclick="cal.display.value=eval (cal.display.value)">
</form>
</body>
</html>
Dan tampilannya akan seperti gambar di bawah ini :
Kalian bisa mengganti warnanya dengan cara mengubah CSSnya
Contoh :
Perhatikan gambar teks berikut ini :
Kalian bisa mengubah color dan backgroundnya sesuai yang kalian inginkan
Begitupun seterusnya dengan tombol dan teksnya....
Bila kalian suka, silahkan komen & share kepada teman anda. Sekian dari saya mohon maaf jika ada kesalahan mohon dimaafkan dan terimakasih.
asek pilip buka blog
ReplyDelete