Cara Membuat Program Cek Jumlah Kata dengan JavaScript

By Posted on

Cara Membuat Program Cek Jumlah Kata dengan JavaScript – Pernahkah kamu merasa tertarik untuk membuat program yang dapat menghitung jumlah kata dalam sebuah teks? Program semacam itu tentu akan sangat berguna, bukan? Nah, kali ini kita akan membahas bagaimana cara membuat Program Cek Jumlah Kata dengan JavaScript.

Memahami dan menguasai JavaScript adalah hal yang sangat penting dalam dunia pemrograman. Dengan JavaScript kita dapat membuat berbagai macam program yang bermanfaat, termasuk program untuk menghitung jumlah kata dalam sebuah teks.

Hal yang Disiapkan untuk Membuat Program Cek Jumlah Kata dengan JavaScript

Sebelum memulai proyek untuk membuat Program Cek Jumlah Kata dengan JavaScript, ada beberapa hal yang perlu kamu siapkan terlebih dahulu:

  • Perangkat laptop.
  • Sublime Text (Editor kode teks).
  • Google Chrome (Peramban web).
  • Niat yang kuat untuk belajar dan berkarya.

Setelah semua hal tersebut telah disiapkan, kita bisa langsung memulai proses pembuatan program Cek Jumlah Kata dengan JavaScript. Pastikan kamu mengikuti setiap langkah dengan cermat yang sudah kelas java siapkan dibawah ini.

Baca Juga:   Cara Membuat Array di JavaScript

Cara Mudah Membuat Program Cek Jumlah Kata dengan JavaScript

1. Siapkan Folder dan File

Pertama-tama buatlah struktur folder untuk proyek ini dan tambahkan file HTML, CSS, dan JavaScript yang diperlukan, berikut struktur foldernya:

Proyek Cek Jumlah Kata

  • index.html
  • style.css
  • script.js

2. Coding File HTML (index.html)

Buatlah file HTML dengan struktur dasar yang dibutuhkan untuk membuat tampilan program, berikut kode HTML yang bisa kamu salin dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Program Cek Jumlah Kata</h1>
    <div id="input-container">
        <textarea id="text" placeholder="Masukkan teks di sini"></textarea>
        <br>
        <button id="count-btn">Hitung Jumlah Kata</button>
    </div>
    <div id="result-container">
        <p id="result"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Coding File CSS (style.css)

Tambahkan sedikit gaya CSS untuk mempercantik tampilan halaman web program, berikut kode CSS yang bisa kamu salin dibawah ini.

body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 50px;
}

textarea {
    width: 300px;
    height: 100px;
    padding: 5px;
    margin-bottom: 10px;
}

button {
    padding: 5px 10px;
    background-color: #008CBA;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #005f6b;
}

#result-container {
    margin-top: 20px;
}

#result {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

4. Coding File JavaScript (script.js)

Tambahkan logika JavaScript untuk menghitung jumlah kata dalam teks yang dimasukkan oleh pengguna, berikut adalah kode JS yang bisa kamu salin.

document.getElementById('count-btn').addEventListener('click', function() {
    var text = document.getElementById('text').value.trim();
    var result = document.getElementById('result');

    if (text === '') {
        result.textContent = 'Masukkan teks terlebih dahulu.';
        return;
    }

    var wordCount = text.split(/\s+/).length;
    result.textContent = 'Jumlah kata: ' + wordCount;
});

5. Jalankan Kode

Setelah semua kode ditulis, jalankan program untuk menampilkan website untuk menghitung jumlah kata dalam teks dengan cara membuka file index.html pada folder yang kamu simpan tadi, atau bisa juga dengan melakukan klik kanan pada kode index.html lalu pilih opsi “Open in Browser”.

6. Menampilkan Hasil

Jika sudah muncul halaman browser baru dan tampil seperti gambar diatas, maka kamu telah berhasil menghitung jumlah kata dalam teks di JavaScript. Kamu sekarang memiliki program yang dapat menghitung jumlah kata dalam sebuah teks dan menampilkannya dalam sebuah website yang telah dipercantik.

Penutup

Dengan mempelajari langkah-langkah di atas, kamu dapat membuat program sederhana untuk menghitung jumlah kata dalam teks menggunakan JavaScript. Selamat mencoba, Sobat Java! Semoga artikel ini bermanfaat bagi kamu yang ingin mengembangkan keterampilan pemrograman JavaScript.

Related posts: