Typing Test
How do I make an typing test?
What is a typing test? How do you make a typing test? This script and codes were developed by Peter Lewicki on 08 October 2022, Saturday.
Typing Test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Typing Test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html lang="en-US">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>JS Typing Speed Test</title> <script src="script.js" async></script> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i,900,900i" type="text/css" media="all"> <link rel="stylesheet" href="style.css">
</head>
<body> <header class="masthead"> <h1>Test Your Typing Speed</h1> </header> <main class="main"> <article class="intro"> <p>This is a typing test. Your goal is to duplicate the provided text, EXACTLY, in the field below. The timer starts when you start typing, and only stops when you match this text exactly. Good Luck!</p> </article><!-- .intro --> <section class="test-area"> <div id="origin-text"> <p>The text to test.</p> </div><!-- #origin-text --> <div class="test-wrapper"> <textarea id="test-area" name="textarea" rows="6" placeholder="The clock starts when you start typing."></textarea> </div><!-- .test-wrapper --> <div class="meta"> <section id="clock"> <div class="timer">00:00:00</div> </section> <button id="reset">Start over</button> </div><!-- .meta --> </section><!-- .test-area --> </main>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>
Typing Test - Script Codes CSS Codes
/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea { font-family: 'Source Sans Pro', 'Helvetica', Arial, sans-serif; font-size: 18px; line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 { clear: both;
}
p { margin-bottom: 1.5em;
}
b,
strong { font-weight: bold;
}
dfn,
cite,
em,
i { font-style: italic;
}
blockquote { margin: 0 1.5em;
}
address { margin: 0 0 1.5em;
}
pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em;
}
code,
kbd,
tt,
var { font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr,
acronym { border-bottom: 1px dotted #666; cursor: help;
}
mark,
ins { background: #fff9c0; text-decoration: none;
}
sup,
sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline;
}
sup { bottom: 1ex;
}
sub { top: .5ex;
}
small { font-size: 75%;
}
big { font-size: 125%;
}
/*--------------------------------------------------------------
Layout
--------------------------------------------------------------*/
body { margin: 0; padding: 0;
}
.masthead { padding: 1em 2em; background-color: #0D1B2E; color: white;
}
.masthead h1 { text-align: center;
}
.intro { padding: 2em 2em; color: #ffffff; background: #429890;
}
.intro p,
.test-area { margin: 0 auto; max-width: 550px;
}
.test-area { margin-bottom: 4em; padding: 0 2em;
}
.test-wrapper { border: 10px solid grey; border-radius: 10px;
}
#origin-text { margin: 1em 0; padding: 1em 1em 0; background-color: #ededed;
}
#origin-text p { margin: 0; padding-bottom: 1em;
}
.test-wrapper { display: flex;
}
.test-wrapper textarea { flex: 1;
}
.meta { margin-top: 1em; display: flex; justify-content: space-between; flex-wrap: wrap;
}
.timer { font-size: 3em; font-weight: bold;
}
#reset { padding: .5em 1em; font-size: 1.2em; font-weight: bold; color: #E95D0F; background: white ; border: 10px solid #E95D0F;
}
#reset:hover { color: white; background-color: #E95D0F;
}
Typing Test - Script Codes JS Codes
const testWrapper = document.querySelector(".test-wrapper");
const testArea = document.querySelector("#test-area");
const originText = document.querySelector("#origin-text p").innerHTML;
const resetButton = document.querySelector("#reset");
const theTimer = document.querySelector(".timer");
var timer = [0,0,0,0,];
// Add leading zero to numbers 9 or below (purely for aesthetics):
// Run a standard minute/second/hundredths timer:
function runTimer() { let current theTimer.innerHTML = timer; timer++;
}
// Match the text entered with the provided text on the page:
function spellCheck() { let textEntered = testArea.value;
}
// Start the timer:
function start() { let textEnteredLength = testArea.value.length; if (textEnteredLength === 0 ) { setInterval(runTimer, 10); } console.log(textEnteredLength)
}
// Reset everything:
function reset() { console.log("reset button has been pressed");
}
// Event listeners for keyboard input and the reset button:
testArea.addEventListener("keypress", start, false);
testArea.addEventListener("keyup", spellCheck, false);
resetButton.addEventListener("click", reset, false);
Developer | Peter Lewicki |
Username | peterlewicki |
Uploaded | October 08, 2022 |
Rating | 3 |
Size | 3,371 Kb |
Views | 30,360 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Basic Fixed Width Layout Template | 1,786 Kb |
Javascript Welcome | 1,573 Kb |
Minimalist CSS Blog | 2,066 Kb |
GetElementById exercise | 1,717 Kb |
Basic JS rock paper scissors games | 1,597 Kb |
Boilerplate WebForm | 1,948 Kb |
Udemy Bootstrap Grid System Exercise | 1,504 Kb |
A Pen by Peter Lewicki | 1,512 Kb |
TIC TAC TOE GAME | 1,546 Kb |
Bootstrap navbar practice | 2,181 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
RSW | JordanC | 3,726 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
A Different Type of Gallery | DonPage | 2,950 Kb |
Single element checkbox | Ivijaygupta | 1,996 Kb |
Simple personal profile | Miroot | 2,856 Kb |
Starfield old school style | Bolloxim | 5,214 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
GrcJS | Vino6 | 2,047 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!