Tes Kecepatan Mengetik Online dengan Tampilan Gelap dan Efek Menyala


Ingin tahu seberapa cepat kamu mengetik?

Coba aplikasi Typing Speed Test berbasis web dengan desain gelap menyala dan suara interaktif! Sangat cocok untuk pelajar, pekerja, dan siapa saja yang ingin melatih jari dan pikiran.

⚡ Fitur Aplikasi:

  • ✅ Tampilan Gelap Modern – Nyaman di mata dan terlihat keren!
  • 🔀 Kalimat Acak – Selalu menantang dengan variasi kalimat.
  • ⏱️ Timer Real-Time – Hitung waktu saat mengetik dengan akurat.
  • 🔊 Efek Suara – Mulai dan selesai mengetik punya efek tersendiri.
  • 🔁 Tombol Main Ulang – Bisa langsung ulangi tes kapan saja.
  • 🛡️ Anti Copy-Paste – Murni berdasarkan kecepatan dan ketelitianmu!

💡 Manfaat Tes Kecepatan Mengetik:

  • Meningkatkan kemampuan mengetik 10 jari
  • Melatih konsentrasi dan ketelitian
  • Berguna untuk profesi seperti content writer, admin, dan programmer

📥 Sumber Efek Suara:

💻 Kode Lengkap

📄 index.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Typing Speed Test</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Typing Speed Test</h1>
  <div id="textDisplay">Ketik kalimat ini dengan cepat dan tepat.</div>
  <textarea id="textInput" placeholder="Mulai mengetik di sini..."></textarea>

  <div id="timer">⏱️ 0.00 detik</div>
  <div id="result"></div>

  <button id="restartBtn">🔁 Main Ulang</button>

  <script src="script.js"></script>
</body>
</html>

🎨 style.css

body {
  background-color: #0d0d0d;
  color: #fff;
  font-family: 'Courier New', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 20px;
}

h1 {
  font-size: 2em;
  color: #00ffcc;
  text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc;
  margin-bottom: 20px;
}

#textDisplay {
  font-size: 1.2em;
  background: #1a1a1a;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 0 15px #00ffcc;
  max-width: 600px;
  text-align: center;
}

#textInput {
  width: 600px;
  height: 100px;
  padding: 15px;
  font-size: 1.2em;
  border-radius: 10px;
  border: none;
  outline: none;
  background-color: #121212;
  color: #00ffcc;
  box-shadow: 0 0 10px #00ffcc;
  resize: none;
  margin-bottom: 10px;
}

#textInput::placeholder {
  color: #666;
}

#timer {
  font-size: 1.2em;
  color: #ffff00;
  text-shadow: 0 0 10px #ffff00;
  margin-bottom: 10px;
}

#result {
  font-size: 1.2em;
  color: #33ff66;
  text-shadow: 0 0 10px #33ff66;
  margin-bottom: 20px;
}

#restartBtn {
  background-color: #1f1f1f;
  color: #00ffff;
  border: 2px solid #00ffff;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1em;
  box-shadow: 0 0 10px #00ffff;
  transition: background 0.3s;
}

#restartBtn:hover {
  background-color: #00ffff;
  color: #0d0d0d;
  box-shadow: 0 0 20px #00ffff;
}

⚙️ script.js

const textDisplay = document.getElementById('textDisplay');
const textInput = document.getElementById('textInput');
const result = document.getElementById('result');
const timer = document.getElementById('timer');
const restartBtn = document.getElementById('restartBtn');

const sentences = [
  "Ketik kalimat ini dengan cepat dan tepat.",
  "Belajar mengetik membuat jari lebih cekatan.",
  "Kecepatan mengetik bisa dilatih setiap hari.",
  "Jangan lihat keyboard saat mengetik.",
  "Semakin sering latihan, semakin cepat kamu bisa."
];

let targetText = '';
let startTime = null;
let timerInterval = null;
let isFinished = false;
let soundPlayed = false;

const soundStart = new Audio('sounds/start.mp3');
const soundSuccess = new Audio('sounds/success.mp3');

// Fungsi untuk memperbarui timer
function updateTimer() {
  if (startTime && !isFinished) {
    const now = new Date();
    const seconds = ((now - startTime) / 1000).toFixed(2);
    timer.textContent = `⏱️ ${seconds} detik`;
  }
}

// Fungsi reset dan ambil kalimat baru
function resetTest() {
  targetText = sentences[Math.floor(Math.random() * sentences.length)];
  textDisplay.textContent = targetText;

  textInput.value = '';
  result.textContent = '';
  timer.textContent = '⏱️ 0.00 detik';
  startTime = null;
  isFinished = false;
  soundPlayed = false;
  clearInterval(timerInterval);
  textInput.focus();
}

// Event: input saat mengetik
textInput.addEventListener('input', () => {
  const userInput = textInput.value;

  if (!startTime && userInput.length === 1) {
    startTime = new Date();
    timerInterval = setInterval(updateTimer, 100);
    if (!soundPlayed) {
      soundStart.play();
      soundPlayed = true;
    }
  }

  if (!isFinished && userInput === targetText) {
    const endTime = new Date();
    const timeTaken = (endTime - startTime) / 1000;
    const wordsPerMinute = (targetText.split(' ').length / timeTaken) * 60;

    result.innerHTML = `✅ Selesai dalam ${timeTaken.toFixed(2)} detik<br>💨 Kecepatan: ${wordsPerMinute.toFixed(2)} kata/menit`;
    isFinished = true;
    clearInterval(timerInterval);
    soundSuccess.play();
  }
});

// Tombol main ulang
restartBtn.addEventListener('click', resetTest);

// Cegah paste
textInput.addEventListener('paste', (e) => e.preventDefault());

// Cegah klik kanan
textInput.addEventListener('contextmenu', (e) => e.preventDefault());

// Cegah drag and drop
textInput.addEventListener('drop', (e) => e.preventDefault());

// Jalankan reset pertama kali saat halaman dimuat
resetTest();

🔚 Penutup

Dengan aplikasi ini, kamu bisa berlatih dan meningkatkan kecepatan mengetik setiap hari!

Cukup buka file index.html di browser favoritmu dan mulai mengetik. Jangan lupa siapkan file suara start.mp3 dan success.mp3 di folder sounds.

Komentar

Posting Komentar