Bangun Kalkulator menggunakan JavaScript, HTML, dan CSS pada tahun 2022
Diterbitkan: 2021-01-02Baik Anda mempelajari bahasa pemrograman baru atau kerangka kerja pengembangan, ada saatnya Anda harus mengerjakan proyek dunia nyata. Saat Anda maju melalui subjek, Anda harus menguji keterampilan dan pemahaman bahasa Anda. Membangun proyek menggunakan teknologi atau kerangka kerja yang baru dipelajari adalah ide yang bagus. Ada banyak ide yang tersedia secara online tentang apa yang harus Anda buat dengan pengetahuan Anda.
Saran yang paling umum ditemukan termasuk Kalkulator dalam JavaScript dan To-do List. Meskipun kelihatannya mudah, ini bisa menjadi tugas yang cukup berat ketika Anda mulai mengerjakan proyek-proyek ini. Di sini, kami akan membuatnya mudah dan logis serta penting untuk Anda.
Mari kita mulai?
Daftar isi
Logika Sebelum Segalanya
Ketika Anda mulai mengerjakan sebuah proyek, apakah itu kalkulator atau daftar tugas, hal pertama yang perlu Anda identifikasi adalah logikanya.
Bagaimana cara kerja kalkulator?
- Anda menambahkan dua atau lebih angka (sejumlah digit) menggunakan tombol angka yang diberikan pada kalkulator.
- Anda kemudian melakukan fungsi aritmatika dasar, yaitu penambahan, pengurangan, perkalian dan pembagian pada angka-angka ini.
- Kalkulator harus dapat menghitung dan memberikan solusi yang benar.
Ini adalah premis dari alat kalkulator Anda. Jadi, Anda memerlukan keypad, unit tampilan, dan elemen fungsi.
Tombol "sama dengan" akan mengevaluasi jawaban sementara tombol "hapus" akan memastikan penghapusan semua input pada tampilan kalkulator.
Pelajari kursus pengembangan perangkat lunak online dari Universitas top dunia. Dapatkan Program PG Eksekutif, Program Sertifikat Tingkat Lanjut, atau Program Magister untuk mempercepat karier Anda.
Menangani Proyek: Kunci untuk Membangun Kode
Alih-alih langsung menuju ke kode, Anda perlu mempelajari cara menangani proyek baru. Anda memiliki dua hal yang siap untuk Anda: logika dan pemahaman dasar tentang teknologi front-end, yaitu JavaScript, HTML, dan CSS.
Sebelum Anda mulai membuat kalkulator menggunakan JavaScript , Anda memerlukan hal berikut:
- Lingkungan Pengembangan Terintegrasi yang akan membantu Anda membangun proyek menggunakan ketiga teknologi tersebut.
- Server lokal yang akan membantu Anda menguji kode dan menghapus bug. Hasilnya, Anda akan dapat meluncurkan aplikasi lebih cepat dan lebih lincah.
#1 Memulai dengan HTML
Langkah pertama adalah membuat tangan Anda sedikit kotor dengan HTML sehingga Anda telah membuat garis besar untuk kalkulator Anda.
Ada sepuluh tombol pada kalkulator, mulai dari 0 hingga 9. HTML bertanggung jawab untuk membuat kunci untuk setiap digit.
Selain itu, Anda perlu menggunakan HTML untuk membuat kunci terpisah untuk fungsi aritmatika yang berbeda juga saat membuat kalkulator menggunakan JavaScript .
Anda dapat menggunakan HTML untuk menambahkan tombol untuk menampilkan angka atau hasil yang dimasukkan serta untuk menghapus tampilan.
Unit visual kalkulator Anda sepenuhnya bergantung pada HTML dan CSS, yang tombol dan ID-nya perlu dibuat menggunakan HTML.
Kode Boilerplate
<!DOCTYPE html>
<html lang="en">
<kepala>
<meta charset="UTF-8″>
<meta name=”viewport” content="width=device-width, initial-scale=1.0″>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title>Kalkulator</title>
</head>
<tubuh>
Kode Sebenarnya untuk Membuat Garis Besar Kalkulator
(
<!– kalkulator ->
<div class="kalkulator">
<!– tampilan ->
<input type="text" class="display" dinonaktifkan>
<!– tombol –>
<div class="keys">
<!– 4 baris tombol –>
<div class="baris">
<button value="7″>7</button>
<button value="8″>8</button>
<button value="9″>9</button>
<button value="+" class="operator">+</button>
</div>
<div class="baris">
<button value="4″>4</button>
<button value="5″>5</button>
<button value="6″>6</button>
<button value="-" class="operator">-</button>
</div>
<div class="baris">
<button value="1″>1</button>
<button value="2″>2</button>
<button value="3″>3</button>
<button value="*" class="operator">*</button>
</div>
<div class="baris">
<button value="C" class="operator">C</button>
<button value="0″>0</button>
<button value="/" class="operator">/</button>
<button value="=" class="operator">=</button>
</div>
</div>
</div>
<!– badan kalkulator berakhir ->
<script type="text/javascript" src="js/script.js"></script>
</tubuh>
</html>
Pelajari: 20 Proyek Javascript Teratas di Github Untuk Pemula
#2 Gaya dengan CSS
Setelah Anda menentukan struktur kalkulator, Anda akan menggunakan elemen CSS sebaris untuk menata gaya kalkulator Anda dan membuatnya menarik secara visual dan mudah digunakan.
Meskipun CSS sebaris sangat baik dalam hal mendesain dan menata tampilan aplikasi Anda, CSS mungkin tidak ramah SEO. Selain itu, Anda juga dapat menggunakan elemen CSS eksternal dengan menandainya ke direktori root yang sama. Anda bahkan dapat menggunakan elemen CSS internal atau tersemat yang ada di dalam tag <style></style> di dalam bagian kepala.
Di sini, kami akan membawa Anda melalui kode yang dapat Anda gunakan untuk mengatur gaya kalkulator Anda.
(Anda dapat membuat variasi untuk kode ini jika Anda mau.)
/* gaya umum */
* {
bantalan: 0;
margin: 0;
}
tubuh {
lebar: 100vw;
tinggi: 100vh;
melimpah: tersembunyi;
tampilan: fleksibel;
justify-content: pusat;
align-item: tengah;
warna latar: #222831;
font-family: sans-serif;
}
/* gaya umum berakhir */
/* Kalkulator */
.Kalkulator {
lebar: 300 piksel;
bantalan-bawah: 15px;
batas-radius: 7px;
warna-latar belakang: #000;
bayangan kotak: 5px 8px 8px -2px rgba(0, 0, 0, 0,61);
}
/* gaya kalkulator berakhir */
/* menampilkan */
.menampilkan {
lebar: 100%;
tinggi: 80 piksel;
perbatasan: tidak ada;
ukuran kotak: kotak perbatasan;
bantalan: 10 piksel;
ukuran font: 2rem;
warna-latar belakang: #00ff44;
warna: #000;
perataan teks: kanan;
batas-atas-kiri-radius: 7px;
batas-atas-kanan-radius: 7px;
}
/* gaya tampilan berakhir */
/* baris */
.baris {
tampilan: fleksibel;
justify-content: ruang-antara;
}
/* gaya baris berakhir */
/* tombol */
tombol {
lebar: 50 piksel;
tinggi: 50 piksel;
batas-radius: 50%;
perbatasan: tidak ada;
garis besar: tidak ada;
ukuran font: 1.5rem;
warna latar: #222;
warna: #ff;
margin: 10 piksel;
}
tombol: arahkan kursor {
kursor: penunjuk;
}
/* gaya tombol berakhir */
/* operator */
.operator {
warna-latar belakang: #00ff44;
warna: #000;
}
/* gaya operator berakhir */
#3 Menambahkan Fungsionalitas dengan JavaScript
Kami sekarang telah membahas secara rinci aspek yang terlihat dari membangun kalkulator menggunakan JavaScript . Mari lakukan beberapa skrip untuk membantu membuat kalkulator berfungsi dan melakukan tugas penghitungan. Kami akan memahami beberapa langkah yang terlibat dalam membangun kode JS, yang akan membantu Anda mengembangkan kode lebih cepat.
- Anda perlu memanggil tag HTML yang telah Anda buat untuk fungsi individual menggunakan JavaScript. Anda akan menggunakan penyeleksi untuk memanggil setiap input ini dan menyimpannya dalam sebuah variabel. Untuk setiap fungsi, Anda memerlukan variabel. Misalnya, ada variabel terpisah untuk tampilan, angka, fungsi kliring serta sama dengan fungsi. Fungsi getElementbyID() dapat digunakan dalam kasus ini.
- Katakanlah Anda ingin melakukan perhitungan sederhana 20+30, Anda akan memanggil 20 terlebih dahulu menggunakan metode yang disebutkan di atas. Sebelum memanggil 30 dan fungsi aritmatika, Anda perlu menyimpan 20 yang sebelumnya dipanggil di suatu tempat. Kode Anda harus menyediakan ruang untuk penyimpanan sementara angka untuk memudahkan perhitungan. Array kosong akan menyimpan nomor sebagai string. Setelah Anda menambahkan angka lain dan fungsi aritmatika, menggunakan eval(), Anda dapat mengevaluasi angka dan mendapatkan jawabannya.
- Saat Anda mengklik tombol di kalkulator, Anda menginginkan beberapa hasil, baik itu ditampilkan, atau dievaluasi. Untuk tujuan ini, Anda harus menambahkan pendengar acara ke kode Anda. Dengan cara ini, tombol akan mendengarkan klik. Saat Anda menambahkan fungsi ke pendengar acara, mereka akan secara otomatis melakukan tugas pada suara klik.
- Unit tampilan harus mengembalikan nilai tombol yang Anda klik. Anda dapat menggunakan objek event.target, karena objek tersebut akan mengembalikan nilai elemen tempat peristiwa tersebut terjadi. Misalnya, Anda ingin angka "1" ditampilkan segera setelah Anda mengkliknya. Untuk ini, Anda perlu menyimpan nomor dalam bentuk variabel. Menggunakan fungsi "jika", Anda akan membandingkan variabel yang ada untuk mengidentifikasi apakah itu nol atau tidak. Jika itu adalah nol, maka Anda akan menambahkannya ke string kosong sehingga tidak ada angka yang dimulai dengan nol. Terakhir, Anda akan menambahkan isi dari kunci “1” ke variabel tampilan. Akibatnya, segera setelah tombol angka dipicu, Anda akan melihat konten di kotak tampilan.
- Terakhir, Anda perlu membuat fungsi yang akan membantu menerapkan operasi matematika ke angka yang ditampilkan. Pastikan kalkulator Anda dalam JavaScript dapat melakukan perhitungan matematis dengan mudah. Untuk mengaktifkan fungsi ini, Anda dapat menggunakan kombinasi sintaks dan metode. Kami telah menentukan kode untuk elemen JavaScript di bawah ini untuk Anda teliti.
// pilih semua tombol
tombol const = document.querySelectorAll('button');
// pilih elemen <input type=”text” class=”display” nonaktif>
const tampilan = document.querySelector('.display');
// tambahkan eventListener ke setiap tombol
button.forEach(fungsi(tombol) {
button.addEventListener('klik', hitung);
});
// menghitung fungsi
fungsi menghitung(peristiwa) {
// nilai tombol yang diklik saat ini
const clickedButtonValue = event.target.value;
if (clickedButtonValue === '=') {
// periksa apakah tampilan tidak kosong maka lakukan perhitungan saja
if (display.value !== ”) {
// menghitung dan menunjukkan jawaban untuk ditampilkan
tampilan.nilai = eval(tampilan.nilai);
}
} else if (clickedButtonValue === 'C') {
// hapus semua yang ada di layar
tampilan.nilai = ”;
} lain {
// jika tidak, gabungkan ke tampilan
display.value += clickedButtonValue;
}
}
Harus Dibaca: Arsitektur & Komponen Java Dijelaskan
Menyimpulkan
Baik Anda sedang membuat kalkulator dalam JavaScript atau mengerjakan proyek yang lebih kompleks, idenya adalah memecah konten dengan cara yang logis dan ditafsirkan. Ini akan membantu Anda mendapatkan sintaks yang tepat dan akan mengarah ke aplikasi web yang lancar. Alih-alih memulai dengan pengkodean secara langsung, cobalah untuk memahami apa tujuan sebenarnya dari teknologi yang Anda gunakan, dan itu akan mengarahkan Anda ke kode.
Jika Anda tertarik untuk mempelajari lebih lanjut tentang Java, pengembangan perangkat lunak full-stack, lihat Program PG Eksekutif upGrad & IIIT-B dalam Pengembangan Perangkat Lunak – Spesialisasi dalam Pengembangan Full Stack yang dirancang untuk profesional yang bekerja dan menawarkan 500+ jam pelatihan yang ketat , 9+ proyek, dan tugas, status Alumni IIIT-B, proyek batu penjuru praktis & bantuan pekerjaan dengan perusahaan-perusahaan top.
