Membuat Kalkulator dengan Javascript Model iPhone

samuelpasaribu.com
26 Feb, 2022

Membuat Kalkulator dengan Javascript Dalam tutorial ini kita akan membuat kalkulator yang berfungsi penuh hanya dengan menggunakan HTML, CSS, dan Javascript. Disini Anda juga akan belajar tentang penanganan peristiwa, dan manipulasi DOM di seluruh proyek. Kami pikir ini adalah salah satu proyek untuk pemula yang bagus untuk mereka yang ingin menjadi pengembang web.

Dalam posting ini membahas tentang artikel epik di mana Anda belajar cara membuat kalkulator dari awal. Kami akan fokus pada JavaScript yang Anda butuhkan untuk menulis tentang cara berpikir dalam membangun kalkulator, cara menulis kode dari awal hingga akhir. Untuk membuat kalkulator dengan javascript seperti model iphone ini anda bisa membaca postingan ini sampai selesai yang membahas tentang cara membuat kalkulator dengan javascript.


Cara Membuat Kalkulator iPhone menggunakan HTML CSS & JavaScript


Mari buat Kalkulator iPhone yang berfungsi penuh hanya dengan menggunakan HTML, CSS, dan JavaScript! Kami bahkan memiliki jam yang berfungsi penuh! Tutorial ramah-pemula ini akan memandu Anda melalui seluruh proses pembuatan kalkulator dari awal hingga akhir.

Kami mendorong Anda untuk mencoba dan membuat kalkulator Anda sendiri sebelum mengambil pelajaran. Ini adalah praktik yang baik, karena Anda akan melatih diri Anda untuk berpikir seperti seorang pengembang.

Kembali ke poin utama, setelah Anda mencoba selama satu jam atau lebih, tidak masalah apakah Anda berhasil atau gagal. Karena ketika Anda mencoba, Anda berpikir, dan itu akan membantu Anda menyerap pelajaran dalam waktu cepat ganda. Dengan itu, mari kita mulai dengan memahami cara membuat kalkulator dengan html, css dan javascript.

1. Create new folder desktop


Pertama-tama untuk memulai membuat aplikasi kalkulator sederhana ini adalah dengan membuat folder baru terlebih dahulu sebagai tempat menyimpan file seperti html, css, dan javascript untuk dimuat dalam satu folder.

Sekarang saatnya Anda membuat folder baru dengan lokasi penyimpanan yang Anda inginkan. Sebagai contoh disini kita akan membuat folder dengan nama Calculator iPhone Style.


2. Membuat File HTML


Html akan sangat sederhana untuk proyek ini. Kita akan mulai dengan boilerplate HTML5 standar. Di bagian bawah tubuh kita, saya telah menyertakan script.js yang akan kita buat nanti. Ini perlu di bagian kepala, karena dengan cara ini, ketika javascript kita berjalan, elemen html yang dibutuhkan untuk kalkulator akan bekerja dengan script kalkulator.


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator Iphone Style </title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

Wadah button akan menampung semua input. Setiap button akan menjadi td dengan tombol klik. Ini akan mempermudah penyiapan, dan juga akan membantu kami mengumpulkan umpan balik pengguna. Di sini kita memiliki div untuk class iphone  dan table untuk class second-table.


<div class="iphone">
        <table class="second-table">
            <tr>
                <td colspan="4" class="total"><span id="iphoneTotal"></span></td>
            </tr>
            <tr>
                <td><button onclick="resetIphone()" class="aaa">AC</button></td>
                <td><button onclick="menfi()" class="aaa">+/-</button></td>
                <td><button onclick="faiz()" class="aaa">%</button></td>
                <td><button onclick="bolme()" class="iphone-operation">/</button></td>
            </tr>
            <tr>
                <td><button onclick="sec(7)">7</button></td>
                <td><button onclick="sec(8)">8</button></td>
                <td><button onclick="sec(9)">9</button></td>
                <td><button onclick="vurma()" class="iphone-operation">X</button></td>
            </tr>
            <tr>
                <td><button onclick="sec(4)">4</button></td>
                <td><button onclick="sec(5)">5</button></td>
                <td><button onclick="sec(6)">6</button></td>
                <td><button onclick="cixma()" class="iphone-operation">-</button></td>
            </tr>
            <tr>
                <td><button onclick="sec(1)">1</button></td>
                <td><button onclick="sec(2)">2</button></td>
                <td><button onclick="sec(3)">3</button></td>
                <td><button onclick="toplama()" class="iphone-operation">+</button></td>
            </tr>
            <tr>
                <td colspan="2"><button onclick="sec(0)" class="zero">0</button></td>
                <td><button onclick="noqte()">,</button></td>
                <td><button onclick="neticeIphone()" class="iphone-operation">=</button></td>
            </tr>
        </table>
    </div>

Sekarang buat file dengan nama index.html. Anda bisa menggunakan kode editor seperti sublime text, visual studio code (vsc), dan Notepad biasa. Salin kode html dibawah ini kemudian pastekan disana. Save file di dalam folder "Calculator iPhone Style" dan berinama index.html.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator Iphone Style </title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
    <div class="iphone">
        <table class="second-table">
            <tr>
                <td colspan="4" class="total"><span id="iphoneTotal"></span></td>
            </tr>
            <tr>
                <td><button onclick="resetIphone()" class="aaa">AC</button></td>
                <td><button onclick="menfi()" class="aaa">+/-</button></td>
                <td><button onclick="faiz()" class="aaa">%</button></td>
                <td><button onclick="bolme()" class="iphone-operation">/</button></td>
            </tr>
            <tr>
                <td><button onclick="sec(7)">7</button></td>
                <td><button onclick="sec(8)">8</button></td>
                <td><button onclick="sec(9)">9</button></td>
                <td><button onclick="vurma()" class="iphone-operation">X</button></td>
            </tr>
            <tr>
                <td><button onclick="sec(4)">4</button></td>
                <td><button onclick="sec(5)">5</button></td>
                <td><button onclick="sec(6)">6</button></td>
                <td><button onclick="cixma()" class="iphone-operation">-</button></td>
            </tr>
            <tr>
                <td><button onclick="sec(1)">1</button></td>
                <td><button onclick="sec(2)">2</button></td>
                <td><button onclick="sec(3)">3</button></td>
                <td><button onclick="toplama()" class="iphone-operation">+</button></td>
            </tr>
            <tr>
                <td colspan="2"><button onclick="sec(0)" class="zero">0</button></td>
                <td><button onclick="noqte()">,</button></td>
                <td><button onclick="neticeIphone()" class="iphone-operation">=</button></td>
            </tr>
        </table>
    </div>
</body>

</html>

3. Membuat File CSS


Mari kita membuat file style.css. Kami mengatur lebar untuk wadah dan memusatkannya menggunakan margin (juga memberikan margin atas 0 yang layak), dan menerapkan bayangan kotak kecil. Berikut ini kode css kalkulator.


*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #d3d4cf;
}

.second-table{
    width: 500px;
    height: 700px;
    background-color: #000;
    color: #fff;
    font-size: 28px;
    text-align: center;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    transform: scale(0.7);
    box-shadow: 0px 10px 10px -5px black;

Untuk tampilan, kami menetapkan ketinggian tetap, dan untuk memusatkan teks secara vertikal, kami perlu mengatur tinggi garis ke jumlah yang sama persis. Teks harus berada di tengah, karena ini adalah cara kerja sebagian besar tampilan kalkulator. Juga atur ukuran font dan berikan jumlah padding yang layak.

Sekarang buat file dengan nama style.css. Salin kode CSS dibawah ini kemudian pastekan disana. Save file di dalam folder "Calculator iPhone Style" dan berinama style.css.


*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #d3d4cf;
}

.second-table{
    width: 500px;
    height: 700px;
    background-color: #000;
    color: #fff;
    font-size: 28px;
    text-align: center;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    transform: scale(0.7);
    box-shadow: 0px 10px 10px -5px black;
   

}
.second-table{
    padding: 20px;
}

.second-table tr td{
width: 100px;
height: 100px;
}

.second-table .total{
    background-color: #000;
    border-radius: 0;
    text-align: right;
    padding-right: 20px;
}

.zero{
    width: 200px;
    height: 90px;
    border-radius: 50px;
}

button{
    border-radius: 100%;
    width: 95px;
    height: 95px;
    background-color: #333333;
    border: 0;
    color: #fff;
    font-size: 28px;
    font-family: Arial, Helvetica, sans-serif;
    outline: none;

}
button:hover{
    background-color: #5b5a5a;
    cursor: pointer;
}

.aaa{
    background-color: #a5a5a5;
    color: #000;
}
.aaa:hover{
    background-color: #efe7e7;
}

.iphone-operation{
    background-color: #fe9e09;
}
.iphone-operation:hover{
    background-color: #ffc366;;
}

.second-table .total{
font-size: 34px;
}


4. Membuat File Javascript


Pada bagian ini akan menjadi inti dari aplikasi kita. Mari kita buat file script.js. Hal pertama yang perlu kita lakukan adalah menyimpan referensi ke elemen dom tampilan kita. Kita dapat dengan mudah melakukannya karena memiliki id reqem.


reqem = document.getElementById("iphoneTotal").innerHTML;

Sekarang buat file dengan nama script.js. Salin kode JS dibawah ini kemudian pastekan disana. Save file di dalam folder "Calculator iPhone Style" dan berinama script.js.


// Süleymalı Fuad
// Iphone Calculator


function sec(nomre) {
    reqem = document.getElementById("iphoneTotal").innerHTML;
    reqem = reqem + nomre;
    document.getElementById("iphoneTotal").innerHTML = reqem;

}

function menfi() {
    reqem = document.getElementById("iphoneTotal").innerHTML;
    reqem = "-" + reqem;
    document.getElementById("iphoneTotal").innerHTML = reqem;
}

function faiz() {
    reqem = document.getElementById("iphoneTotal").innerHTML;
    reqem = reqem * 1 / 100;
    document.getElementById("iphoneTotal").innerHTML = reqem;
}

function noqte() {
    reqem = document.getElementById("iphoneTotal").innerHTML
    reqem = reqem + "."
    document.getElementById("iphoneTotal").innerHTML = reqem;
}

function resetIphone() {
    reset = document.getElementById("iphoneTotal").innerHTML
    reset = "";
    document.getElementById("iphoneTotal").innerHTML = reset;
}

function azaltReqemi() {
    reqem = document.getElementById("iphoneTotal").innerHTML
    document.getElementById("iphoneTotal").innerHTML = reqem.substring(0, reqem.length - 1);


} function vurma() {
    reqem = document.getElementById("iphoneTotal").innerHTML
    reqem = reqem + "*"
    document.getElementById("iphoneTotal").innerHTML = reqem;
}

function bolme() {
    reqem = document.getElementById("iphoneTotal").innerHTML
    reqem = reqem + "/"
    document.getElementById("iphoneTotal").innerHTML = reqem;
}
function cixma() {
    reqem = document.getElementById("iphoneTotal").innerHTML
    reqem = reqem + "-"
    document.getElementById("iphoneTotal").innerHTML = reqem;

}
function toplama() {
    reqem = document.getElementById("iphoneTotal").innerHTML
    reqem = reqem + "+"
    document.getElementById("iphoneTotal").innerHTML = reqem;

}



function yoxlama() {
    if (isNaN(eval(neticemiz)) !== false) {
        alert("Səhflik var")
    }
}

function neticeIphone() {
    neticemiz = document.getElementById("iphoneTotal").innerHTML
    yoxlama();
    document.getElementById("iphoneTotal").innerHTML = eval(neticemiz)

}

5. Membuat File JSON


Sampai disini kita akan setting servenya menggunakan kode json. Ini berfungsi agar data dapat dimuat dilocalhost pada browser. Untuk itu sekarang buat folder baru di dalam folder "Calculator iPhone Style" dan berinama folder tersebut dengan ".vscode". Kemudian di dalam folder vscode buat file dengan nama settings.json. Salin kode JSON dibawah ini kemudian pastekan disana. Save file di dalam folder ".vscode".


{
    "liveServer.settings.port": 5501
}

Selesai...


Berikut folder dan file seperti html, css, dan javascript yang telah kami buat dari penjelasan di atas dapat dilihat pada gambar berikut:


Hasil Tampilan Calculator iPhone Style


Sekarang coba jalankan program dengan membuka file index.html di folder tempat Anda menyimpannya. Untuk hasilnya anda bisa melihat tampilan dari live demo dibawah ini. Klik tombol "Run Pen" untuk membuka tampilan kalkulator.



Saya harap Anda menikmati artikel ini. Jika demikian, Anda mungkin menyukai Pelajari JavaScript — kursus di mana saya menunjukkan cara membuat 20 komponen, langkah demi langkah, seperti cara kami membuat kalkulator ini hari ini. Untuk selanjutnya kami membuat konten pendidikan yang mencakup pengembangan web di sini, jangan ragu untuk memeriksanya.


Kesimpulan


Selain itu, Anda dapat memodifikasi source code yang kami sediakan agar semakin sempurna sesuai dengan keinginan pengguna. Anda dapat meningkatkan kalkulator lebih lanjut dengan menambahkan dukungan keyboard dan fitur aksesibilitas seperti Live region. Ingin tahu caranya? Pergi memeriksa Belajar JavaScript.

Demikian postingan kali ini tentang Membuat Kalkulator dengan Javascript Model iPhone. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk bagikan artikel ini untuk membantu teman-teman yang lain. Terima kasih!
samuelpasaribu.com

samuelpasaribu.com

samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.

Next Post Previous Post
No Comment
Add Comment
comment url