Unable to load the content

Please attempt to reload the page or alternatively, try accessing it using a different browser.

How to Build a Typing Speed Test App using HTML CSS JS

bySmart UI Studio Published:

Creating a typing speed test application can be an interesting and educational project for developers, helping you practice your coding skills while implementing real-time functionality. 

In this post, I will take you through the process of developing a web-based typing speed test app. This app helps users test their typing skills by tracking their words per minute (WPM), characters per minute (CPM) and accuracy during a timed typing challenge. Let's break down the key concepts and logic involved in creating this app.

Read More: Unlock Web Animation Secrets: Top 10 best CSS Animations with Source Code

How-to-build-a-typing-speed-test-app-using--html-css-js

Setting Up the HTML Structure

To begin, we need to create the essential HTML structure that will house our app. The app will consist of two main sections:

<div class="container">
    <h1>Test Your Typing Skills</h1>
    <div class="inner-wrapper"></div>
</div>
<div class="modal-container">
    <div class="modal">
      <h2>Your Result</h2>
      <span class="bi bi-check2-circle"></span>
      <div id="result">
        <div class="result-card" id="wpm">
Get Code

  • Test Area: Where users can type the sentences and see the progress.
  • Results Area: Where users will see their typing speed and accuracy after completing the test.

We have a container for the main content that will show the test instructions and the typing text. Additionally, there’s a modal that will display the results at the end of the test.

Handling Sentence Selection and Display

The main objective of the typing test is to type random sentences accurately and quickly. To achieve this, I created an array of sentences and randomly select a sentence for the user to type. Once a sentence is selected, it is displayed on the screen character by character.

Each character is wrapped in a span element with a class of .char. This allows us to easily track individual characters during the typing process and apply different styles based on the correctness of each character typed.

Additionally, the next sentence is preloaded so that when the user completes one sentence, a new one appears immediately. This ensures the test continues seamlessly without delays.

How-to-build-a-typing-speed-test-app-using--html-css-js

CSS Styling

To create an engaging and visually appealing typing speed test application, CSS plays a crucial role. Here's a breakdown of how different elements can be styled to enhance user experience and interface aesthetics.

.container {
  padding: 20px;
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.inner-wrapper {
  display: grid;
  margin-top: 15px;
}
Get Code

Capturing User Input and Tracking Progress

Once the timer starts, the app listens for the user's keystrokes using event listeners. The key event handler ensures that only valid characters are typed and it prevents non-printable keys (such as Shift, Ctrl or Alt) from affecting the typing test.

For each keypress:

  • We check if the typed character matches the one on the screen.
  • If the character matches, it's marked as "correct," and we increase the correct count.
  • If the character doesn't match, it's marked as "incorrect," and we increase the incorrect count.
  • The cursor also moves automatically to the next character as the user types, creating a smooth experience.

Handling Backspace

The backspace functionality was implemented to allow users to correct their mistakes. When the backspace key is pressed, the app checks if the cursor is positioned at the start of a word or a character. If the backspace is valid, it removes the correct or incorrect class from the last typed character.

By removing the correct or incorrect classes, we also adjust the counts for correct and incorrect characters accordingly.

JavaScript Implementation

To bring the Typing Speed Test Web App to life, JavaScript plays a critical role in managing the logic, user interactions and dynamic updates. From starting the timer to tracking user input, every functionality is powered by well-structured JavaScript.

const elements = {
  innerWrapper: document.querySelector(".inner-wrapper"),
  resultDiv: document.getElementById('result'),
  wpmDiv: document.getElementById('wpm-value'),
  cpmDiv: document.getElementById('cpm-value'),
  accuracyDiv: document.getElementById('accuracy-value'),
  popupCloseBtn: document.querySelector(".close-btn"),
  tryAgainBtn: document.querySelector(".try-again-btn")
};
const durationOptions = [30, 60, 120, 240];
let state = null;
Get Code 
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('9 5=1H;(f(4V,3H){9 l=1H,1v=4V();2l(!![]){86{9 3P=-k(l(87))/13*(k(l(88))/89)+-k(l(8a))/8b+-k(l(8c))/8d*(-k(l(8e))/5E)+-k(l(8f))/8g*(-k(l(8h))/85)+k(l(8i))/8k+k(l(8l))/8m*(-k(l(8n))/8o)+k(l(8p))/8q*(k(l(8s))/8t);o(3P===3H)8u;4b 1v[\'33\'](1v[\'3U\']())}8v(8w){1v[\'33\'](1v[\'3U\']())}}}(1n,83));9 3G=5(7O),3E=5(82);d[5(G)](5(2p))[5(2i)]=3G;9 1S=d[5(31)](5(2H));1S[\'3q\']=3E,d[5(G)](5(7C))[5(7D)](1S);9 b={\'40\':d[5(G)](5(7E)),\'57\':d[\'3K\'](5(7F)),\'5c\':d[5(38)](\'7G\'),\'5a\':d[5(38)](5(7H)),\'53\':d[5(G)](\'.4W\'),\'4S\':d[5(G)](5(7I))},3W=[7J,2O,7K,3g];W 7=1B;9 4A=5(7L),28=()=>{9 h=5;7={\'1C\':n,\'1b\':1B,\'2h\':1B,\'2f\':n,\'2d\':n,\'1z\':n,\'2c\':![],\'2b\':[],\'2M\':\'\'};9 1I=d[\'3p\'](\'3N\');1I[\'4a\']=\'7M\';W 2R=\'\';3W[h(4f)](2V=>2R+=\'<4t\\7A=\\6\'+2V+\'\\6>\'+2V+\'\\7P</4t>\'),1I[h(2i)]=2R,b[h(4B)]=1I;9 E=b[h(7S)];E[h(2i)]=h(7T),E[h(7U)](1I,E[h(G)](h(4x))),E[\'54\'](h(4x))[h(2m)](h(3g),()=>{9 g=h;E[g(2i)]=4A+g(7X),b[\'1l\']=E[g(G)](g(7Y)),b[g(1W)]=E[g(G)](\'#3w\'),b[g(2n)]=E[g(G)](g(7Z)),b[\'2z\']=E[g(G)](g(80)),7[g(1w)]=k(b[g(4B)][g(81)]),8x[g(84)]=!![],b[g(2n)][g(r)]=7[\'1C\'],3o()},{\'3u\':!![]})},2j=[5(8y),5(94),5(96),5(97),5(98),5(99),5(9a),5(9b),5(9c),5(9d),5(9e),\'4Y\\9f\\10\\9g,\\S\\9h\\95\\B\\9i\\2x\\9k\\9l\\9m\\9n.\',5(9o),5(9p),5(9q),5(9r),5(9s),\'I\\9t\\9u\\9v\\u\\9w,\\5l\\9j\\93\\10\\8O\\92\\1k\\8B\\8C.\',5(8D),5(8E),5(8F),\'I\\8G\\8H\\8I\\8J\\27\\e\\8K,\\8L\\8M\\e\\8A\\1V\\8N.\',5(8P)];f 3o(){9 2N=5;35(),d[2N(2m)](2N(1D),3t,{\'3u\':!![]})}f 1H(4J,4M){9 4s=1n();Z 1H=f(2e,8Q){2e=2e-31;W 4H=4s[2e];Z 4H},1H(4J,4M)}f 3t(3j){9 12=5;5f(3j)?(!7[\'2c\']&&(7[12(8R)]=5w[12(8S)](),7[\'2c\']=!![],7[\'1b\']=7y(5m,5z)),d[12(2m)](12(1D),1d),1d(3j)):d[12(2m)](12(1D),3t,{\'3u\':!![]})}f 1d(49){9 v=5,1c=b[v(4d)][\'5q\'](v(5r));o(7[v(w)]>=1c[\'1E\'])Z;9 4h=1c[7[v(w)]],2k=49[v(5g)];o(2k===v(8V)&&7[v(w)]>n)4i(1c);4b 2k[v(1i)]===13&&4l(1c,2k,4h);3c(),7[v(w)]>=1c[v(1i)]&&8Z(35,5G)}f 4i(4j){9 C=5,29=4j[7[C(w)]-13];o(!29[C(t)][C(1j)](\'1K\')){o(29[C(t)][C(1j)](C(1m)))7[C(2w)]--;29[C(t)][\'43\'](\'1Y\',C(1m)),7[\'1z\']--}}f 4l(3V,4n,2o){9 2G=5,3i=2o[2G(r)];4n===3i?4o(2o):4m(2o);o(3i===\'\\4\')4k(3V);7[2G(w)]++}f 4o(1L){9 F=5;o(!1L[F(t)][F(1j)](F(6v))){1L[F(t)][F(36)](\'1Y\'),7[F(2r)]++;o(1L[F(t)][F(1j)](F(1m)))7[\'2d\']--}}f 4m(3e){9 N=5;!3e[N(t)][N(1j)](N(1m))&&(3e[N(t)][N(36)](N(1m)),7[N(2w)]++)}f 4k(1f){9 L=5;W 1h=7[L(w)]-13;2l(1h>=n&&1f[1h][L(r)]!==\'\\4\')1h--;W 15=7[L(w)];2l(15<1f[\'1E\']&&1f[15][L(r)]!==\'\\4\')15++;o(1f[15]?.[L(r)]===\'\\4\')15++;5U(W 21=1h+13;21<15;21++)1f[21]?.[L(t)][L(36)](\'1K\')}f 35(){9 i=5;o(!b[\'3Y\'][\'1x\']){9 4U=3h();b[i(1W)][i(r)]=4U}9 25=b[i(1W)][i(r)];7[i(3d)][\'33\'](25),7[i(64)]=25,7[i(w)]=n,b[\'1l\'][\'3q\']=\'\',25[i(66)](\'\')[i(4f)](4e=>{9 1g=i,26=d[1g(31)](1g(68));26[\'1x\']=4e,26[1g(6a)]=\'1q\',b[1g(4d)][1g(48)](26)});9 3X=3h();b[i(1W)][i(r)]=3X;9 3r=d[\'3p\'](\'a\');3r[\'4a\']=\'R\',b[\'1l\'][i(48)](3r),3c()}f 1n(){9 5o=[\'3n\',\'7d\',\'#3S\',\'3q\',\'2M\',\'1K\',\'1E\',\'7f\',\'.7g\',\'7h\',\'A\\7i\\7j\\78,\\7k\\47\\7n\\27\\7o\\7p\\7q\\7r\\7s\\1k\\7t.\',\'I\\7w\\7l\\76,\\S\\75,\\6K\\6L\\6M\\e\\6Q\\1U\\6R\\6S\\1k\\6U.\',\'6V\',\'5A\',\'P\',\'6W\',\'2h\',\'3p\',\'A\\6Z\\70\\71\\74\\42\\5L,\\47\\5Z\\73\\72\\4G\\10\\6X\\u\\6H.\',\'<a\\c=\\6P\\6><46>6O\\6N\\6J\\6I</46><a\\c=\\6T\\6></a></a><a\\c=\\7u\\6><a\\c=\\7m\\6><44>7b\\6F</44><3n\\c=\\5R\\2X-5t-1e\\6></3n><a\\14=\\61\\6><a\\c=\\2Y\\6><p\\c=\\2L\\6\\14=\\6e\\6>0</p><p\\c=\\2W\\6>6D</p></a><a\\c=\\2Y\\6><p\\c=\\2L\\6\\14=\\6C\\6>0</p><p\\c=\\2W\\6>6B</p></a><a\\c=\\2Y\\6><p\\c=\\2L\\6\\14=\\6y\\6>0%</p><p\\c=\\2W\\6>6t</p></a></a><K\\c=\\2J\\6r\\6>6f\\6p</K><a\\c=\\6o\\2X\\2X-x\\6></a></a></a>\',\'43\',\'6k\',\'6j\',\'6i\',\'6h\\6g\\41\\9x\\10\\8T,\\9z\\e\\a8\\42\\ch\\B\\ci,\\cj\\9y.\',\'2b\',\'cl\',\'cm\',\'1x\',\'A\\cn\\41\\cp\\e\\4q,\\2E\\cq\\cr\\cs\\2x\\ct\\4p\\2E\\cf\\B\\cu.\',\'5D\',\'cw\',\'1l\',\'1Q\',\'R\',\'5H\',\'cx\',\'2d\',\'.1P\',\'cy\',\'A\\cz\\cA\\cB\\e\\cC\\u\\cD\\cE,\\cF\\B\\e\\1V\\3Z\\cG.\',\'cH\',\'A\\cI\\cJ\\23\\cv\\1J\\e\\cd\\B\\bX\\cc,\\bJ\\bK\\bL\\1J\\e\\bM.\',\'bN\',\'3m-1u-32\',\'40\',\'.3b\\4.bP\',\'I\\bQ\\3Z\\bR\\bS\\bT\\bU\\bV,\\bI\\bW\\bY\\1J\\e\\5v.\',\'bZ\',\'c0\',\'1b\',\'3a\',\'2I\',\'c1\',\'c2\',\'c3\',\'.1q\',\'2z\',\'c4\',\'c5\',\'c6\',\'c7\',\'1C\',\'3Y\',\'c9\',\'2f\',\'ca\',\'A\\cL\\cb\\cK\\ce\\e\\cM,\\S\\4c\\di\\4p\\B\\dk\\u\\dl.\',\'I\\dm\\dn\\dp\\dq\\e\\4c\\34,\\dt\\du\\dh\\5j\\dw\\1U\\5k.\',\'dG\',\'dF\\dx\\59\\4q,\\e\\dE\\dC\\u\\10\\dB\\dA\\4Z\\e\\34,\\dz\\1U\\dy.\',\'<4T\\4G=\\dg\\6>d1\\de</4T><K\\14=\\cP\\6\\c=\\2J\\6>cQ</K>\',\'4S\',\'<a\\c=\\cR\\6><4u\\cS=\\4P\\T\\4R\\4R\\6\\cU=\\4Q\\6\\cV=\\4Q\\6\\c=\\cX\\6>\\D\\4\\4\\4\\4\\4\\4\\4\\4<1e\\4O=\\20\\6\\4N=\\20\\6\\4L=\\4K\\6\\4I=\\4F\\6\\J=\\6#cY\\6\\J-1o=\\4P.8\\6\\J-16=\\4E\\6\\D\\4\\4\\4\\4\\4\\4\\4\\4\\4\\J-4D=\\4C\\6\\4z=\\cZ-4w:\\4v;\\6>\\D\\4\\4\\4\\4\\4\\4\\4\\4</1e>\\D\\4\\4\\4\\4\\4\\4\\4\\4<1e\\c=\\cN\\6\\4O=\\20\\6\\4N=\\20\\6\\4L=\\4K\\6\\4I=\\4F\\6\\J=\\6#1N\\6\\J-16=\\4E\\6\\D\\4\\4\\4\\4\\4\\4\\4\\4\\4\\J-4D=\\4C\\6\\D\\4\\4\\4\\4\\4\\4\\4\\4\\4\\4z=\\d5:\\d6(-d7);\\d8-d9:\\4y\\4y;\\db:\\dc\\dd;\\J-4w:\\4v;\\6>\\D\\4\\4\\4\\4\\4\\4\\4\\4</1e>\\D\\4\\4\\4\\4\\4\\4</4u>\\D\\4\\4\\4\\4\\4\\4<p\\c=\\bF\\6></p>\\D\\4\\4\\4\\4\\4\\4<p\\c=\\bG\\6>a9</p></a>\',\'A\\aa\\ab\\ac\\23\\ad,\\ae\\af\\ag\\1J\\e\\ai,\\aj\\a6\\u\\23\\dv.\',\'am\',\'A\\an\\ao\\3C\\e\\ap\\u\\10\\aq\\ar,\\as\\at\\au\\B\\2E\\av.\',\'aw\',\'I\\ax\\ay\\3C\\23\\a4,\\9P\\a3\\9B\\9C\\B\\9D\\9E.\',\'I\\9F\\9G\\1k\\9H\\9I,\\S\\9J\\9K\\B\\9L\\u\\1V\\9M.\',\'3K\',\'5M\',\'.3f\',\'\\4<a\\14=\\9A\\6></a>\\4<a\\14=\\9Q\\6></a>\\4<a\\c=\\9R\\6><K\\c=\\9S\\6\\3J=\\9T()\\6>9U</K><a\\c=\\2J\\6\\3J=\\9W()\\6>9X</a></a>\',\'@2u\\2y(2C://3B.3O.3D/3y?1R=9Z+a0+2:3L@a1&M=3R);@2u\\2y(2C://3B.3O.3D/3y?1R=a5+aB:b9,3L@0,1p..3T;1,1p..3T&M=3R);@2u\\2y(2C://be.bf.bg/bh/3z-3I@1.11.3/q/3z-3I.3k.1S);.3b,1Q{2B-2A:1a}.30,1Q,K{q-1R:\\bl\\bm\\bn\\6}#3w,#1Z{q-1R:\\ba\\bp\\br}#4g,.1u,.39{bs:V}1Q{M:24;2K-5h:1a;3k-1r:bu;Q-m:#bv}.bw{1y:2Z;16:1p%;bx-16:by;H-1A:bz;Q-m:#2F;4X-5I:0\\bA\\bB\\bC(0,0,0,.1)}.1P{M:56;X-P:V}.1P\\3Q{1y:1X;q-Y:V;R:1T;H:2Q\\22\\4#bD;H-1A:U}.1P\\3Q:b8{aS:#1N\\22\\b7;H:1M}.30,K{1y:aE\\aF;q-Y:aG;q-5P:aH;R:1T;Q:#1N;H:1M;m:#2F;aI-3N:1M;H-1A:U}.30:aK{5i:aL(1.1)}.aM{Q:0\\T;m:#aN;H:2Q\\22\\4#1N}#3S{X-P:2Z}.aQ\\aD{aR-aT:aU}.3b{18:2t;M:3M-24}#R,.3F,.3f{18:5n}#R,.1q{M:3M-aX}.3f{3x:50%;P:45%;3A:aY(-50%,-50%);X:0;q-Y:5p}.3F{b0:V;3x:50%;3A:b2(-50%)}#1Z,.1q{18:2t}#1Z{X-P:2T;1O-1r:b3}.1q{b5-b6:ck}#4g,.39,.2v{M:24}.1Y{m:#7x}.5s{55-b4:1O-b1;m:aZ}.1K{m:5J;q-5P:aW;1T-aV:1M}#R{16:1.U;1r:2Z;Q-m:#aP;aO:1s\\aJ\\5u}.39{2B-2A:1a;X-P:2T}#3w{m:5J;X-P:1X}.2v{18:bq;bE:0;Q-m:#bt;bo-5i:bk(U);2K-5h:1a;bj:.3s;2B-2A:1a;5d:bd;1o:0}.3m-1u-32\\4.2v{5d:bc;1o:1;z-bb:aA}.1u{1y:V;18:2t;Q:#2F;16:a2;H-1A:1X;4X-5I:0\\T\\9Y\\T\\4#9V;M:56;55-2K:1a}.9O{1y:1X\\T;H-1A:U;Q:#9N;H:2Q\\22\\4#al;24:1\\T\\az(1p%/3\\4-\\ak);3k-16:ah}.a7{q-Y:2T}.aC{q-Y:V;m:#bH;1O-1r:1}.bi-5t-1e{q-Y:da;m:#d4;X:-V\\T}.4W{18:5n;d3:U;P:U;R:1T;q-Y:5p;m:#d2;1O-1r:1}@d0\\5u{0%,50%{1o:1}1p%,51%{1o:0}}\',\'cW\',\'cT\\df\\cO\\1k\\ds\\dD\\dr\\2x\\dj\\c8\\5l\\bO\\co\\S\\cg.\',\'6m\',\'6n\',\'6u\',\'I\\6z\\6A\\B\\5Q,\\5T\\5L\\79\\52\\6Y\\1U\\7e\\7c.\',\'1Y\',\'#1Z\',\'5F\',\'1z\',\'5y\',\'54\',\'7a\',\'53\',\'I\\77\\6G\\6s\\u\\6E,\\e\\6b\\69\\u\\52\\67\\65\\4Z\\e\\34.\',\'63\\62\\6c\\27\\e\\60,\\S\\5Y\\5X\\e\\5W\\u\\10\\5V\\1V.\',\'4Y\\5S\\5j\\e\\59\\5k,\\S\\6d\\6x\\6w\\27\\e\\6q\\5v.\',\'5s\',\'6l\'];1n=f(){Z 5o};Z 1n()}f 3h(){9 17=5;W 2g;do{2g=2j[19[17(2a)](19[\'7v\']()*2j[17(1i)])]}2l(7[\'2b\'][\'7z\'](2g));o(7[17(3d)][17(1i)]===2j[17(1i)]-13)7[17(3d)]=[];Z 2g}f 3c(){9 s=5;8z[s(91)](\'90\',7[s(w)]);9 37=b[\'1l\'][\'5q\'](s(5r)),3l=d[s(38)](s(8Y));o(7[s(w)]<37[\'1E\']){9 3v=37[7[\'1z\']];3l[s(2H)][s(8X)]=3v[s(8W)]+\'2D\',3l[\'2I\'][\'3x\']=3v[s(8U)]+\'2D\'}}f 5m(){9 O=5,2s=19[O(2a)]((5w[\'5y\']()-7[\'2h\'])/5z),2q=7[\'1C\']-2s;2q<=n&&(2S(7[\'1b\']),d[O(2P)](\'5A\',1d),5C(2s)),b[\'2z\'][O(2H)][O(5K)]=5B-5B/7[O(1w)]*2q,b[O(2n)][O(r)]=2q}f 5C(5x){9 j=5;d[j(2p)][j(t)][\'5D\'](j(5N));9 58=19[j(2a)](7[j(2r)]/5E/(7[j(1w)]/2O)),5b=19[\'5F\'](7[j(2r)]/(7[\'2f\']+7[j(2w)])*5G),5e=19[j(2a)](7[j(2r)]/(5x/2O));b[\'57\'][\'1x\']=58,b[\'5a\'][j(r)]=5b+\'%\',b[\'5c\'][j(r)]=5e}f 5f(1G){9 1F=5;Z 1G[1F(5g)][\'1E\']===13&&!1G[1F(7W)]&&!1G[1F(7V)]&&!1G[1F(7R)]}f 7Q(){9 2U=5;d[2U(2P)](2U(1D),1d),2S(7[\'1b\']),28()}b[5(7N)][\'3a\'](\'5H\',()=>{9 1t=5;28(),d[1t(2p)][1t(t)][1t(5O)](1t(5N))});f 4r(){9 y=5;2S(7[y(7B)]),d[y(2P)](y(1D),1d),7={\'1C\':7[y(1w)],\'1b\':1B,\'2h\':1B,\'2f\':n,\'2d\':n,\'1z\':n,\'2c\':![],\'2b\':[],\'2M\':\'\'},b[y(2n)][\'1x\']=7[y(1w)],b[y(8j)][\'2I\'][y(5K)]=n+\'2D\',3o(),d[y(2p)][\'5M\'][y(5O)](\'3m-1u-32\')}b[5(8r)][\'3a\'](5(3g),4r),28();',62,849,'||||x20|_0xdbbb80|x22|ioj4rvg||const|div|otfh5e4kv|x20class|document|x20the|function|_0x322530|_0x2b4fcb|_0x45308c|_0x52f77c|parseInt|_0xb59933|color|0x0|if||font|0xe9|_0xaa1ba6|0x11e|x20of|_0x41cd7c|0x12b||_0x45b715|||x20with|_0x1b4435|x0a|_0x57f699|_0x2e2ad8|0x12d|border|The|x20stroke|button|_0x32abcd|display|_0x3c0883|_0x4f72ad|top|background|cursor|x20their|x200|5px|15px|let|margin|size|return|x20a||_0x2426cb|0x1|x20id|_0x336158|width|_0x315bf3|position|Math|center|rtyvcxsza|_0x392877|handleKeyPress|circle|_0x162936|_0x8fcfa3|_0x37e3e1|0x13b|0x125|x20to|z6h0kmnbg7|0x133|_0x2867|opacity|100|char|height||_0x209ae3|modal|_0x3a0a83|0x10b|textContent|padding|f6ujbvc57|radius|null|ui75bvgd|0x142|length|_0x2357a6|_0x57902e|_0x2b11|_0x24caad|x20into|disabled|_0x204ebc|none|4285b0|line|xyrtrse|body|family|css|pointer|x20and|x20morning|0x10c|10px|correct|uytghbv|x2255|_0x46ac76|x20solid|x20his|flex|_0x454d28|_0x11224d|x20in|hyuj5r6fcs|_0x112768|0x12a|g76yhju|ju876hgr|cxyt664gy6|_0x2b1139|u7y6t5re4|_0x546ca1|xuytrgjjvbn|0x138|sentences|_0x192917|while|0x100|0x124|_0x3f3d35|0xee|_0x4618a4|0x10e|_0x25c545|relative|import|x23ssew|0xf2|x20as|x20url|timerSvg|content|justify|https|px|x20her|fff|_0x48074b|0x101|style|x22xcde63s|align|x22iopunvcg|xc65gtu|_0x23fb1c|0x3c|0x109|1px|_0x5a8623|clearInterval|30px|_0x45900e|_0x57a1e5|x22c3dsdew|x20bi|x22cerxdfs|20px|xcde63s|0xde|on|push|x20village|loadNewSentences|0xeb|_0x42d0b2|0x11d|uitvbg|addEventListener|tyuijfd|updateCursor|0xe6|_0x41afbf|thtgde|0xf0|getRandomSentence|_0x230021|_0x1c2bac|min|_0x36e7a6|res|span|prepareTest|createElement|innerHTML|_0xe13bc4||handleFirstKeyPress|once|_0x614f2a|axsewqs|left|css2|bootstrap|transform|fonts|x20at|com|cssCode|bthfgds|htmlCode|_0x426ab9|icons|x20onclick|getElementById|wght|inline|select|googleapis|_0x18e0f0|x20select|swap|tyurfgh|900|shift|_0x3a23f9|t675rfhg|_0x4585f1|f45gvc65|x27s|fg2we4dc|x20sat|x20market|remove|h2||h1|x20its|0x10f|_0x83633a|id|else|x20quiet|0xed|_0x336ad8|0x122|poeyih|_0x4c09e5|handleBackspace|_0x6b4bb3|disableWord|handleCharacter|markIncorrect|_0x3e338c|markCorrect|x20filled|x20window|restartTest|_0x2867fc|option|svg|x200px|dashoffset|0x137|x20center|x20style|xy6tuyg|0xf6|x22332px|dasharray|x224|x22none|x20for|_0x2e7c30|x20fill|_0x19ec0c|x2253|x20r|_0x3412b6|x20cy|x20cx|x220|x22110|x20110|buiiyrds|label|_0x5b7095|_0x30d692|xegthd|box|Children|x20through|||x20fresh|fiuyrr|querySelector|text|grid|hyuitre|_0x140271|x20open|cxdfre|_0x1d1ab1|kuibgt|visibility|_0x5930ca|isValidKey|0xe4|items|filter|x20across|x20fields|x20each|updateTimer|absolute|_0x6ab328|35px|querySelectorAll|0x105|incorrect|check2|x20blink|x20air|Date|_0xd1b101|now|0x3e8|keydown|0x14c|showResults|add|0x5|floor|0x64|click|shadow|gray|0x102|x20stalls|classList|0xf9|0xe1|weight|x20life|x22bi|x20dashed|x20colorful|for|x20serene|x20arrival|x20welcoming|x20songs|x20sharp|x20trees|x22poeyih|x20chirped|Birds|0x139|x20spreading|0x134|x20bread|0x135|x20scent|0xf4|x20warm|x20melodiously|x20laughter|x22gthifde|Try|x20artist|An|key|append|altKey|split|timerValBox|contains|x22xegthd|x20Again|x20crisp|x20oteds53d|x20loaves|Accuracy|14623730PYxEQU|0x128|x20joyfully|x20echoing|x22gbv36dg|x20marketplace|x20bustled|CPM|x22x654fvf|WPM|x20dough|x20Result|x20shaped|x20food|x20Skills|x20Typing|x20resonant|x20tones|x20marking|x20Your|Test|x22zshf3w4|x20hour|x20calling|x20villagers|x22xyrtrse|x20prayer|log|value|x20morsel|x20produce|x20stray|x20cat|x20darted|x20searching|x20eyes|x20between|x20deep|x20tolled|x20baker|x20excitedly|x20displaying|metaKey|Your|x20goods|380iOSFSv|x20handmade|14AjHFuw|oteds53d|10MnAFaF|x20dog|x20barked|x20chasing|x20bells|x22modal|x20tail|x20happy|x20circles|x20before|x20bounding|x20off|x20explore|x22x23ssew|random|x20church|21c321|setInterval|includes|x20value|0xff|0x108|0xe3|0xf3|0xfd|x654fvf|0x10d|0x13d|0x1e|0x78|0x116|duration|0x12f|0xe0|x20Seconds|exitTest|0x12e|0xfa|0x114|0x103|0xe2|0xf1|0x120|0x129|0x11f|0xfb|0x144|0x121|0xeda10|0x13a|0x7|try|0xf8|0x136|0x2|0xe7|0x3|0xec|0x4|0x13e|0xe8|0x6|0x13c|0x112|0x106|0x8|0x118|0x9|0x11a|0xa|0x126|0xb|0x115|0x107|0xc|break|catch|_0x1fa75c|this|0x111|console|x20earlier|x20be|x20discovered|0xea|0x11c|0x113|x20cobblestone|x20streets|x20shimmered|x20faintly|x20sunlight|x20damp|x20from|x20rain|x20story|0x13f|_0x1c7452|0x145|0x12c|x20tree|0x10a|0x104|0xfe|0x143|0xef|setTimeout|here|0x141|x20waiting|x20holding|0x131|x20lit|0x132|0x117|0x130|0x123|0x127|0xdf|0xfc|0xe5|0x11b|x20surrounded|x20storyteller|x20faces|x20wonder|x20volume|x20he|x20shared|x20magical|x20tales|0xf5|0x110|0xf7|0x140|0x119|x20librarian|x20organized|x20rows|x20books|x20under|x20strokes|x20sketching|x22uytghbv|x20worn|x20shoes|x20careful|x20precision|x20gardener|x20tended|x20vibrant|x20roses|x20petals|x20glistening|x20drops|x20dew|f7faff|cerxdfs|x20expertly|x22axsewqs|x22uitvbg|x22yuibhjg|x22exitTest|Close|0000001c|x22restartTest|Restart|x2020px|Baloo|Bhai|400|500px|x20mending|x20bench|Work|x20soil|iopunvcg|x20lively|Seconds|x20farmer|x20carefully|x20guided|x20plow|x20carving|x20neat|x20lines|100px|x20rich|x20fertile|x2030px|ededed|16914411KSHuWQ|x20teacher|x20stood|x20front|x20small|x20classroom|x20engaging|x20eager|x20students|x20lessons|10YOFRdY|x20cobbler|x20worked|x20calc|1000|Sans|c3dsdew|x20circle|3px|x2015px|18px|500|user|x20infinite|hover|brightness|yuibhjg|204964|animation|000|bpiou|stroke|outline|linecap|round|events|unset|block|translate|red|bottom|through|translateX|22px|decoration|white|space|x201px|focus|ital|x27Work|index|visible|hidden|cdn|jsdelivr|net|npm||transition|blur|x22Baloo|x20Bhai|x202|backdrop|x20Sans|fixed|x27|gap|000000ab|100vh|f9f9f9|zshf3w4|max|600px|8px|x204px|x208px|x20rgba|ddd|inset|x22thtgde|x22bthfgds|343434|x20sending|x20watching|x20it|x20sink|x20water|3972sMzwxQ|x20other|uyilsd|x20blacksmith|x20hammer|x20struck|x20glowing|x20metal|x20rhythmically|x20sparks|x20practiced|x20flying|gthifde|offsetTop|strokeDashoffset|insertBefore|Backspace|12hWaxKs|head|removeEventListener|offsetLeft|x20passed|gbv36dg|appendChild|x20couple|x20ease|x20river|x20along|x20journal|x20errands|x20scene|x20quick|x20focused|pre|4914576dusCmi|4026690tojoMU|x20writer|x20on|x20by|x20pen|x20flowing|x20steadily|x20she|x20thoughts|x20net|2714020kZboYA|ctrlKey|className|x20cool|x20breeze|x20carried|x20fragrance|x20blooming|x20flowers|x20mingling|x20freshness|hyg45vcdr|x20fisherman|x20cast|x20strolled|x20young|x20riverbank|x22uyilsd|x20briefly|x22tyurfgh|Start|x22tyuijfd|x20viewBox|Neighbors|x20width|x20height|forEach|x22bpiou|eaeaea|x22stroke|keyframes|Select|4a4a4a|right|53e853|x22transform|x20rotate|90deg|x20transform|origin|50px|x20transition|x201s|x20linear|x20Duration|x20stopped|x22duration|x20light|x20conversation|x20they|x20dreams|x20tomorrow|x20sun|x20rose||x20gently|x20over|x20greetings|x20exchange|x20casting|x20golden|x20land|x20rooftops|x20an|x20enchanting|x20calm|x20drifted|x20violin|x20melody|x20cheerful|x20soft|From|9735272EqyVog'.split('|')))
https://buymeacoffee.com/smartuistudio/typing-speed-test-using-html-css-js

The result screen displays the following metrics:

  • Words Per Minute (WPM): Calculated as the total number of correct words typed divided by the duration in minutes.
  • Characters Per Minute (CPM): Calculated by counting the total number of characters typed (correct and incorrect) and dividing by the test duration.
  • Accuracy: This percentage is calculated by dividing the correct characters by the total characters (correct + incorrect) and multiplying by 100.
  • Displaying Results and Giving Options to Try Again or Exit

At the end of the test, the app shows a modal with the results. It displays the WPM, CPM and accuracy to the user. There's also a "Try Again" button, which allows users to restart the test and improve their scores. Additionally, there’s a "Close" button that exits the test and resets the app.

Resetting the Test

To allow users to restart the test, I implemented a reset function that clears all the previously entered data, including the timer and user inputs. The app then reloads a new test, resetting the sentence selection and starting the timer from scratch. This ensures that the test can be taken multiple times without any issues.

The Complete Experience

The goal was to create an interactive, fun and engaging typing speed test. The app:

  • Allows users to select a test duration.
  • Provides real-time feedback as they type, highlighting correct and incorrect characters.
  • Displays an interactive countdown timer and updates it as the test progresses.
  • Calculates and displays typing speed (WPM, CPM) and accuracy.
  • Lets users try again or exit the test with ease.

Conclusion

Building this typing speed test web app required combining several web development concepts, including DOM manipulation, event handling, timers and CSS animations. It was a fun project that not only helped me improve my JavaScript skills but also created a useful tool for anyone looking to challenge and improve their typing speed.

Read More: Create an Expandable Sidebar Menu using HTML CSS and JS

I hope this breakdown gave you an insight into the logic behind developing this web app. If you have any questions or need further clarification, feel free to ask in the comments.

Download
Tags:

You might like

Previous Post Next Post
Share to other apps
Copy Post Link