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:

Comments

Post a Comment

Popular posts from this blog

Penyakit Jantung Pada Umumnya Dan Gejala Rematik Jantung

                          Kalau sifat yang benar dari salah satu diantara penyakit jantung umumnya sudah diketahui,biasanya dengan gampang dapat dilihat bahwa penyakit itu termasuk kedalam salah satu daripada lima golongan berikut; Pertama, rematik jantung. Kedua penyakit jantung peredaran darah,karena pembuluh-pembuluh nadi yang rusak atau tekanan darah tinggi. Ketiga  penyakit jantung sifilis. Keempat penyakit jantung bawaan. Kelima  penyakit jantung mengenai fungsi-fungsi,atau hal-hal dimana ada gangguan-gangguan yang menyusahkan didalam tugas jantung,meskipun biasanya tidak ada apa-apa yang salah dengan jaringan-jaringan anggota kecuali barangkali dengan berbagai jaringan saraf yang membantu dalam pengendalian gerakan jantung itu.               Tetapi golongan penyakit jantung yang manapun dia,kesusahan itu adalah biasanya melebihi kesanggupan diri si penderita penyakit atau anggota keluarganya buat mengobatinya.Setiap orang yang menderita penyakit jantung harus diperiksa oleh do
Post a Comment
Read more

Pentingnya Pemanasan Sebelum Melakukan Kegiatan Olahraga

        Kegiatan pemanasan sebelum melakukan kegiatan olahraga merupakan kegiatan yang sangat penting.Pemanasan yang kurang baik akan selalu mengundang resiko cedera baik yang bersifat ringan atau yang kronis oleh sebab itu pemanasan ini harus dilakukan secara baik dan tepat           Pemanasan yang tepat dan benar dapat memiliki keuntungan sebagai berikut: 1. menaikan suhu tubu secara perlahan 2. mengurangi resiko cedera 3. menstabilkan pernapasan dan detak jantung 4. mempersiapkan diri untuk melakukan aktivitas yang lebih berat                      Disamping itu tujuan pemanasan adalah mengulur,meregangkan,memanaskan dan mempersiapkan sekelompok otot yang akan digunakan pada olahraga inti yang akan dilakukan setelah selesai melakukan pemanasan.            kegiatan pemanasan dapat dilakukan dengan penguluran(stretching/pasif/statis)kemudian dinamis /aktif(dengan pergerakan).Gerakan ini tidak mutlak sebab dapat dilakukan sebalikya,dinamis dulu kemudian statis
Post a Comment
Read more

PENYAKIT DEGENERASI BUAH PINGGANG

                           Penyakit yang dinamai Degenerasi buah pinggang mungkin sekali disebabkan oleh keadaan dimana bangunan buah pinggang itu sendiri tersangkut dengan langsung atau oleh persediaan darah yang kurang kepada buah pinggang itu,sedangkan yang belakangan ini adalah biasanya disebabkan oleh pembuluh nadi yang mengeras (atteriosclerosis).Anggota-anggota tubuh biasanya mempunyai banyak tenaga cadangan dan penjagaan keselamatan yang agak luas,sehingga penyakit yang menimbulkan degenerasi itu sudah agak berjalan jauh sebelum ia menjadi nyata.Oleh sebab itu ,pada umumnya orang-orang yang sudah mencapai setengah umur dan orang-orang yang sudah lanjut usia yang mempunyai penyakit yang demikian dalam rupa yang nyata.               Satu pengertian tentang pekerjaan yang biasa dari buah pinggang akan menolong kita mengetahui beberapa diantara gejala-gejala,tanda-tanda, dan hasil-hasil penyelidikan laboratorium mengenai penyakit degenerasi buah pinggang itu.Bagian penting yang gia
Post a Comment
Read more