Build Your First Typing Game with JavaScript - Part 3

If you're not quite sure how we got here, refer to the where we created Modules for the game, discussed the Window storage property, explained Ternary operators, and briefly introduced Event triggers.

Also, here's .

We'll import the quotes array variable from quotes.js and the functions we defined in the highscores.js module.

Open script.js on a new tab in VS Code and insert the following atop the empty page.

// ./script.js

import { quotes } from './modules/quotes.js';

import {

  saveHighScore,

  displayHighScores,

  clearHighScores,

} from './modules/highscores.js';

Great!

Ideally, you should import only import entities that handle specific functionalities within a file component. It is not unusual to dive right into the component's algorithm and then occasionally scroll to the top of the file to import the required modules as you go.

Step 2 - DOM Element selection

HTML documents consist of a collection of nodes that make up the .

To interact with the DOM with Javascript, you'll typically use the following methods to select node elements:

1. 
   

   The method selects all elements featuring a specific class name and returns an method is more versatile; you use it to select the first element that matches any specified provides function. The elapsed time is displayed in the timerElement, updating every second until the stopTimer() function is called.

   
   
   

   The stopTimer() function halts the count and clears the timer interval.

   
   
   

   That's all there is to the timer logic.

   
   
   

   
   
   
   Event Listeners
   

   
   
   

   .




2. function: The callback function(s) that executes when the event occurs on the HTML element. This can be a named function, an anonymous function (unnamed), or . The default value is false.






An experimental example of how to use the addEventListener method to listen for a click event on a button is illustrated below. We'll dynamically change the style setting of our form element with the showForm display state handler.





Add this line of code to script.js. Save the file and start up live server.








CODE Kopieren
startButton.addEventListener('click', showForm);









After the project loads in the browser, click the Start button.





You'll notice that the form displays but you cannot type anything into it. This is because the input area was previously disabled.





Let's fix this.





Erase the above event listener and replace it with the following.








CODE Kopieren
startButton.addEventListener('click', () => {

  showForm();

  typedValueElement.disabled = false;

  typedValueElement.focus();

}

);









Save the changes and click the Start button again.





methods to randomly select a quote from the quotes array, assigning the resulting value to the variable quote.





The selected quote is split into a list of individual words and the new word list is assigned to the initially empty array words.





This word array is then transformed from an array of single-word strings into an array of HTML span elements with the .map() method.





We join the now HTML-transformed words, parse them into the quoteElement, add the 'quote' CSS class to it for some animation, and highlight the first child of the element (the first word span element).





We then display the timer element and the form, specify that the timer should not start immediately, and finally enable and focus the input text box.







Fantastic!








Step 8 - Typed Value Element Keydown Event Listener






You might not have noticed yet, but there's a slight bottleneck in the typing experience.





Earlier, we saw a few ways to alter the default attributes of a form element but there's one more we haven't addressed.





Consider yourself in the player's shoes for another moment. While typing, you could accidentally hit the Enter key and trigger the default response behavior associated with pressing that key - usually submitting the form and refreshing the page. A page refresh effectively means starting the game afresh.





The player will most likely be unaware of this, and as the developer, you want to curb potential interruptions that mar their playing experience.





The following event listener attached to the form input field typedValueElement listens for the 'Enter'





Now click the reset button and verify that the event listener works as described.





Revert to the previous display setting of reset-div afterward by removing the CSS code comment and saving the file.








Wrap Up






And there you have it. You have created a fully functional typing game!





Here's to display the typing completion message instead of the built-in Windows dialog box.





You can learn about creating modals from this tutorial by Traversy Media.













Your solution should be similar to what we have .


3. Web development without whose expertise and guidance all of this may not have been possible.
   
   
   

   And also to you, the energetic, enthusiastic, and dedicated knowledge seeker who persevered through this action-packed tutorial, we are incredibly honored to help you demystify the developer path through series like these. We enjoyed putting this guide together with you in mind and can't wait to see you progress even further. ❤

   
   
   
   
   
   

   If you found this series helpful, you can support us:

   
   
   
   
   
   • 
     and engage with our growing community 🤼.
   
   
   Vollständiger Original-Bericht

   Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

   ↗ Original-Artikel auf dev.to lesen