Get best of the week

Menulis kalkulator javascript



Selamat siang teman!

Pada artikel ini, kami, sesuai namanya, akan menulis kalkulator JavaScript sederhana.

Keinginan untuk menulis kalkulator datang kepada saya setelah menonton satu tutorial tentang cara membuat "kalkulator sederhana", yang ternyata jauh dari sederhana dan benar-benar tidak dapat melakukan apa-apa.

Kalkulator kami akan benar sederhana (42 baris kode, termasuk spasi antar blok), tetapi pada saat yang sama berfungsi penuh dan dapat diukur. Perpustakaan indah ini (Math.js)

akan digunakan untuk perhitungan . Tanpa pengantar lebih lanjut, kami memulai bisnis.



Markup kami terlihat seperti ini:

<!-- head -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.4/math.js"></script>

<!-- body -->
<div class="calculator">
    <output></output>
</div>

Di sini kita menghubungkan perpustakaan, membuat wadah untuk kalkulator dan bidang untuk karakter input dan hasilnya.

Kami menghubungkan gaya:
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: radial-gradient(circle, skyblue, steelblue);
  display: flex;
  justify-content: center;
  align-items: center;
}

.calculator {
  width: 320px;
  height: 480px;
  background: #eee;
  border-radius: 5px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), -2px -2px 3px rgba(0, 0, 0, 0.2);
}

output {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 40px;
  background: #fff;
  margin: 10px auto;
  border-radius: 5px;
  font-size: 1.4em;
  font-weight: bold;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3),
    inset -1px -1px 1px rgba(0, 0, 0, 0.3);
}

.keyboard {
  height: 440px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
}

button {
  margin: 0.5em 1em;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
}


Inilah yang kami miliki saat ini:



Tombol akan dihasilkan secara terprogram.

Kami lolos ke skrip.

Kami menetapkan bidang untuk menampilkan hasil dan membuat wadah untuk keyboard:

const output = document.querySelector('output')

const div = document.createElement('div')
div.classList.add('keyboard')
document.querySelector('.calculator').appendChild(div)

Baris kami dengan karakter terlihat seperti ini:

'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) ='

Ubah string ini menjadi array dan buat tombol:

//    
//      ,       "CE"
'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) ='.split(' ')
    //   
    //   
    //      
    //      "value" 
    .map(symbol => {
        div.insertAdjacentHTML('beforeend', `<button value="${symbol}">${symbol}</button>`)
    })

Kami menemukan tombol yang dibuat dan menambahkan pengendali event klik ke sana:

document.querySelectorAll('button').forEach(button => {
    button.addEventListener('click', function () {
        //          
        calc(this.value)
    })
})

Kami juga ingin dapat memasukkan karakter menggunakan keyboard. Untuk melakukan ini, kita perlu menambahkan event handler "keystroke" ke objek "Document" atau "Window", kemudian memfilter nilai-nilai yang tidak perlu dari properti "key" kunci, misalnya, menggunakan ekspresi reguler:

document.addEventListener('keydown', event => {
    if ((event.key).match(/[0-9%\/*\-+\(\)=]|Backspace|Enter/)) calc(event.key)
})

Metode kecocokan dalam kasus ini memainkan peran filter: itu tidak memungkinkan lewat argumen ke fungsi calc yang tidak cocok dengan kondisi yang ditentukan di dalamnya.

Kondisi itu sendiri adalah sebagai berikut: jika nilai event.key adalah salah satu karakter yang ditunjukkan dalam tanda kurung ([]; angka 0 hingga 9, tanda-tanda pembagian, perkalian, penambahan, pengurangan, pembukaan, tanda kurung tutup atau tanda sama; backslash - escaping) atau (| - alteration) Backspace atau Enter, lalu kita memanggil calc dengan event.key sebagai parameter, jika tidak kita tidak melakukan apa-apa (Shift juga berhasil dibuang).

Fungsi kalk utama kami (dan satu-satunya) adalah sebagai berikut (kode harus dibaca dari bawah ke atas):

//       
function calc(value) {
    //      Enter
    if (value.match(/=|Enter/)) {
        //   
        try {
            //   
            //     "evaluate"  "math"
            // Math.trunc      
            output.textContent = Math.trunc(math.evaluate(output.textContent))
            
        //    
        } catch {
            //   
            let oldValue = output.textContent
            //   
            let newValue = ' '
            //      
            output.textContent = newValue
            //       
            setTimeout(() => {
                output.textContent = oldValue
            }, 1500)
        }
        
    //    "C"
    } else if (value === 'C') {
        //  
        output.textContent = ''
    
    //    ""  Backspace
    } else if (value.match(/CE|Backspace/)) {
        //     
        output.textContent = output.textContent.substring(0, output.textContent.length - 1)
        
    //     ()   
    } else {
        //     
        output.textContent += value
    }
}

Sebagai kesimpulan, beberapa kata tentang skalabilitas yang dinyatakan dan fungsionalitas penuh.

Metode evaluasi (sebelumnya eval) dan metode Math.js lainnya memiliki kemampuan yang sangat hebat. Berdasarkan fitur-fitur ini, kami dapat dengan mudah memperluas fungsionalitas kalkulator kami dengan menambahkan karakter dan operator baru ke dalamnya, memberikan kemungkinan bekerja dengan angka floating-point (menyesuaikan jumlah tempat desimal menggunakan sakelar dan metode "toFixed"), dll.

Hasil:



Kode GitHub .

Terima kasih atas perhatian Anda. Saya harap Anda menemukan sesuatu yang berguna untuk diri Anda sendiri. Selamat berakhir pekan dan coding menyenangkan.

More articles:


All Articles