Membuat Kalkukator 3D Sederhana Dengan HTML5 Dan JavaScript itulah materi yang akan kita pelajari pada kali ini.
Membuat Kalkukator 3D Sederhana Dengan HTML5 Dan JavaScript
Jumat, Juli 05, 2019
Daftar Isi [Tampil]
Membuat Kalkukator 3D Sederhana Dengan HTML5 Dan JavaScript itulah materi yang akan kita pelajari pada kali ini.
Dengan kalkulator 3D ini Anda dapat menghitung pertambahan, perkalian, pengurangan, dan juga pembagian.
Seperti pada kalkulator yang telah kita buat sebelumnya yaitu, kalkulator dengan python, dan kalkulator dengan codeigiter.
Namun kalkulator 3D ini spesial, karena kalkulator ini memiliki tampilan yang 3D, dan elegan.
Untuk Membuat Kalkukator Sederhana Dengan HTML5 Dan JavaScript ini, ada bahasa pemrograman lain yang dipakai untuk menyempunakan kalkulator 3D ini, bahasa pemrograman tersebut adalah CSS.
Seperti yang telah kita ketahui pada artikel sebelumnya, yaitu mengenal bahasa pemrograman untuk pemula, CSS adalah bahasa pemrograman yang akan membuat tampilan atau layout nya menjadi menarik.
Membuat Kalkukator Sederhana Dengan HTML5 Dan JavaScript
Untuk Membuat Kalkukator Sederhana Dengan HTML5 Dan JavaScript ini, Anda memerlukan teks editor seperti sublime, dan visual studio code.
Kenapa Anda memerlukan teks editor tersebut?
Jawaban nya yaitu agar Anda dapat lebih mudah membuat dan mempelajari script atau code kalkulator 3D sederhana dengan HTML5 dan JavaScript ini.
Selain teks editor Anda juga memerlukan koneksi internet, karena kalkulator 3D ini menggunakan font awesome, font segment7, dan font rubik dari googleapis secara ekternal.
Tapi jangan khawatir Anda juga dapat mengubah script nya nanti menjadi internal, atau dengan kata lain kalkulator 3D Offline.
Sekarang mari kita buat kalkulator 3D sederhana dengan HTML5 dan JavaScript ini.
Langkah-langkah Membuat Kalkukator 3D Sederhana Dengan HTML5 Dan JavaScript
Agar kalkulator 3D ini dapat Anda buat dengan mudah ikutilah panduan membuat nya dibawah ini.
1. Buka teks editor andalan Anda, dan buat file baru dengan menekan CRL+N jika Anda menggunakan sublime atau visual studio code.
2. Berinama file tersebut dengan nama "Kalkulator 3D Sederhana.html".
3. Kemudian Anda ketik, atau copy script kalkulator 3D sederhana dengan HTML5 dan JavaScript dibawah ini.
<!doctype html>
<html>
<head>
<title>Kalkulator PanduanCode</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/segment7" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<script>
function insert(num) {
var a = document.form.textview;
a.value += num;
}
function equal() {
var a = document.form.textview;
var exp = a.value;
if (exp) {
a.value = eval(exp);
}
}
function clean() {
document.form.textview.value = '';
}
function back() {
var exp = document.form.textview.value;
document.form.textview.value = exp.substring(0, exp.length-1);
}
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
.main {
width: 400px;
height: 600px;
position: relative;
top: -8.5%;
left: -6%;
margin: auto;
background: #5c5859;
padding: 0;
border-radius: 20px;
box-shadow: 0 5px 50px 0 rgba(0, 0, 0, .5);
box-shadow: inset 0 -5px 10px 5px rgba(0, 0, 0, .5);
transform: scale(.8);
}
.textview {
width: 90%;
height: 90px;
position: absolute;
right: 0;
left: 0;
margin: 24px auto 15px auto;
font-size: 50px;
text-align: right;
font-family: 'Segment7Standard';
font-family: 'Rubik', sans-serif;
background: #cddecc;
color: #6d756b;
border: none;
padding: 0 5px 0 0;
border-radius: 15px;
overflow-x: scroll;
box-shadow: inset 0 -5px 10px 2px #6b756a,
0 5px 10px 0px #3f423f;
/* padding: 5px;*/
}
table {
position: absolute;
/*top: 0;
right: 0;*/
bottom: 0;
/* left: 0;*/
/* display: flex;
justify-content: center;
align-items: center;*/
margin: 0 5px 18px 23px;
}
#clean {
background: #ff1900;
color: #fff;
box-shadow: inset 0 5px 10px 0 #ff1900,
inset 0 -5px 10px 3px #2d1f1fba,
0 5px 10px 0px #1e211e;
}
#clean:active {
box-shadow: inset 0 -5px 10px 0 #ff1900,
inset 0 5px 10px 3px #2d1f1fba,
0 0px 10px 0px #3f423f00;
}
#img {
width: 80%;
height: 80%;
}
#plus,
#first {
height: 164px;
}
#equal,
#second {
width: 164px;
}
#second {
background: #31e008;
color:#fff;
box-shadow: inset 0 5px 10px 0 #31e008, inset 0 -5px 10px 3px #2a5a22bf, 0 5px 10px 0px #1e211e;
}
#second:active {
box-shadow: inset 0 -5px 10px 0 #31e008,
inset 0 5px 10px 3px #2a5a22bf,
0 0px 10px 0px #3f423f00;
}
.button {
width: 76px;
height: 76px;
font-size: 50px;
font-weight: 900;
position: relative;
left: 0;
right: 0;
margin: 4px;
border: none;
border-radius: 18px;
font-family: 'Rubik', sans-serif;
background: #f0eeef;
color: #3b3b3c;
box-shadow: inset 0 5px 10px 0 #fff,
inset 0 -5px 10px 3px #847a7aba,
0 5px 10px 0px #1e211e;
display: flex;
justify-content: center;
align-items: center;
}
.main table tr td .button:active {
box-shadow: inset 0 -5px 10px 0 #fff,
inset 0 5px 10px 3px #847a7aba,
0 0px 10px 0px #3f423f00;
}
.inner {
height: 100%;
width: 100%;
position: relative;
top: 0;
bottom: 0;
margin: auto 0 auto 0;
/* background: green;*/
padding: 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.main table tr td .button .inner:active {
transform: translateY(5px) scale(.98);
}
</style>
</head>
<body>
<div class="main">
<form name="form">
<input class="textview" name="textview" placeholder="0" style="overflow: scroll;" disabled>
</form>
<table>
<tr>
<td>
<div class="button" id="clean" onclick="clean()"><div class="inner">C</div>
</div>
</td>
<td>
<div class="button" onclick="back()"><div class="inner"><img alt="←" id="img" src="https://www.dropbox.com/s/2jmv326a6rdvijq/Clear.png?raw=1"></div>
</div>
</td>
<td>
<div class="button" onclick="insert('/')"><div class="inner">÷</div>
</div>
</td>
<td>
<div class="button" onclick="insert('*')"><div class="inner">×</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="button" onclick="insert(7)"><div class="inner">7</div>
</div>
</td>
<td>
<div class="button" onclick="insert(8)"><div class="inner">8</div>
</div>
</td>
<td>
<div class="button" onclick="insert(9)"><div class="inner">9</div>
</div>
</td>
<td>
<div class="button" onclick="insert('-')"><div class="inner">-</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="button" onclick="insert(4)"><div class="inner">4</div>
</div>
</td>
<td>
<div class="button" onclick="insert(5)"><div class="inner">5</div>
</div>
</td>
<td>
<div class="button" onclick="insert(6)"><div class="inner">6</div>
</div>
</td>
<td rowspan="2" id="plus">
<div id="first" class="button" onclick="insert('+')"><div class="inner">+</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="button" onclick="insert(1)"><div class="inner">1</div>
</div>
</td>
<td>
<div class="button" onclick="insert(2)"><div class="inner">2</div>
</div>
</td>
<td>
<div class="button" onclick="insert(3)"><div class="inner">3</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="zero" class="button" onclick="insert(0) //zero()"><div class="inner">0</div>
</div>
</td>
<td>
<div class="button" onclick="insert('.')"><div class="inner">.</div>
</div>
</td>
<td colspan="2" id="equal">
<div id="second" class="button" onclick="equal()"><div class="inner">=</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
4. Jika sudah silahkan save dan coba run kalkulator 3D sederhana dengan HTML5 dan JavaScript tersebut.
Nah jika semua nya berjalan dengan lancar, maka Anda sudah berhasil membuat kalkulator 3D sederhana dengan HTML5 Dan JavaScript tersebut.
Untuk contoh demo kalkulator 3d sederhana dengan html5 dan javascript ini silahkan coba kalkulator dibawah ini.
Bagaimana hasil penghitungan dari kalkulator 3D sederhana tersebut?
Untuk contoh demo kalkulator 3d sederhana dengan html5 dan javascript ini silahkan coba kalkulator dibawah ini.
Demo kalkulator 3D HTML5 Dan Javascript
Bagaimana hasil penghitungan dari kalkulator 3D sederhana tersebut?
Sudah pasti hasilnya benar iya kan, menurut Anda bagaimana dengan tampilan kalkulator 3D sederhana tersebut, apakah sudah keren atau masih kurang?
Terus apakah Anda lebih suka kalkulator 3D sederhana degan HTML5 ini, atau Anda lebih menyukai kalkulator dengan codeigniter, ataupun kalkulator python yang telah kita buat pada postingan sebelumnya?
Silahkan sampaikan pendapat Anda di kolom komentar dibawah ya. Agar panduancode dapat membuat konten artikel yang lebih menarik lagi di kemudian hari.
Akhir kata dari panduancode jangan lupa titik koma.
Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.
