Cara Membuat Kalkulator Dengan HTML, CSS, JavaScript Di Notepad

Cara membuat kalkulator dengan HTML, CSS, JavaScript Di Notepad, kalo kalian sering bermain atau suka tentang pengkodean khususnya yang berbasis web contohnya seperti html, css atau dan juga javascript. Bukan hal yang sulit pastinya untuk memahami kode kode tersebut apalagi pastinya kalian sudah sering berhadapan dengan kode kode tersebut.

Atau kalian adalah seorang blogger entah kalian pakai blogger atau wordpress atau apapupun itu pastinya kalain tidak mungkin tidak taulah, apalagi kalo ingin membuat widget atau ingin menambahkan fitur fitur pada template atau situs web kalian. Min gua pake wordpress tinggal edit tanpa coding atau bisa pake plugin ingat tidak semalamnya hal hal yang anda dapat edit dengan plugin.

Baca Juga: Cara Membuat Form Biodata Sederhana Dengan Html

Kali ini kita tidak akan membahas tetang blogger ataupun wordpress, kali ini kita akan belajar tentang cara membuat kalkulator dengan HTML, CSS, JavaScript. kenapa kita akan membuat kalkulator menggunakan html, css, dan juga javascript, ini agar anda yang baru mendalamai tentang bahasa pemprograman ini sedikit tau dan terbiasa terhadap kode kode ini sehigga ketika berhadapn langsung dengan kode ini kalian tidak akan kebingungan lagi.

Kalkulator yang akan kita buat kali ini tidak jauh berbeda dengan dengan kalkulator windows, linux, mac, atau android yang kalian miliki hanya saja kalkukalator ini dalam bentuk kode, namun dari segi fungsi dan tampilan sama dengan kalkulator kalkulator pd umumnya.

Baca Juga: Cara Membuat Push Notification PHP

Tak lengkap rasanya apabila kita membahas tentang html, css, dan javascript, tetapi tidak mengetahui tentang seluk beluk dari kode ini sendiri, oleh karena itu akan kami bahas pada berikut ini.

Apa Itu Html, Css, Dan Javascript?

seperti yang sudah kita bahas diatas bahwa tidak afdol jika kita tidak membahas tentang bahasa pemprograman ini satu persatu seperti dibawah ini.

  • Hypertext Markup Language atau HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman website. HTML terdiri dari kombinasi teks dan simbol yang ada didalam sebuah file. Dalam menciptakan file HTML, terdapat standar atau format khusus yang wajib diikuti. Format tersebut telah dibuat dalam standar kode internasional atau ASCII (American Standard Code for Information Interchange). 
  • CSS adalah singkatan dari Cascading Style Sheet dan sering digunakan untuk mengatur tampilan elemen yang ditulis menggunakan bahasa markup, sama seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visual pada situs. CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.
  • JavaScript merupakan bahasa pemrograman yang digunakan dalam pengembangan web supaya lebih dinamis serta interaktif. Jika tadinya kalian cuma memahami HTML serta CSS, nah saat ini kalian jadi ketahui kalau JavaScript bisa tingkatkan fungsionalitas pada taman website. Apalagi dengan JavaScript ini kalian dapat membuat aplikasi, tools, ataupun apalagi permainan pada website. 

Nah bagiman sudah paham tentang sejarah singkat masing masing dari bahasa pemrograman semoga kalian paham yaah terhadap penjelasan diatas.

Cara membuat kalkulator sederhana dengan HTML, CSS, JavaScript

Uuntuk caranya bisa ikuti kode yang ada dibawah ini, dan untuk menerapkanya bisa ikuti tutorial dibawah ini.

  1. Buat Folder dengan nama apa saja tapi kalo bisa sesuai dengan nama apa yang anda buat karena kita akan membuat kalkulator jadi namakan saja folder yang kita buat dengan "KALKULATOR' untuk kode pertama yang akan kita buat menggunakan kode html salin kode tersebut dan tempel ke notepad.
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title>Calculator Application</title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
    <div class="calculator">
    <div class="userInput"><p class="userEntry"></p><p class="finalCalc"></p></div>
    <div class="calcButtons">
    <button>+/-</button>
    <button>AC</button>
    <button>DEL</button>
    <button class="operator">*</button>
    <button class="number">1</button>
    <button class="number">2</button>
    <button class="number">3</button>
    <button class="operator">+</button>
    <button class="number">4</button>
    <button class="number">5</button>
    <button class="number">6</button>
    <button class="operator">/</button>
    <button class="number">7</button>
    <button class="number">8</button>
    <button class="number">9</button>
    <button class="operator">-</button>
    <button class="number">0</button>
    <button class="decimal">.</button>
    <button class="operator">=</button>
    </div>
    </div>
    <script src="./app.js"></script>
    </body>
    </html>
  2. Setelah itu simpan kode diatas dengan menekan tombol ctrl + S untuk mengsave file tersebut > selanjutnya ialah dengan membuat file baru dengan judul file index.html menggunakan kode html diatas > Ubah "Save as type" menjadi "All Files" > kemudian "Save" di dalam folder "KALKULATOR".
  3. Yaah untuk membuat kaluator ini mnarik dan berwarna bisa memasukkan kode css, kalau diiabratkan kode css ini kayak cewek yang kalo gak ada hidup menjadi tidak bermawarna😂.
  4. Oke agar dapat berjalan beri nama kode tersebut dengan style.css

    [...$buttons].map(x => {
    x.addEventListener("click", function (e) {

    switch (this.innerHTML) {
    case "AC":
    clearDisplay();
    break;
    case "DEL":
    removeNumber();
    break;
    case "+/-":
    makeNegative();
    break;
    case "=":
    makeCalculation();
    break;
    case "+":
    operator.splice(0, 1, this.innerHTML)
    console.log(operator);

    storeValue();
    break;
    case "*":
    operator.splice(0, 1, this.innerHTML)
    console.log(operator);

    storeValue();
    break;
    case "/":
    operator.splice(0, 1, this.innerHTML)
    console.log(operator);

    storeValue();
    break;
    case "-":
    operator.splice(0, 1, this.innerHTML);
    console.log(operator);
    storeValue();
    break;
    default:
    if (valOne.length >11) {
    alert("No more values beyond 8");
    }

    else {

    valOne.push(this.innerText);
    ui.textContent = valOne.join("");
    console.log(valOne);

    }
    break;
    case ".":
    if (valOne.includes(".")) {
    alert("You cannot use anymore decimals");
    } else {
    valOne.push(this.innerText);
    ui.textContent = valOne.join("");

    }
    break;

    }

    })
    })



    //function add(a, b) {

    // return a + b;
    //}


    //function subtract(a, b) {
    // return a - b;
    //}

    //function divide(a, b){

    // return a / b;
    //}

    //function multiply(a, b){

    // return a * b;
    //}

    //function module(a, b) {

    // return a % b;
    //}



    function clearDisplay() {

    ui.textContent = "";
    finalCalc.textContent = ""
    valOne = [];
    valTwo = [];
    operator = [];
    }

    function removeNumber(e) {

    valOne.pop();
    ui.textContent = valOne.join("");
    }


    function makeNegative() {

    if (valOne.length < 1) {
    return false;
    }else if(valOne[0] == "-") {
    valOne.shift()

    } else {
    valOne.unshift("-")

    }
    ui.textContent = valOne.join("");
    }

    function makeCalculation() {

    if (valTwo.length > 0 && operator.length!==0) {
    //finalAnswer = valTwo.concat(operator, valOne).join("");
    finalAnswer = eval(valTwo + operator + valOne.join(""));
    finalCalc.textContent = "";
    finalCalc.textContent = eval(finalAnswer).toFixed(2);
    ui.textContent = "";
    valTwo = eval(finalAnswer);
    valOne = [];
    //operator = [];

    } else if (operator.length == 0) {

    alert("invalid calculation there is no operator");

    }

    else {
    //finalAnswer = valTwo.concat(operator, valOne).join
    finalAnswer = finalAnswer = eval(valTwo + operator + valOne.join(""));

    console.log("final answer");
    console.log(finalAnswer);
    finalCalc.textContent = "";
    ui.textContent = "";
    finalCalc.textContent = eval(finalAnswer).toFixed(2);
    //operator = [];
    valTwo = eval(finalAnswer);
    valOne = [];



    }





    }

    function storeValue() {




    if (valOne.length == 0 && valTwo.length==0) {
    return false;
    } else if (valTwo.length > 0) {
    finalCalc.textContent = valTwo + " " + operator;



    }else if(valTwo.length==0) {
    valTwo.push(valOne.join(""));
    valOne = [];
    ui.textContent = "";
    finalCalc.textContent = "";
    finalCalc.textContent = valTwo + " " + operator


    }
    finalCalc.textContent = valTwo + " " + operator;



    }
  5. selesai.

Nah kode diatas sudah bisa utuk membuat satu kesatuan untuk dapat anda jadikan sebagai kalkulator.

Baca Juga: Cara Membuat Hello World di Bahasa C++ dengan Dev C++ Super Mudah

Hasil:

Untuk hasilya bisa lihat pada kode iframe dibawah ini.

Kode yang tadi kita pelajari maka akan menghasilkan kode seperti diatas, kalkulator tersebut sudah bisa kalin gunakan seperti  kalkulator pada umumnya.

Kesimpulan

Walaupun anda tidak berniat menjadi seorang programmer namun tidak ada salah untuk mempelajari bahasa pemprograman, seumpama anda memiliki blog atau website wordpress namun ketika ingin mengedit namun tidak bisa menggunakan plugin ataupun editor bawaan namun berkat tau ketiga kode diatas, mungkin dapat membantu dari pada keluar biaya untuk edit themes mending pake beli syomai bisa kenyang.

0 Response to "Cara Membuat Kalkulator Dengan HTML, CSS, JavaScript Di Notepad"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel