Typing test

Code

<!DOCTYPE html>

<head>

<title>CodeRabbit-Byte Typing Practice</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Arial', sans-serif;

background-color: #f7f7f7;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

}

.container {

width: 80%;

max-width: 1000px;

text-align: center;

}

header {

background-color: #333;

color: #fff;

padding: 20px;

display: flex;

justify-content: space-between;

align-items: center;

}

header .logo {

font-size: 24px;

}

header .nav a {

color: #fff;

margin: 0 10px;

text-decoration: none;

font-weight: bold;

}

.main-content {

margin-top: 30px;

}

.typing-section {

background-color: #fff;

padding: 20px;

border-radius: 10px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

.typing-section #quote-text {

font-size: 24px;

margin-bottom: 20px;

}

.typing-section input {

width: 80%;

padding: 10px;

font-size: 18px;

border: 2px solid #ccc;

border-radius: 5px;

}

.stats {

display: flex;

justify-content: space-between;

margin-top: 20px;

font-size: 18px;

}

footer {

margin-top: 50px;

font-size: 14px;

color: #555;

}

</style>

</head>

<body>

<div class="logo">CodeRabbit-Byte</div>

<a href="#">Practice</a>

<a href="#">Stats</a>

</div>

</header>

<p id="quote-text">Type the quote that will appear here...</p>

</div>

<div id="speed">Speed: 0 WPM</div>

<div id="accuracy">Accuracy: 100%</div>

</div>

<p>Made with ❤️ by CodeRabbit-Byte</p>

</footer>

</div>

const quoteText = document.getElementById('quote-text');

const typingInput = document.getElementById('typing-input');

const timerDisplay = document.getElementById('timer');

const speedDisplay = document.getElementById('speed');

const accuracyDisplay = document.getElementById('accuracy');

const quotes = [

'The quick brown fox jumps over the lazy dog.',

'Coding is like humor. If you have to explain it, it’s bad.',

'To be or not to be, that is the question.',

'There is no place like home.',

'I think, therefore I am.',

'A journey of a thousand miles begins with a single step.'

];

let currentQuote = '';

let startTime;

let timerInterval;

let typedChars = 0;

let correctChars = 0;

let totalTime = 0;

function newQuote() {

const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];

quoteText.textContent = randomQuote;

currentQuote = randomQuote;

typingInput.value = '';

typedChars = 0;

correctChars = 0;

totalTime = 0;

typingInput.disabled = false;

}

function startTimer() {

startTime = new Date();

timerInterval = setInterval(() => {

totalTime = Math.floor((new Date() - startTime) / 1000);

const minutes = Math.floor(totalTime / 60);

const seconds = totalTime % 60;

timerDisplay.textContent = `${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;

}, 1000);

}

function calculateSpeed() {

const wpm = Math.floor((typedChars / 5) / (totalTime / 60));

speedDisplay.textContent = `Speed: ${wpm} WPM`;

}

function calculateAccuracy() {

const accuracy = Math.floor((correctChars / typedChars) * 100);

accuracyDisplay.textContent = `Accuracy: ${accuracy}%`;

}

typingInput.addEventListener('input', () => {

if (typingInput.value === currentQuote.substring(0, typingInput.value.length)) {

correctChars = typingInput.value.length;

}

typedChars = typingInput.value.length;

if (typedChars === 1) {

startTimer();

}

if (typingInput.value === currentQuote) {

calculateSpeed();

calculateAccuracy();

setTimeout(() => {

alert('Congratulations! You completed the quote!');

newQuote();

}, 500);

}

});

newQuote();

</script>

</body>

</html>