Membuat Kalkukator 3D Sederhana Dengan HTML5 Dan JavaScript

Membuat Kalkukator 3D Sederhana Dengan HTML5 Dan JavaScript

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, membuat kalkulator dengan python, dan membuat 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

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.

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.

Berlangganan Artikel Terbaru Via E-mail:

4 Responses to "Membuat Kalkukator 3D Sederhana Dengan HTML5 Dan JavaScript"

  1. Ini kalau dibuat aplikasi bisa ya min

    BalasHapus
    Balasan
    1. Iya bisa, dan pasti size nya kecil jadi cocok buat Android / Laptop spek rendah.

      Hapus
  2. Saran aja min di bawah/diakhir artikel dikasih video tutorialnya sekalian biar makin joss lagi

    BalasHapus

Terimakasih telah berkomentar di Panduan Code, semoga komentar anda dapat membangun situs ini menjadi lebih baik lagi.

Iklan Atas Artikel

Iklan Atas Artikel1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Donasi

Hallo sobat panduan code, Anda dapat memberikan suport kepada kami dengan cara memberikan donasi, yang mana nantinya donasi tersebut akan digunakan untuk memperpanjang Domain Panduan code.



BANK BRI:401101013389533 a/n ARIF NOERWAHIDIN
PULSA : 082126546564
PAYPAL : panduancode
Done