{"id":29099,"date":"2023-08-15T17:36:44","date_gmt":"2023-08-15T17:36:44","guid":{"rendered":"https:\/\/matob.web.id\/note\/?p=29099"},"modified":"2023-08-15T17:36:44","modified_gmt":"2023-08-15T17:36:44","slug":"contoh-kode-aplikasi-kalkulator-sederhana-menggunakan-html-css-dan-java-script","status":"publish","type":"post","link":"https:\/\/matob.web.id\/note\/contoh-kode-aplikasi-kalkulator-sederhana-menggunakan-html-css-dan-java-script\/","title":{"rendered":"Contoh Kode Aplikasi Kalkulator sederhana menggunakan HTML CSS dan Java Script."},"content":{"rendered":"

Untuk membuat kalkulator sederhana menggunakan HTML, CSS, dan JavaScript, pertama-tama kita perlu membuat struktur HTML dasar untuk kalkulator. Kita dapat menggunakan elemen input<\/code> untuk layar kalkulator dan elemen button<\/code> untuk tombol-tombol kalkulator. Kita juga perlu menambahkan beberapa atribut dan class ke elemen-elemen tersebut untuk memudahkan styling menggunakan CSS.<\/p>\n

Setelah struktur HTML dibuat, kita dapat menambahkan styling menggunakan CSS untuk mengatur tampilan kalkulator. Kita dapat mengatur ukuran, warna, dan bentuk elemen-elemen kalkulator menggunakan properti CSS. Kita juga dapat menambahkan efek hover dan transisi untuk memberikan interaksi yang lebih menyenangkan bagi pengguna.<\/p>\n

Untuk membuat kalkulator yang dapat melakukan perhitungan, kita perlu menambahkan logika JavaScript ke dalam halaman. Kita dapat menambahkan event listener pada tombol-tombol kalkulator untuk menangani interaksi pengguna, dan memanggil fungsi-fungsi JavaScript yang akan menangani perhitungan dan menampilkan hasilnya.<\/p>\n

\"\"<\/p>\n

Dengan menggabungkan struktur HTML, styling CSS, dan logika JavaScript, kita dapat membuat kalkulator sederhana yang dapat digunakan secara efektif dan mudah digunakan. Berikut ini adalah contoh kode lengkap untuk membuat kalkulator sederhana menggunakan HTML, CSS, dan JavaScript.<\/p>\n

\n
\n
<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n\u00a0 <title>Calculator<\/title>\r\n\r\n\u00a0 <style>\r\n\r\n\u00a0 \u00a0 body {\r\n\r\n\u00a0 \u00a0 \u00a0 font-family: sans-serif;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 h1 {\r\n\r\n\u00a0 \u00a0 \u00a0 text-align: center;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 .calculator {\r\n\r\n\u00a0 \u00a0 \u00a0 display: flex;\r\n\r\n\u00a0 \u00a0 \u00a0 flex-direction: column;\r\n\r\n\u00a0 \u00a0 \u00a0 align-items: center;\r\n\r\n\u00a0 \u00a0 \u00a0 background: #eee;\r\n\r\n\u00a0 \u00a0 \u00a0 border: 1px solid #ccc;\r\n\r\n\u00a0 \u00a0 \u00a0 border-radius: 3px;\r\n\r\n\u00a0 \u00a0 \u00a0 padding: 10px;\r\n\r\n\u00a0 \u00a0 \u00a0 width: 290px;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 .calculator > * {\r\n\r\n\u00a0 \u00a0 \u00a0 margin: 5px 0;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 .calculator > .screen {\r\n\r\n\u00a0 \u00a0 \u00a0 width: 100%;\r\n\r\n\u00a0 \u00a0 \u00a0 height: 40px;\r\n\r\n\u00a0 \u00a0 \u00a0 font-size: 22px;\r\n\r\n\u00a0 \u00a0 \u00a0 text-align: right;\r\n\r\n\u00a0 \u00a0 \u00a0 border: 1px solid #ccc;\r\n\r\n\u00a0 \u00a0 \u00a0 border-radius: 3px;\r\n\r\n\u00a0 \u00a0 \u00a0 padding: 5px;\r\n\r\n\u00a0 \u00a0 \u00a0 box-shadow: inset 0 1px 3px #ddd;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 .calculator > .buttons {\r\n\r\n\u00a0 \u00a0 \u00a0 display: grid;\r\n\r\n\u00a0 \u00a0 \u00a0 grid-template-columns: repeat(4, 1fr);\r\n\r\n\u00a0 \u00a0 \u00a0 grid-column-gap: 10px;\r\n\r\n\u00a0 \u00a0 \u00a0 grid-row-gap: 10px;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 .calculator > .buttons > button {\r\n\r\n\u00a0 \u00a0 \u00a0 width: 100%;\r\n\r\n\u00a0 \u00a0 \u00a0 height: 40px;\r\n\r\n\u00a0 \u00a0 \u00a0 font-size: 22px;\r\n\r\n\u00a0 \u00a0 \u00a0 background: #eee;\r\n\r\n\u00a0 \u00a0 \u00a0 border: 1px solid #ccc;\r\n\r\n\u00a0 \u00a0 \u00a0 border-radius: 3px;\r\n\r\n\u00a0 \u00a0 \u00a0 cursor: pointer;\r\n\r\n\u00a0 \u00a0 \u00a0 box-shadow: 0 1px 3px #ddd;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 .calculator > .buttons > button:hover {\r\n\r\n\u00a0 \u00a0 \u00a0 background: #ddd;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 .calculator > .buttons > button.special {\r\n\r\n\u00a0 \u00a0 \u00a0 background: #ccc;\r\n\r\n\u00a0 \u00a0 \u00a0 box-shadow: none;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 .calculator > .buttons > button.special:hover {\r\n\r\n\u00a0 \u00a0 \u00a0 background: #ccc;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 <\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n\u00a0 <h1>Calculator<\/h1>\r\n\r\n\u00a0 <div class=\"calculator\">\r\n\r\n\u00a0 \u00a0 <input type=\"text\" class=\"screen\" value=\"0\" \/>\r\n\r\n\u00a0 \u00a0 <div class=\"buttons\">\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"clearInput()\" class=\"special\">AC<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"deleteLastChar()\" class=\"special\">Del<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput('\/')\" class=\"special\">\/<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput('*')\" class=\"special\">*<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput(7)\">7<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput(8)\">8<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput(9)\">9<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput('-')\" class=\"special\">-<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput(4)\">4<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput(5)\">5<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput(6)\">6<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput('+')\" class=\"special\">+<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput(1)\">1<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput(2)\">2<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput(3)\">3<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"calculate()\" class=\"special\">=<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput(0)\">0<\/button>\r\n\r\n\u00a0 \u00a0 \u00a0 <button onclick=\"addToInput('.')\">.<\/button>\r\n\r\n\u00a0 \u00a0 <\/div>\r\n\r\n\u00a0 <\/div>\r\n\r\n\u00a0 <script>\r\n\r\n\u00a0 \u00a0 function addToInput(num) {\r\n\r\n\u00a0 \u00a0 \u00a0 var input = document.querySelector('.calculator .screen');\r\n\r\n\u00a0 \u00a0 \u00a0 input.value = input.value + num;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 function calculate() {\r\n\r\n\u00a0 \u00a0 \u00a0 var input = document.querySelector('.calculator .screen');\r\n\r\n\u00a0 \u00a0 \u00a0 var result = eval(input.value); \/\/ Evaluate the input string as an expression\r\n\r\n\u00a0 \u00a0 \u00a0 result = parseInt(result); \/\/ Convert the result to an integer\r\n\r\n\u00a0 \u00a0 \u00a0 input.value = result;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 function clearInput() {\r\n\r\n\u00a0 \u00a0 \u00a0 var input = document.querySelector('.calculator .screen');\r\n\r\n\u00a0 \u00a0 \u00a0 input.value = '0';\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0\r\n\r\n\u00a0 \u00a0 function deleteLastChar() {\r\n\r\n\u00a0 \u00a0 \u00a0 var input = document.querySelector('.calculator .screen');\r\n\r\n\u00a0 \u00a0 \u00a0 input.value = input.value.slice(0, -1);\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 <\/script>\r\n\r\n<\/body>\r\n\r\n<\/html><\/pre>\n<\/div>\n<\/div>\n
<\/div>\n
Dengan mengikuti langkah-langkah di atas, kita telah berhasil membuat kalkulator sederhana menggunakan HTML, CSS, dan JavaScript. Kalkulator ini dapat melakukan perhitungan dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian, dan menampilkan hasilnya secara akurat.<\/p>\n
Kalkulator ini juga dapat dikembangkan lebih lanjut dengan menambahkan fitur-fitur tambahan seperti memori, fungsi trigonometri, dan lain-lain. Dengan menggunakan HTML, CSS, dan JavaScript, kita dapat membuat kalkulator yang interaktif, mudah digunakan, dan dapat disesuaikan sesuai kebutuhan.<\/p>\n
Sekian artikel tentang cara membuat kalkulator sederhana menggunakan HTML, CSS, dan JavaScript. Semoga artikel ini bermanfaat dan dapat membantu Anda dalam membuat kalkulator sederhana sendiri. Terima kasih.<\/p>\n","protected":false},"excerpt":{"rendered":"
Untuk membuat kalkulator sederhana menggunakan HTML, CSS, dan JavaScript, pertama-tama kita perlu membuat struktur HTML dasar untuk kalkulator. Kita dapat menggunakan elemen input untuk layar kalkulator dan elemen button untuk tombol-tombol kalkulator. Kita juga perlu menambahkan beberapa atribut dan class ke elemen-elemen tersebut untuk memudahkan styling menggunakan CSS. Setelah struktur HTML dibuat, kita dapat menambahkan […]<\/p>\n","protected":false},"author":1,"featured_media":29101,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-29099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-komputer-internet"],"_links":{"self":[{"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/posts\/29099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/comments?post=29099"}],"version-history":[{"count":4,"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/posts\/29099\/revisions"}],"predecessor-version":[{"id":29105,"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/posts\/29099\/revisions\/29105"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/media\/29101"}],"wp:attachment":[{"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/media?parent=29099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/categories?post=29099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/tags?post=29099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}