{"id":2747,"date":"2025-02-13T15:49:37","date_gmt":"2025-02-13T15:49:37","guid":{"rendered":"https:\/\/codingtutorials.in\/?p=2747"},"modified":"2025-04-05T10:40:08","modified_gmt":"2025-04-05T10:40:08","slug":"create-typing-speed-test-in-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/","title":{"rendered":"Create Typing Speed Test in HTML CSS and JavaScript"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2747\" class=\"elementor elementor-2747\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-94ff90a e-flex e-con-boxed e-con e-parent\" data-id=\"94ff90a\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-69a090d elementor-widget elementor-widget-text-editor\" data-id=\"69a090d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Hello friends, today in this blog, I will show you how to create a <strong><a href=\"https:\/\/codingtutorials.in\/livecode\/typing-speed-test\/\">typing speed test<\/a><\/strong> game in HTML CSS and JavaScript. In the previous blog, I shared how to create a image slider using JavaScript, and now it\u2019s time to create a typing speed test game.<\/p><p>Typing Speed \u200b\u200bTest is a game where you can check your typing speed like WPM (Words Per Minute), CPM (Characters Per Minute), Accuracy etc. In my typing speed test game, the maximum time for typing is 60 seconds. Once you start typing, you\u2019ll see your time, errors, WPM, and CPM at the bottom.<\/p><p>You can also erase your misspelled letters or go backward by pressing the Backspace key on your keyboard. Once you have typed all the characters or the time is up, you can click the Try Again button to reset the results and load a new paragraph.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a8a857 elementor-widget elementor-widget-heading\" data-id=\"6a8a857\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Typing Speed Test Game in JavaScript<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f8256f4 elementor-widget elementor-widget-text-editor\" data-id=\"f8256f4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You have seen the demo of this typing speed test game and how I created this game using HTML CSS and vanilla JavaScript. I hope you liked this typing speed game and you understood the basic code behind making this game.<\/p><p>If you are already familiar with <strong><a href=\"https:\/\/codingtutorials.in\/category\/javascript\/\">JavaScript<\/a><\/strong> and have created projects in it then you can easily understand the code of this game but if you are a very beginner in this and have not created any project before then you may have difficulty in understanding the code and concepts of this typing speed test game.<\/p><p>If you liked this game (Typing Speed \u200b\u200bTest) and you want to get the source code files then you can get from below website page. I would like to suggest that beginners watch the above video instead of downloading the coding files because, in the video, I have explained each JavaScript line with written comments Which helps you to understand the best particular JavaScript line more easily.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ed0dc7 elementor-widget elementor-widget-heading\" data-id=\"1ed0dc7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">You may also like:<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cecb196 elementor-widget elementor-widget-text-editor\" data-id=\"cecb196\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong><a href=\"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/\">Build A Weather App in JavaScript<\/a><\/strong><\/li><li><strong><a href=\"https:\/\/codingtutorials.in\/how-to-create-a-responsive-image-slider-in-html-css-javascript\/\">Create A Responsive Image Slider<\/a><\/strong><\/li><li><strong><a href=\"https:\/\/codingtutorials.in\/how-to-create-an-otp-verification-after-user-registration\/\">Email OTP verification after registration<\/a><\/strong><\/li><li><strong><a href=\"https:\/\/codingtutorials.in\/how-to-create-pagination-using-javascript-with-page-numbers\/\">Create pagination using javascript<\/a><\/strong><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb0726d elementor-widget elementor-widget-heading\" data-id=\"bb0726d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Typing Speed \u200b\u200bTest Game in JavaScript [Source Code]<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d0a1b5 elementor-widget elementor-widget-text-editor\" data-id=\"8d0a1b5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To create this typing speed test game in JavaScript. First, you need to create four files: HTML, CSS, and JavaScript files. After creating these files just paste the following code into your file. You can easily download the source code from below this site.<\/p><p>First of all, create an HTML file named Index.php and paste the given code into your HTML file. Remember, you need to create a file with the .html extension.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-765838c elementor-widget elementor-widget-code-highlight\" data-id=\"765838c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><!DOCTYPE html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n  <head>\r\n    <meta charset=\"utf-8\">  \r\n    <title>Typing Speed Test | CodingTutorials<\/title>\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <\/head>\r\n  <body>\r\n    <div class=\"wrapper\">\r\n      <input type=\"text\" class=\"input-field\">\r\n      <div class=\"content-box\">\r\n        <div class=\"typing-text\">\r\n          <p><\/p>\r\n        <\/div>\r\n        <div class=\"content\">\r\n          <ul class=\"result-details\">\r\n            <li class=\"time\">\r\n              <p>Time Left:<\/p>\r\n              <span><b>60<\/b>s<\/span>\r\n            <\/li>\r\n            <li class=\"mistake\">\r\n              <p>Mistakes:<\/p>\r\n              <span>0<\/span>\r\n            <\/li>\r\n            <li class=\"wpm\">\r\n              <p>WPM:<\/p>\r\n              <span>0<\/span>\r\n            <\/li>\r\n            <li class=\"cpm\">\r\n              <p>CPM:<\/p>\r\n              <span>0<\/span>\r\n            <\/li>\r\n          <\/ul>\r\n          <button>Try Again<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <script src=\"js\/paragraphs.js\"><\/script>\r\n    <script src=\"js\/script.js\"><\/script>\r\n  \r\n  <\/body>\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0996ef5 elementor-widget elementor-widget-text-editor\" data-id=\"0996ef5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Second, create a CSS file with the name of style.css and paste the given code into your CSS file. Remember, you need to create a file with the .css extension.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-522d5fb elementor-widget elementor-widget-code-highlight\" data-id=\"522d5fb\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>\/* Import Google Font - Poppins *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap');\r\n*{\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n  font-family: 'Poppins', sans-serif;\r\n}\r\nbody{\r\n  display: flex;\r\n  padding: 0 10px;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 100vh;\r\n  background: blueviolet;\r\n}\r\n::selection{\r\n  color: #fff;\r\n  background: #17A2B8;\r\n}\r\n.wrapper{\r\n  width: 770px;\r\n  padding: 35px;\r\n  background: #fff;\r\n  border-radius: 10px;\r\n  box-shadow: 0 10px 15px rgba(0,0,0,0.05);\r\n}\r\n.wrapper .input-field{\r\n  opacity: 0;\r\n  z-index: -999;\r\n  position: absolute;\r\n}\r\n.wrapper .content-box{\r\n  padding: 13px 20px 0;\r\n  border-radius: 10px;\r\n  border: 1px solid #bfbfbf;\r\n}\r\n.content-box .typing-text{\r\n  overflow: hidden;\r\n  max-height: 256px;\r\n}\r\n.typing-text::-webkit-scrollbar{\r\n  width: 0;\r\n}\r\n.typing-text p{\r\n  font-size: 21px;\r\n  text-align: justify;\r\n  letter-spacing: 1px;\r\n  word-break: break-all;\r\n}\r\n.typing-text p span{\r\n  position: relative;\r\n}\r\n.typing-text p span.correct{\r\n  color: #56964f;\r\n}\r\n.typing-text p span.incorrect{\r\n  color: #cb3439;\r\n  outline: 1px solid #fff;\r\n  background: #ffc0cb;\r\n  border-radius: 4px;\r\n}\r\n.typing-text p span.active{\r\n  color: #17A2B8;\r\n}\r\n.typing-text p span.active::before{\r\n  position: absolute;\r\n  content: \"\";\r\n  height: 2px;\r\n  width: 100%;\r\n  bottom: 0;\r\n  left: 0;\r\n  opacity: 0;\r\n  border-radius: 5px;\r\n  background: #17A2B8;\r\n  animation: blink 1s ease-in-out infinite;\r\n}\r\n@keyframes blink{\r\n  50%{ \r\n    opacity: 1; \r\n  }\r\n}\r\n.content-box .content{\r\n  margin-top: 17px;\r\n  display: flex;\r\n  padding: 12px 0;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  border-top: 1px solid #bfbfbf;\r\n}\r\n.content button{\r\n  outline: none;\r\n  border: none;\r\n  width: 105px;\r\n  color: #fff;\r\n  padding: 8px 0;\r\n  font-size: 16px;\r\n  cursor: pointer;\r\n  border-radius: 5px;\r\n  background: #17A2B8;\r\n  transition: transform 0.3s ease;\r\n}\r\n.content button:active{\r\n  transform: scale(0.97);\r\n}\r\n.content .result-details{\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  width: calc(100% - 140px);\r\n  justify-content: space-between;\r\n}\r\n.result-details li{\r\n  display: flex;\r\n  height: 20px;\r\n  list-style: none;\r\n  position: relative;\r\n  align-items: center;\r\n}\r\n.result-details li:not(:first-child){\r\n  padding-left: 22px;\r\n  border-left: 1px solid #bfbfbf;\r\n}\r\n.result-details li p{\r\n  font-size: 19px;\r\n}\r\n.result-details li span{\r\n  display: block;\r\n  font-size: 20px;\r\n  margin-left: 10px;\r\n}\r\nli span b{\r\n  font-weight: 500;\r\n}\r\nli:not(:first-child) span{\r\n  font-weight: 500;\r\n}\r\n@media (max-width: 745px) {\r\n  .wrapper{\r\n    padding: 20px;\r\n  }\r\n  .content-box .content{\r\n    padding: 20px 0;\r\n  }\r\n  .content-box .typing-text{\r\n    max-height: 100%;\r\n  }\r\n  .typing-text p{\r\n    font-size: 19px;\r\n    text-align: left;\r\n  }\r\n  .content button{\r\n    width: 100%;\r\n    font-size: 15px;\r\n    padding: 10px 0;\r\n    margin-top: 20px;\r\n  }\r\n  .content .result-details{\r\n    width: 100%;\r\n  }\r\n  .result-details li:not(:first-child){\r\n    border-left: 0;\r\n    padding: 0;\r\n  }\r\n  .result-details li p, \r\n  .result-details li span{\r\n    font-size: 17px;\r\n  }\r\n}\r\n@media (max-width: 518px) {\r\n  .wrapper .content-box{\r\n    padding: 10px 15px 0;\r\n  }\r\n  .typing-text p{\r\n    font-size: 18px;\r\n  }\r\n  .result-details li{\r\n    margin-bottom: 10px;\r\n  }\r\n  .content button{\r\n    margin-top: 10px;\r\n  }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f6020c4 elementor-widget elementor-widget-text-editor\" data-id=\"f6020c4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Third, create a folder named js and then create two JavaScript files (paragraph.js, script.js) files inside this folder. Paste the given code inside paragraph.js file. These are paragraphs that are shown randomly as typing text. You can add more paragraphs to the array to show more paragraphs on the typing game.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b388022 elementor-widget elementor-widget-code-highlight\" data-id=\"b388022\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const paragraphs = [\r\n    \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\",\r\n    \"Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.\",\r\n    \"The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from de Finibus Bonorum et Malorum by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.\",\r\n    \"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.\",\r\n    \"Their politician was, in this moment, a notour paperback. The first armless grouse is, in its own way, a gear. The coat is a wash. However, a cake is the llama of a caravan. Snakelike armies show us how playgrounds can be viscoses. Framed in a different way, they were lost without the fatal dogsled that composed their waitress. Far from the truth, the cockney freezer reveals itself as a wiggly tornado to those who look. The first hawklike sack.\",\r\n    \"An aunt is a bassoon from the right perspective. As far as we can estimate, some posit the melic myanmar to be less than kutcha. One cannot separate foods from blowzy bows. The scampish closet reveals itself as a sclerous llama to those who look. A hip is the skirt of a peak. Some hempy laundries are thought of simply as orchids. A gum is a trumpet from the right perspective. A freebie flight is a wrench of the mind. Some posit the croupy.\",\r\n    \"A baby is a shingle from the right perspective. Before defenses, collars were only operations. Bails are gleesome relatives. An alloy is a streetcar's debt. A fighter of the scarecrow is assumed to be a leisured laundry. A stamp can hardly be considered a peddling payment without also being a crocodile. A skill is a meteorology's fan. Their scent was, in this moment, a hidden feeling. The competitor of a bacon becomes a boxlike cougar.\",\r\n    \"A broadband jam is a network of the mind. One cannot separate chickens from glowing periods. A production is a faucet from the right perspective. The lines could be said to resemble zincoid females. A deborah is a tractor's whale. Cod are elite japans. Some posit the wiglike norwegian to be less than plashy. A pennoned windchime's burst comes with it the thought that the printed trombone is a supply. Relations are restless tests.\",\r\n    \"In recent years, some teeming herons are thought of simply as numbers. Nowhere is it disputed that an unlaid fur is a marble of the mind. Far from the truth, few can name a glossy lier that isn't an ingrate bone. The chicken is a giraffe. They were lost without the abscessed leek that composed their fowl. An interviewer is a tussal bomb. Vanward maracas show us how scarfs can be doubts. Few can name an unguled punch that isn't pig.\",\r\n    \"A cough is a talk from the right perspective. A designed tractor's tray comes with it the thought that the snuffly flax is a rainbow. Their health was, in this moment, an earthy passbook. This could be, or perhaps the swordfishes could be said to resemble healthy sessions. A capricorn is a helium from the right perspective. However, a sled is a mailman's tennis. The competitor of an alarm becomes a toeless raincoat. Their twist was, in this moment.\",\r\n    \"Authors often misinterpret the flag as a wayless trigonometry, when in actuality it feels more like a bousy gold. Few can name a jasp oven that isn't a stutter grape. They were lost without the huffy religion that composed their booklet. Those waves are nothing more than pedestrians. Few can name a quartered semicolon that isn't a rounding scooter. Though we assume the latter, the literature would have us believe.\",\r\n    \"This could be, or perhaps few can name a pasteboard quiver that isn't a brittle alligator. A swordfish is a death's numeric. Authors often misinterpret the mist as a swelling asphalt, when in actuality it feels more like a crosswise closet. Some posit the tonal brother-in-law to be less than newborn. We know that the sizes could be said to resemble sleepwalk cycles. Before seasons, supplies were only fighters. Their stew was, in this moment.\",\r\n    \"The vision of an attempt becomes a lawny output. Dibbles are mis womens. The olden penalty reveals itself as a bustled field to those who look. Few can name a chalky force that isn't a primate literature. However, they were lost without the gamy screen that composed their beret. Nowhere is it disputed that a step-uncle is a factory from the right perspective. One cannot separate paints from dreary windows. What we don't know for sure is whether.\",\r\n    \"A tramp is a siamese from the right perspective. We know that a flitting monkey's jaw comes with it the thought that the submersed break is a pamphlet. Their cream was, in this moment, a seedy daffodil. The nest is a visitor. Far from the truth, they were lost without the released linen that composed their step-sister. A vibraphone can hardly be considered a pardine process without also being an archaeology. The bay of a hyacinth becomes.\",\r\n    \"The frosts could be said to resemble backstage chards. One cannot separate colleges from pinkish bacons. Far from the truth, the mom of a rooster becomes a chordal hydrogen. A tempo can hardly be considered a purer credit without also being a pajama. The first combined ease is, in its own way, a pantyhose. Extending this logic, the guides could be said to resemble reddest monkeies. Framed in a different way, an addle hemp is a van.\",\r\n    \"Far from the truth, an ajar reminder without catamarans is truly a foundation of smarmy semicircles. An alike board without harps is truly a satin of fated pans. A hubcap sees a parent as a painful beautician. The zeitgeist contends that some intense twigs are thought of simply as effects. A cross is a poppied tune. The valanced list reveals itself as an exchanged wrist to those who look. Recent controversy aside.\",\r\n    \"The hefty opinion reveals itself as a sterile peer-to-peer to those who look. This could be, or perhaps the watch of a diamond becomes a bosom baboon. In recent years, some posit the unstuffed road to be less than altern. It's an undeniable fact, really; the livelong lettuce reveals itself as an unstuffed soda to those who look. In ancient times a bit is a balance's season. The popcorn of a morning becomes a moonless beauty.\",\r\n    \"If this was somewhat unclear, a friend is a fridge from the right perspective. An upset carriage is a stitch of the mind. To be more specific, a temper is a pair from the right perspective. Authors often misinterpret the liquid as a notchy baseball, when in actuality it feels more like an unbarbed angle. Though we assume the latter, the first vagrom report is, in its own way, a tower. We know that the octopus of a cd becomes an unrent dahlia.\",\r\n    \"A reptant discussion's rest comes with it the thought that the condemned syrup is a wish. The drake of a wallaby becomes a sonant harp. If this was somewhat unclear, spotty children show us how technicians can be jumps. Their honey was, in this moment, an intime direction. A ship is the lion of a hate. They were lost without the croupous jeep that composed their lily. In modern times a butcher of the birth is assumed to be a spiral bean.\",\r\n    \"Those cowbells are nothing more than elements. This could be, or perhaps before stockings, thoughts were only opinions. A coil of the exclamation is assumed to be a hurtless toy. A board is the cast of a religion. In ancient times the first stinko sailboat is, in its own way, an exchange. Few can name a tutti channel that isn't a footless operation. Extending this logic, an oatmeal is the rooster of a shake. Those step-sons are nothing more than matches.\"\r\n];<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-767e913 elementor-widget elementor-widget-text-editor\" data-id=\"767e913\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Finally, paste the given code inside the script.js file and this is the main JavaScript code of this typing speed test game. If you want to decrease or increase the timer of this typing test game, then change the value of maxTime variable of this file.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fba04e7 elementor-widget elementor-widget-code-highlight\" data-id=\"fba04e7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const typingText = document.querySelector(\".typing-text p\"),\r\ninpField = document.querySelector(\".wrapper .input-field\"),\r\ntryAgainBtn = document.querySelector(\".content button\"),\r\ntimeTag = document.querySelector(\".time span b\"),\r\nmistakeTag = document.querySelector(\".mistake span\"),\r\nwpmTag = document.querySelector(\".wpm span\"),\r\ncpmTag = document.querySelector(\".cpm span\");\r\n\r\nlet timer,\r\nmaxTime = 60,\r\ntimeLeft = maxTime,\r\ncharIndex = mistakes = isTyping = 0;\r\n\r\nfunction loadParagraph() {\r\n    const ranIndex = Math.floor(Math.random() * paragraphs.length);\r\n    typingText.innerHTML = \"\";\r\n    paragraphs[ranIndex].split(\"\").forEach(char => {\r\n        let span = `<span>${char}<\/span>`\r\n        typingText.innerHTML += span;\r\n    });\r\n    typingText.querySelectorAll(\"span\")[0].classList.add(\"active\");\r\n    document.addEventListener(\"keydown\", () => inpField.focus());\r\n    typingText.addEventListener(\"click\", () => inpField.focus());\r\n}\r\n\r\nfunction initTyping() {\r\n    let characters = typingText.querySelectorAll(\"span\");\r\n    let typedChar = inpField.value.split(\"\")[charIndex];\r\n    if(charIndex < characters.length - 1 && timeLeft > 0) {\r\n        if(!isTyping) {\r\n            timer = setInterval(initTimer, 1000);\r\n            isTyping = true;\r\n        }\r\n        if(typedChar == null) {\r\n            if(charIndex > 0) {\r\n                charIndex--;\r\n                if(characters[charIndex].classList.contains(\"incorrect\")) {\r\n                    mistakes--;\r\n                }\r\n                characters[charIndex].classList.remove(\"correct\", \"incorrect\");\r\n            }\r\n        } else {\r\n            if(characters[charIndex].innerText == typedChar) {\r\n                characters[charIndex].classList.add(\"correct\");\r\n            } else {\r\n                mistakes++;\r\n                characters[charIndex].classList.add(\"incorrect\");\r\n            }\r\n            charIndex++;\r\n        }\r\n        characters.forEach(span => span.classList.remove(\"active\"));\r\n        characters[charIndex].classList.add(\"active\");\r\n\r\n        let wpm = Math.round(((charIndex - mistakes)  \/ 5) \/ (maxTime - timeLeft) * 60);\r\n        wpm = wpm < 0 || !wpm || wpm === Infinity ? 0 : wpm;\r\n        \r\n        wpmTag.innerText = wpm;\r\n        mistakeTag.innerText = mistakes;\r\n        cpmTag.innerText = charIndex - mistakes;\r\n    } else {\r\n        clearInterval(timer);\r\n        inpField.value = \"\";\r\n    }   \r\n}\r\n\r\nfunction initTimer() {\r\n    if(timeLeft > 0) {\r\n        timeLeft--;\r\n        timeTag.innerText = timeLeft;\r\n        let wpm = Math.round(((charIndex - mistakes)  \/ 5) \/ (maxTime - timeLeft) * 60);\r\n        wpmTag.innerText = wpm;\r\n    } else {\r\n        clearInterval(timer);\r\n    }\r\n}\r\n\r\nfunction resetGame() {\r\n    loadParagraph();\r\n    clearInterval(timer);\r\n    timeLeft = maxTime;\r\n    charIndex = mistakes = isTyping = 0;\r\n    inpField.value = \"\";\r\n    timeTag.innerText = timeLeft;\r\n    wpmTag.innerText = 0;\r\n    mistakeTag.innerText = 0;\r\n    cpmTag.innerText = 0;\r\n}\r\n\r\nloadParagraph();\r\ninpField.addEventListener(\"input\", initTyping);\r\ntryAgainBtn.addEventListener(\"click\", resetGame);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11e7597 elementor-widget elementor-widget-text-editor\" data-id=\"11e7597\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>That\u2019s it, now you have successfully created a typing speed test game in HTML CSS and JavaScript. If your code does not work or you encountered any issues, please download the source code files from the download button provided. It\u2019s free and will download a .zip file, then you need to extract it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78470ad elementor-widget elementor-widget-shortcode\" data-id=\"78470ad\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style type=\"text\/css\">\r\n\t\t#dae-shortcode2755-download-wrapper {\r\n\t\t\tbackground: url() !important;\r\n\t\t\tbackground-attachment: scroll !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-download-file-image {\r\n\t\t\twidth: 40% !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-file-image {\r\n\t\t\twidth: 20% !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-download-title {\r\n\t\t\tfont-size: 40px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-download-text {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-download-text h1,\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-download-text h2,\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-download-text h3,\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-download-text h4,\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-download-text h5 {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-download-button {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t\tbackground: none !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-download-button:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-label {\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-icon {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px 0 0 10px !important;\r\n\t\t\t-moz-border-radius: 10px 0 0 10px !important;\r\n\t\t\t-webkit-border-radius: 10px 0 0 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-field {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tbackground: #f9f9f9 !important;\r\n\t\t\tborder-radius: 0 10px 10px 0 !important;\r\n\t\t\t-moz-border-radius: 0 10px 10px 0 !important;\r\n\t\t\t-webkit-border-radius: 0 10px 10px 0 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-select-icon {\r\n\t\t\ttop: calc(50% - 7.5px) !important;\r\n\t\t\tright: 15px !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-field::-webkit-input-placeholder,\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-field::placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-field::-ms-input-placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-checkbox-text {\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tfont-size: 12px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-checkbox-text a {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-checkbox-text a:hover {\r\n\t\t\tcolor: #0081c1 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-submit {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-submit:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0081c1 !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-loading {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-message {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-error {\r\n\t\t\tcolor: #dd1111 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-success {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-category-interests h4,\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-input-wrap-interest label {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: flex-start !important;\r\n\t\t\t-webkit-justify-content: flex-start !important;\r\n\t\t\t-moz-justify-content: fle-start !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-download-title,\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-download-text,\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-label,\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-message,\r\n\t\t#dae-shortcode2755-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper.dae-shortcode-download-wrapper-wide {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode2755-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-title,\r\n\t\t#dae-shortcode2755-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-text,\r\n\t\t#dae-shortcode2755-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode2755-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2755-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-label,\r\n\t\t#dae-shortcode2755-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-message,\r\n\t\t#dae-shortcode2755-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t<\/style>\r\n\t\t<div id=\"dae-shortcode2755-download-wrapper\" class=\"dae-shortcode-download-wrapper\">\r\n\t\t\t\r\n\t\t\t<div class=\"dae-shortcode-download-content-wrapper\">\r\n\t\t\t\t<h2 class=\"dae-shortcode-download-title\">Typing Speed Test Source Code<\/h2>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"dae-shortcode-download-button\">\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-icon\"><i class=\"fas fa-download\"><\/i><\/span>\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-text\">FREE DOWNLOAD<\/span>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-register-wrapper\">\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-label\">Send download link to:<\/p>\r\n\t\t\t\t\t<form class=\"dae-shortcode-register-form\" method=\"post\" novalidate=\"novalidate\">\r\n\t\t\t\t\t\t<input type=\"hidden\" name=\"file\" value=\"typing-speed-test.zip\" \/>\r\n\t\t\t\t\t\t<div class=\"dae-shortcode-register-field-wrap\"><div class=\"dae-shortcode-register-icon\"><i class=\"fas fa-envelope\"><\/i><\/div><div class=\"dae-shortcode-register-input-wrap\"><input class=\"dae-shortcode-register-field\" type=\"email\" name=\"email\" placeholder=\"Email\" autocomplete=\"off\" \/><\/div><\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<p>\r\n\t\t\t\t\t\t\t<input class=\"dae-shortcode-register-submit\" type=\"submit\" value=\"Send link\" \/>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t<p class=\"dae-shortcode-register-loading\">\r\n\t\t\t\t\t\t\t<i class=\"fas fa-spinner fa-spin\"><\/i>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<\/form>\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-message\"><\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hello friends, today in this blog, I will show you how to create a typing speed test game<\/p>\n","protected":false},"author":1,"featured_media":2748,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2747","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create Typing Speed Test in HTML CSS and JavaScript<\/title>\n<meta name=\"description\" content=\"In this blog, I will show you how to create a typing speed test game in HTML CSS. JavaScript. Typing Speed \u200b\u200bTest is a game where you can check your typing speed.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Typing Speed Test in HTML CSS and JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this blog, I will show you how to create a typing speed test game in HTML CSS. JavaScript. Typing Speed \u200b\u200bTest is a game where you can check your typing speed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100040911374714\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-13T15:49:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-05T10:40:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/02\/typing-text.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1424\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"coding2w_newspaper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Create Typing Speed Test in HTML CSS and JavaScript\" \/>\n<meta name=\"twitter:description\" content=\"In this blog, I will show you how to create a typing speed test game in HTML CSS. JavaScript. Typing Speed \u200b\u200bTest is a game where you can check your typing speed.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/02\/typing-text.webp\" \/>\n<meta name=\"twitter:creator\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:site\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"coding2w_newspaper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Typing Speed Test in HTML CSS and JavaScript","description":"In this blog, I will show you how to create a typing speed test game in HTML CSS. JavaScript. Typing Speed \u200b\u200bTest is a game where you can check your typing speed.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Create Typing Speed Test in HTML CSS and JavaScript","og_description":"In this blog, I will show you how to create a typing speed test game in HTML CSS. JavaScript. Typing Speed \u200b\u200bTest is a game where you can check your typing speed.","og_url":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100040911374714","article_published_time":"2025-02-13T15:49:37+00:00","article_modified_time":"2025-04-05T10:40:08+00:00","og_image":[{"width":2560,"height":1424,"url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/02\/typing-text.webp","type":"image\/webp"}],"author":"coding2w_newspaper","twitter_card":"summary_large_image","twitter_title":"Create Typing Speed Test in HTML CSS and JavaScript","twitter_description":"In this blog, I will show you how to create a typing speed test game in HTML CSS. JavaScript. Typing Speed \u200b\u200bTest is a game where you can check your typing speed.","twitter_image":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/02\/typing-text.webp","twitter_creator":"@_CodingAcademy_","twitter_site":"@_CodingAcademy_","twitter_misc":{"Written by":"coding2w_newspaper","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/#article","isPartOf":{"@id":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/"},"author":{"name":"coding2w_newspaper","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10"},"headline":"Create Typing Speed Test in HTML CSS and JavaScript","datePublished":"2025-02-13T15:49:37+00:00","dateModified":"2025-04-05T10:40:08+00:00","mainEntityOfPage":{"@id":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/"},"wordCount":624,"commentCount":0,"publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"image":{"@id":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/02\/typing-text.webp","articleSection":["Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/","url":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/","name":"Create Typing Speed Test in HTML CSS and JavaScript","isPartOf":{"@id":"https:\/\/codingtutorials.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/02\/typing-text.webp","datePublished":"2025-02-13T15:49:37+00:00","dateModified":"2025-04-05T10:40:08+00:00","description":"In this blog, I will show you how to create a typing speed test game in HTML CSS. JavaScript. Typing Speed \u200b\u200bTest is a game where you can check your typing speed.","breadcrumb":{"@id":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/#primaryimage","url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/02\/typing-text.webp","contentUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/02\/typing-text.webp","width":2560,"height":1424,"caption":"Typing Speed Test"},{"@type":"BreadcrumbList","@id":"https:\/\/codingtutorials.in\/create-typing-speed-test-in-html-css-and-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingtutorials.in\/"},{"@type":"ListItem","position":2,"name":"Create Typing Speed Test in HTML CSS and JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codingtutorials.in\/#website","url":"https:\/\/codingtutorials.in\/","name":"Coding Tutorials","description":"","publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"alternateName":"Coding Tutorial for Beginners","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingtutorials.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingtutorials.in\/#organization","name":"Coding Tutorials","url":"https:\/\/codingtutorials.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Coding Tutorials"},"image":{"@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100040911374714","https:\/\/x.com\/_CodingAcademy_","https:\/\/www.instagram.com\/coder_ranjeet\/","https:\/\/www.threads.net\/@coder_ranjeet"]},{"@type":"Person","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10","name":"coding2w_newspaper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","caption":"coding2w_newspaper"},"sameAs":["https:\/\/codingtutorials.in\/"],"url":"https:\/\/codingtutorials.in\/author\/coding2w_newspaper\/"}]}},"_links":{"self":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/2747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/comments?post=2747"}],"version-history":[{"count":20,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/2747\/revisions"}],"predecessor-version":[{"id":3027,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/2747\/revisions\/3027"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media\/2748"}],"wp:attachment":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media?parent=2747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/categories?post=2747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/tags?post=2747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}