Javascript ile Klavye Hız Testi Uygulaması

Evren Erkan

WISESOFT
Developer
Katılım
26 Eki 2023
Mesajlar
60
Puanları
8
Konum
İzmir
Ticaret Hacmi:
0 / 0 / 0
Web
www.wisesoft.com.tr
475710943.png

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Klavye Hız Testi</title>
    <style>
        body {font-family: Arial, sans-serif;text-align: center;}
        h1 {color: #333;}
        #text-to-type {font-size: 18px;margin-bottom: 20px;}
        #user-input {padding: 8px;width: 450px;height: 150px;margin-bottom: 10px;}
        #result {font-size: 18px;margin-top: 20px;color: #333;}
        button {padding: 10px 20px;background-color: #007bff;color: #fff;border: none;cursor: pointer;}
        button:hover {background-color: #0056b3;}
    </style>
</head>
<body>
    <h1>Klavye Hız Testi</h1>
    <p id="text-to-type">Küçük bir köyde, parlayan yıldızlardan ilham alan bir çocuk yaşarmış. Bu çocuğun adı WiseMaster'dı. Geceleri gökyüzüne bakar, yıldızların arasında kaybolmayı hayal ederdi.</p>
    <textarea id="user-input" placeholder="Yukardaki metni buraya yazın..." oncopy="return false" onpaste="return false"></textarea><br>
    <button onclick="calculateSpeed()">Hızı Hesapla</button>
    <p id="result"></p>
    <script>
        function calculateSpeed() {
            var textToType = document.getElementById("text-to-type").textContent.trim();
            var userInput = document.getElementById("user-input").value.trim();
            var words = textToType.split(" ");
            var typedWords = userInput.split(" ");
            var correctWords = 0;
            for (var i = 0; i < words.length; i++) {
                if (typedWords[i] === words[i]) {
                    correctWords++;
                }
            }
            var accuracy = (correctWords / words.length) * 100;
            var speed = (userInput.length / 5) / 1;
            var result = "Doğruluk: " + accuracy.toFixed(2) + "%, Hız: " + speed.toFixed(2) + " kelime/dakika";
            document.getElementById("result").textContent = result;
        }
    </script>
</body>
</html>
 
Üst Alt