Scribd
Upload
14 views2 pages

Click Speed Test - HTML

This document is an HTML code for a Click Speed Test web application. It includes a button for users to click as fast as possible within a 10-second timer, tracking their score. The application features a start button, score display, and alerts the user when the time is up.

Uploaded by

rosh91798
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views2 pages

Click Speed Test - HTML

This document is an HTML code for a Click Speed Test web application. It includes a button for users to click as fast as possible within a 10-second timer, tracking their score. The application features a start button, score display, and alerts the user when the time is up.

Uploaded by

rosh91798
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Speed Test</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
}

.container {
margin-top: 50px;
}

button {
padding: 15px 30px;
font-size: 16px;
margin: 10px;
cursor: pointer;
}

#clickButton {
display: none; /* Hide the click button until the test starts */
}
</style>
</head>
<body>
<div class="container">
<h1>Click Speed Test</h1>
<p id="instructions">Click the button as fast as you can!</p>
<button id="clickButton" onclick="handleClick()">Click Me!</button>
<p id="score">Score: 0</p>
<p id="timer">Time Left: 10 seconds</p>
<button id="startButton" onclick="startTest()">Start Test</button>
</div>

<script>
let score = 0;
let timeLeft = 10; // Time limit in seconds
let timerId;

function startTest() {
score = 0;
timeLeft = 10; // Reset time
document.getElementById("score").innerText = "Score: " + score;
document.getElementById("timer").innerText = "Time Left: " + timeLeft +
" seconds";

document.getElementById("clickButton").style.display = "inline-
block"; // Show the click button
document.getElementById("startButton").disabled = true; // Disable
start button

timerId = setInterval(updateTimer, 1000); // Start the timer


}
function updateTimer() {
timeLeft--;
document.getElementById("timer").innerText = "Time Left: " + timeLeft +
" seconds";

if (timeLeft <= 0) {
clearInterval(timerId);
endTest();
}
}

function handleClick() {
score++;
document.getElementById("score").innerText = "Score: " + score;
}

function endTest() {
document.getElementById("clickButton").style.display = "none"; // Hide
the click button
alert("Time's up! Your score is: " + score);
document.getElementById("startButton").disabled = false; // Enable
start button again
}
</script>
</body>
</html>

You might also like