Skip to main content

MEMBUAT KALKULATOR MENGGUNAKAN BAHASA PEMROGRAMAN JAVASCRIPT

           


             Di sesi ini saya akan membahas cara membuat kalkulator sederhana menggunakan bahasa pemrograman javascript.Disini saya menggunakan software Text editor Visual studio code untuk menjalankan codingannya.Anda bisa juga menggunakan Text editor yang lain seperti,Subleme Text,Notepad,Notepad++,Atom dan yang lain-lain.Disini saya menyarankan menggunakan visual studio code,karena sangat cocok dipakai bagi yang sedang belajar Coding.Serta didukung dengan banyak fitur dan sudah support hampir segala macam jenis bahasa pemrograman,Selain itu software VS.code ini bersifat open source atau free.Bila anda ingin menggunakannya maka anda dapat mendownload nya disitus resmi Visual studio code. Berikut Gambar atau penampilan Software Visual Studio code setelah anda menginstall nya:



















Setelah anda menginstall dan membukanya,selanjutnya anda dapat menuliskan codingan berikut;

Berikut untuk codingan HTML nya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <section id="main">
      <div id="calculator">
        <div id="display">
          <span class="result"></span>
          <span class="type">0</span>
        </div>
        <div class="cal-pad">
          <div class="row-con">
            <div class="itemAC dark" title="Clear All">AC</div>
            <div class="item-del dark" title="Del">&#8882;</div>
            <div class="item/ dark num">/</div>
            <div class="itemX dark num">*</div>
            <div class="item7 num">7</div>
            <div class="item8 num">8</div>
            <div class="item9 num">9</div>
            <div class="item- dark num">-</div>
            <div class="item4 num">4</div>
            <div class="item5 num">5</div>
            <div class="item6 num">6</div>
            <div class="item+ dark num">+</div>
            <div class="item1 num">1</div>
            <div class="item2 num">2</div>
            <div class="item3 num">3</div>
            <div class="item0 num">00</div>
            <div class="item0 num">0</div>
            <div class="item-dot num">.</div>
            <div class="item-eq">=</div>
          </div>
        </div>
      </div>
    </section>
    <script src="./main.js"></script>
  </body>
</html>


Berikut untuk codingan CSS nya:

@import "https://fonts.googleapis.com/css?family=Share+Tech+Mono";
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

body {
  margin: 0;
  font-family: "Share Tech Mono", "Segoe UI", Tahoma, Geneva, Verdana,
    sans-serif;
  overflow: hidden;
  background-color: #413f42;
}
a {
  text-decoration: none;
  color: rgb(66, 107, 255);
}
#main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}
#calculator {
  width: 23rem;
  background-color: #2b2b2b;
  box-shadow: 0 0 24px 10px rgba(0, 0, 0, 0.3);
}
#display {
  width: 100%;
  min-height: 6rem;
  overflow-wrap: break-word;
  font-family: "poppins";
  background-color: rgb(24 24 24);
  text-align: right;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 0.4rem;
  box-sizing: border-box;
  position: relative;
}
.row-con {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
}
.row-con > div {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(24, 24, 24);
  color: #fff;
  font-weight: bold;
  border: 0.5px solid #333;
  cursor: pointer;
  font-size: 1.4rem;
}
.row-con > div:hover {
  background-color: #444444;
  border: 0.5px solid rgb(109, 109, 109);
}
.row-con > div:active {
  transform: scale(0.9);
}
.cal-pad {
  height: 25rem;
}
.item-eq {
  background-color: #f5672c !important;
  font-size: 1.8rem;
  font-weight: bolder;
  grid-area: 4/4/6/4;
}
.item-eq:hover {
  background-color: #f57945 !important;
}
.dark {
  background-color: rgb(37, 37, 37) !important;
}
.dark:hover {
  background-color: rgb(58, 58, 58) !important;
}
.dark {
  font-family: digital;
}
span.type {
  font-size: 3rem;
  position: absolute;
  right: 5px;
  top: 30px;
  transition: all 0.2s;
}

.active {
  top: 0px !important;
}

span.result {
  font-size: 1.4rem;
  display: block;
}
.itemAC {
  background-color: rgb(172, 58, 58) !important;
  font-family: "Share Tech Mono" !important;
  font-weight: normal !important;
}
.itemAC:hover {
  background-color: rgb(134, 65, 65) !important;
}

@media (max-width: 400px) {
  #calculator {
    width: 20rem;
  }
  .cal-pad {
    height: 22rem;
  }
}
@media (max-width: 300px) {
  #calculator {
    width: 15rem;
  }
  .cal-pad {
    height: 18rem;
  }
}


Berikut untuk codingan JAVASCRIPTNYA:

const nums = document.querySelectorAll(".num");
const typed = document.querySelector(".type");
const result = document.querySelector(".result");

let val = "0";

nums.forEach((num) => {
  num.addEventListener("click", (e) => {
    typed.classList.remove("active");
    let char = e.target.innerText;
    if (val === "0" && !char.match(/[*+/.-]/gi)) {
      val = char;
    } else {
      val += char;
    }

    if (val.match(/[0-9]+[+-\/*][+-\/*]+/gi)) {
      const operator = val[val.length - 1];
      val = val.substring(0, val.length - 2) + operator;
    }

    typed.innerText = val.replace(/\*/g, "×").replace(/\//g, "÷");
    if (!val.match(/[0-9]+[+-\/*]$/gi)) {
      try {
        result.innerText = eval(val);
      } catch (error) {
        invalidExpression();
      }
    }
  });
});

document.querySelector(".itemAC").addEventListener("click", () => {
  typed.classList.remove("active");
  typed.innerText = "0";
  result.innerText = "";
  val = "0";
});

document.querySelector(".item-del").addEventListener("click", () => {
  typed.classList.remove("active");
  val = val.substring(0, val.length - 1);
  if (val) {
    typed.innerText = val;
    if (!val.match(/[0-9]+[+-\/*]$/gi)) {
      try {
        result.innerText = eval(val);
      } catch (error) {
        invalidExpression();
      }
    } else {
      result.innerText = "";
    }
  } else {
    typed.innerText = "0";
    result.innerText = "";
  }
});

document.querySelector(".item-eq").addEventListener("click", () => {
  try {
    val = eval(val).toString();
    typed.classList.add("active");
    typed.innerText = val;
    result.innerText = "";
  } catch (error) {
    invalidExpression();
  }
});

function invalidExpression() {
  typed.innerText = "0";
  result.innerText = "Invalid Expression";
  val = "0";
}


            Setelah anda Menulis coding tersebut maka langkah selanjutnya simpan atau save coding tersebut di folder penyimpanan sesuai keinginan anda.Selanjutnya anda Run atau jalankan codingan tersebut,Maka hasilnya seperti Gambar dibawah ini: 




   







Kalkulator Sederhana Buatan sendiri siap digunakan,SELAMAT MENCOBA!!!😉







Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

PENGERTIAN DAN MANFAAT PEREGANGAN STATIS DAN DINAMIS DALAM DUNIA OLAHRAGA

                          Dalam Gerakan peregangan meliputi peregangan statis dan dinamis. Peregangan statis dilakukan setelah latihan, sedangkan peregangan dinamis dilakukan sebelum latihan. Kedua jenis peregangan ini memiliki manfaatnya masing-masing.Peregangan (stretching) sebaiknya dilakukan sebelum  berolahraga. Bagi anda yang belum tahu,  peregangan termasuk peregangan statis dan dinamis. Keduanya memiliki fungsi dan keunggulan masing-masing.            Peregangan Statis adalah jenis peregangan yang dilakukan di akhir latihan. Ini memiliki pola peregangan berbeda yang terjadi selama periode waktu tertentu dan tidak ada gerakan. Pemanasan statis memungkinkan otot tubuh bagian atas untuk rileks sambil meningkatkan fleksibilitas dan rentang gerak.Berikut manfaat peregangan stastis: * Peningkatan fleksibilitas dan rentang gerak          ...
Post a Comment
Read more

Komponen & Gerak Dasar Kebugaran Jasmani Dalam Berolahraga

               Kebugaran jasmani adalah alat pembelajaran Pendidikan Jasmani Olahraga dan Kesehatan, selain itu merupakan upaya untuk meningkatkan dan mengembangkan kesehatan dan kebugaran tubuh.               Kebugaran jasmani atau physical fitness dapat diartikan sebagai kondisi jasmani yang menggambarkan kebugaran jasmani atau dapat pula diartikan sebagai kemampuan seseorang untuk melakukan suatu pekerjaan tertentu dengan baik tanpa mengalami kelelahan yang berarti. Komponen kebugaran jasmani, di antaranya adalah sebagai berikut.   1. Kelenturan adalah kemampuan sendi untuk melakukan gerakan secara maksimal.   2. Keseimbangan merupakan kemampuan sikap dan posisi tubuh pada saat tertentu.    3. Kecepatan adalah kemampuan berpindah dari satu tempat ke tempat lain dalam waktu yang singkat.        4. Kelincahan merupakan kemampuan mengubah arah dengan ...
Post a Comment
Read more

MEMBUAT DIGITAL CLOCK DENGAN MENGGUNAKAN BAHASA PEMROGRAMAN C++

                              Pembahasan kali ini akan mengulas tentang cara membuat Digital Clock dengan menggunakan bahasa pemrograman C++.Untuk menjalankan codingan atau programnya saya menggunakan software Dev C++.Saya menggunakan software ini karena sangat cocok untuk mengcompile serta menjalankan bahasa pemrograman c++.Jika anda belum memiliki software Dev C++ silahkan download di situs website resminya  https://sourceforge.net/projects/orwelldevcpp/ .               Setelah anda download silahkan install seperti software pada umumnya,Berikut tampilan atau gambar software Dev c++ setelah di install dan dibuka.                 Setelah anda buka software Dev C++ langkah selanjutnya adalah tuliskan code berikut ini: #include<iostream> #include<conio.h> #include<dos.h>  #include <win...
Post a Comment
Read more