JavaScript Create 5 Fun Word Games make your own Web Games | Laurence Svekis | Skillshare

JavaScript Create 5 Fun Word Games make your own Web Games

Laurence Svekis, Web technology Instructor

JavaScript Create 5 Fun Word Games make your own Web Games

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
64 Lessons (8h 27m)
    • 1. Word Game Course Introduciton

      5:59
    • 2. 1 Game 1 Intro

      2:38
    • 3. 1 Setup of webdev environment

      5:59
    • 4. 2 Setup Game Start Values

      7:34
    • 5. 3 Setup Words Game

      8:57
    • 6. 4 Scramble the Letters

      5:47
    • 7. 5 Output Scambled to Page

      6:18
    • 8. 6 Letter Counter

      7:33
    • 9. 7 Scoring and GamePlay

      8:17
    • 10. 8 Final Game Tweaks

      9:40
    • 11. 9 Scramble Letters Game Review

      7:55
    • 12. 10 Dynamic WordList from Sheets

      16:15
    • 13. 11 User Selects List of Words

      11:12
    • 14. 12 GamePlay Bug Fixes with List

      8:07
    • 15. 0 Game 2 Intro Word Decoder

      2:48
    • 16. 1 Game board Setup Secret Word

      7:41
    • 17. 2 Create Interaction for Player

      3:09
    • 18. 3 Create The Coded Values

      10:13
    • 19. 4 Output Code t o Player

      8:04
    • 20. 5 Array Map Shorten Code

      6:21
    • 21. 6 Make it into a Game

      9:55
    • 22. 7 Setup Game Start

      8:40
    • 23. 8 Play the Game

      12:03
    • 24. 9 Player Inputs

      11:21
    • 25. 10 Gameplay tweaks

      8:30
    • 26. 11 Game Win Check

      8:02
    • 27. 12 Final Game Tweaks

      9:28
    • 28. 13 Numbers to Letters Game Conclusion

      16:17
    • 29. 14 Code Review for Game

      6:00
    • 30. 0 Game 3 Introduction hangman

      2:07
    • 31. 1 Game Board Setup

      2:22
    • 32. 2 DomContentLoaded Run App

      10:53
    • 33. 3 Create GamePlay

      6:03
    • 34. 4 Start the Game Setup

      6:52
    • 35. 5 Build Player Letters

      9:31
    • 36. 6 Check Letters to Word

      5:43
    • 37. 7 Update Hidden Letters

      5:26
    • 38. 8 Scoring of Game

      6:07
    • 39. 9 Game Win Conditions

      7:54
    • 40. 10 Final Game Code Review

      10:17
    • 41. 0 Game 4 Introduction wordsearch

      3:27
    • 42. 1 Setup Word Search Board

      6:16
    • 43. 2 Create Add Game Elements to page

      9:04
    • 44. 3 Game Values and Setup Grid

      13:29
    • 45. 4 Add Words to Grid

      11:50
    • 46. 5 Check for existing Letters

      6:08
    • 47. 6 Add Words Vertically

      6:02
    • 48. 7 Fill Game Letters

      9:48
    • 49. 8 List Words to be found

      2:59
    • 50. 9 Game Tweaks and Adjustments

      6:26
    • 51. 10 Player Interaction

      13:24
    • 52. 11 Check Win Condition

      5:32
    • 53. 12 Final Game Tweaks

      9:28
    • 54. 13 Final Game Wordsearch

      13:53
    • 55. 0 Game 5 the Quiz

      2:55
    • 56. 1 Setup Dev Environment Files

      6:29
    • 57. 2 Create JSON Data Fetch Data

      6:41
    • 58. 3 Create Quiz Questions

      4:33
    • 59. 4 Show question to Player

      8:42
    • 60. 5 Gameplay Show Question

      7:39
    • 61. 6 Add Player Interaction to Game

      7:45
    • 62. 7 Move to Next Question

      12:51
    • 63. 8 Add Scoring for Quiz Game

      8:06
    • 64. 9 Final Game Quiz Tweaks

      9:08
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

17

Students

--

Projects

About This Class

Do you want to create fun games using JavaScript - build 5 amazing interactive games perfect for kids using JavaScript

Explore how YOU can build your own games online using JavaScript. Learn about Game design and steps to create a FULLY functional game start to FINISH

5 AMAZING PROJECTS YOU CAN BUILD - You won't find this anywhere else - all code is unique and built from scratch.

  1. JavaScript WORDSEARCH GAME

  2. Dynamic QUIZ from Google Sheet Data

  3. JavaScript HangMan Game

  4. JavaScript Number Decoder Game

  5. Word Scramble with DYNAMIC Word list from Sheets

Create your own version of the game in just a few hours - source code included try it and play it NOW

#1 Javascript Game Word Scramble - Select from multiple Word lists - solve the scrambled word with as little wrong guesses as possible.  Scoring and loading dynamic word lists to create a fully interactive and dynamic game from scratch

  • How to setup and prepare game-board

  • Game Values and Variable for word game

  • Add words to Game

  • Scramble the Letters with JavaScript Random Array values

  • Update and add content to WebPages Output Scrambled words to Page

  • Count letters in a string with JavaScript Letter Counter.

  • Add Scoring and GamePlay to your game with JavaScript

  • Game debug and how to tweak and improve the game

  • Add a  Dynamic WordList from Google sheets to your Game

  • Dynamic Content coming from a Google Sheet - Multiple Word lists

#2 Javascript Game Word Decoder - Every letter has a number associated with it - player needs to solve the phrase using the number codes to letters.  Words and phrases are dynamically loaded.

  • Game board Setup Secret Word

  • Create Interaction for Player

  • Setup gameplay and set coded values

  • How to provide player messages Output Code to Player.

  • Use of Array methods like map to shorten code

  • Make it into a Game JavaScript Word decoder

  • Create Game Flow and Values

  • Create interaction Player Inputs

  • Start and End game conditions and logic

  • Debugging and final game tweaks and improvements

#3 Javascript Game Hangman Game - Select Letters solve the phrase - player needs to guess the hidden phrase by clicking the available letters.  Solve it will as little missed letters as possible.

  • JavaScript Hangman Game Board Setup.

  • Launch app content when DOM loaded DomContentLoaded Run App DOM is ready to write and create Elements

  • Add game logic step by step  to build JavaScript Hangman

  • Create game start Start the Game Setup.

  • Setup and build gameplay adding and Building Player Letters

  • Use JavaScript conditions check correct guess Check Letters to Word

  • Update player Elements and DOM values Update Hidden Letters

  • add Score and Player Score conditions

  • set Game Win Conditions and use of JavaScript logic to provide gameplay

#4 JavaScript Wordsearch - Word searches are fun to play and even more fun to build.  This game section will show you how to create a fully functional word search that fills the grid with as many words as possible hidden in the words and ready for the player to be challenged and solve the puzzle.  Dynamic grid automatically populates the words from your list into it.   You select the size and let JavaScript build the game board.

  • Setup Word Search Board with JavaScript and logic for gameplay

  • Create Add Game Elements to page using document CreateElement Method

  • generate Game Values and Setup Grid.

  • Add Words to Grid for JavaScript word search game

  • Building the board and calculating the available spots on the grid apply Game Logic in JavaScript Check for existing Letters

  • Add Words Vertically to Word search Grid with JavaScript code logic

  • Words horizontally - vertically and reversed letters for 4 possible directions to place the word in the word search grid.

  • Fill Game Letters automatically populate and build the wordsearch board

  • Add a player word list to guide player for remaining words List Words

  • How to test and debug your JavaScript wordsearch Game

  • add player experience Player Interaction

  • Create a dynamic and flexible game to play

  • Game logic how to apply win conditions Check Win Condition

#5 JavaScript Dynamic Quiz Game - JSON data file driving quiz questions and answers.  Create a simple quiz that gets dynamically generated with JavaScript - creates all the DOM elements and interactions depending on the JSON data.

  • How to setup Quiz files and source html Setup Dev Environment Files

  • How to create a JSON data file for your quiz use AJAX Fetch Create JSON Data

  • How to setup HTTP protocol Localhost - needed for AJAX

  • Create Quiz Questions within JSON file for JavaScript Quiz Game

  • Create Gameplay generate player game screens

  • Create player interactive elements with JavaScript generate DOM elements

  • add eventlisteners to game Add Player Interaction to Game

  • Player movement move to the next Question - Automatic Gameplay next JavaScript

  • Add Scoring for Quiz Game

  • Tweaks and debugging of JavaScript Quiz Game

Source Code included - build your own version of the game

Taught by an instructor with over 20 years of REAL WORLD experience ready to answer any questions you may have.

You have nothing to lose - build your own version of the game HAVE FUN - Join NOW

Meet Your Teacher

Teacher Profile Image

Laurence Svekis

Web technology Instructor

Teacher

Web Design and Web Development Course Author - Teaching over 700,000 students Globally both in person and online.   

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990,... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Word Game Course Introduciton: Hey, I've got an exciting set of lessons coming up and we're gonna be building out five different word based games from scratch, all using JavaScript. So if you enjoyed JavaScript and you want to learn more about JavaScript in a fun, exciting format. Then this is for you. We're gonna be creating these games all from scratch. There's also going to be some variation in the way that we're gonna be creating games. So you get more exposure to different ways that you can create your own versions of these games, all from scratch. All of the source code is also included. So the best way to learn is to try the code out for yourself as you go through the lessons. Try to get a feel for it. Have some fun, enjoy, and then also you can make improvements on the game, Build it, customize it, extend on it, and really make it your own. The games that we're gonna be presenting are gonna be fun, word-based games that you can create and share with others to play through and just really have some fun with writing code in real-world applications. So the first game that we're gonna be creating is called word scrambles. So I just call it JavaScript word scramble. So it's good presenting you with a word. That word is going to be scrambled. The letters that could be scrambled. And it's going to be up to the player to solve what the word actually is, their scoring involved, there's gameplay, there's logic. There's also creating the gameboard, all dynamically, all done with JavaScript. And then at the end of that section, I've got some bonus content for you. So if you want to drive the content into the game dynamically from, let's say, Google sheets. I'm going to show you how to do that. So updating the content and separating out the data from the game is going to be key to providing a more dynamic game and experience and a dynamic game environment where you can update the data and the words that are presented in the game. Not having to update the application, just updating it in a Google sheet. So imagine that you can create a number of different word lists and allow the player to select the word list and the words that they want to go through and all controlled by you from your Google Sheet. So I'm gonna show you how to do that and a whole lot more generation of dynamic elements on the page, all done with JavaScript. So we're going to be doing quite a bit of creating elements on the fly and appending them to the HTML content. Next up is going to be a game. I call this the word decoder. So this is a game done in JavaScript where it's going to be presenting you with a series of numbers. And these numbers correspond to letters in the alphabet. And it's up to you or up to the player to decode the secret message that's provided. This as well is going to be featuring some of the really cool things you can do with JavaScript. Creating all of the game content dynamically, all done with JavaScript of how you can apply some styling and really make the game fun and interactive and playable for the player. So the wind conditions, how you can work through how you can apply the game logic and the step-by-step on how to build this game from scratch folder up by JavaScript hangman. So who can forget hang man, fun game where you're presented with a bunch of dashes and it's up to you to select the letters from the alphabet and try not to miss too many letters. The scoring of the letters that you get correct, scoring of the letters that you'd get incorrect, and then providing all of that stuff. And within a game format, that's fun and easy to play, an even more fun to build, separating out the app JavaScript code into a JavaScript object, which provides more flexibility as well as we're going to be introducing the DOM content loaded. So waiting for the dom content to load before we kick off the game and creating the game content using the dawn. And then next up is probably one of the most exciting ones. And that's going to be a JavaScript word search where we're going to be building this, all done dynamically calculating out where the start positions of the words are randomizing whether the word is forward or backwards. Having a goal horizontally, having it go vertically, picking the position and it really stacking the grid, optimizing the grid from the word search as much as possible, all done with JavaScript and calculations of JavaScript of where to place the words on the grid. And then allowing to the player to play on the interactive get grid where they can select the letters and get an immediate feedback response of whether they've collected it, correct or not. Also done dynamically. So we can load as many words as you want and the application will build the word search from the words. Also, the player has the option to select the size of the grid. So how many letters across, how many letters down? So this is all available and all dynamic and all done with JavaScript. And then last but not least is going to be a JavaScript quiz. So this provides you a way to present a question and a bunch of possible answers to the player. And they need to select the correct answer, scoring as well as included. And this is all driven from a JSON file. So again, we've provided the flexibility that you can hook a different JSON file with different data as long as the structure is good and the same, it will load into the application and the application will run through the questions, provide the scoring, provide the correct and incorrect answers, and provide feedback to the player. So this is an action packed, an intermediate level of course. So you do need to have prior JavaScript experience before taking the course. As we're only going to be covering the JavaScript, that is going to be irrelevant to building the applications. So the fundamentals of JavaScript are gonna be assumed in the upcoming lessons, as well as HTML and CSS. We're not going to be covering that. We're gonna be focusing on JavaScript and building games with JavaScript. So let's get started and starts creating some amazing things with code. 2. 1 Game 1 Intro: Hey, welcome to JavaScript, word scramble. In this section, we're going to be presenting you with a game. And this is all JavaScript based game where you get to select from a list of words, so number different word lists and hit start game. And it's going to present you with a word. The objective is to guess and unscramble what the word is. And you can click next and again, select the next word. You got a score here at the top. So solve the scrambled word wronged with as little wrong guesses as possible. It also load some dynamic wordless to, this is actually coming from Google sheet. So this word list is all coming from a Google sheet. So if we refresh, then we select wordless number one. So we're going to walk you through step-by-step how to prepare and create a short gameboard. Get values of variables for the word game, add words to the game so you can add additional words that can get scrambled. So we're making this as dynamic as possible and flexible with as many word lists that you can bring in. And this is all going to be done with JavaScript. So we're making a fully dynamic. So it doesn't matter what the source of the data is, it's going to work. This is an application that just requires data within a particular structured format. Source code, of course is included and one of the best ways to learn is to try to build your own version of the game as you work through the lessons. And I do provide the source code at the end of each lesson. So try it out, run it within your own browser and within your own editor and see how it works. We're also going to be showing you how to introduce the game and how to apply game logic, including the scoring, how to count the letters, how to update the scoring, and then also how to debug tweak application in order to improve any of the application and check for any thing that's not working as expected. So this is run by a dynamic word list. At the end of this section, I'm going to be walking you through YouTube, can set up a connection coming from a Google Sheet and outputting the Google sheet data into your JavaScript application. So you can easily update the words that are being used within this application, not tying it together so you don't have to update the application. You can just open up the sheet, update the words, and that will update the content that's contained within the application. So this is all dynamic content coming from the Google Sheet. And the project is going to be a fully functional, dynamic application that's going to be fully interactive. So let's get started coding and building the JavaScript word game, word scrambled game from scratch. 3. 1 Setup of webdev environment: Hey there this lesson, we're going to be setting up the developer environment and I'm also going to be going over the tools that are going to be using the upcoming lessons in order to present the course content. So first of all, you are going to need an editor. And if you already have an editor, you can go ahead and use the editor that you're already using. Or if you want to try the one that I'm gonna be using in the upcoming lessons. The one I'm using is going to be Visual Studio code. So this is a free download. It's an open source project and it's an editor. It's a pretty good editor. It's available at code dot Visual Studio.com. So you can go ahead and do the download. I'm also going to be working on a Mac. So the Visual Studio code will run very similar for max and for Windows. Of course, the keyboard shortcuts, they're gonna be slightly different, but the overall visuals are gonna be very similar on knocks and Windows. I'm also using a Chrome browser. And the reason I'm using the Chrome browser is that I find that the Developer Tools in Chrome also really good. And there's more information about the developer tools if you'd never use the developer tools. There's also how to open up the developer tools, a number of ways to open it. Usually my preferred method is to click on the screen and hit Inspect. And that will open up the little pop-up window on the right-hand side. And you can also specify where you want this window to be. There's also the three dots on the top right-hand corner of the browser. And you can go to more tools, do the developer tools. And there's also a number of shortcuts to open up the developer tools as well. So this gives us a way to interact with the code that we're running. Any code errors and more. And this is, I'm going to have it for most of the course. I'm going to have it at the right hand side. Also, you can dock it to the bottom so you can set your own preferences to how you prefer to write the code. So let's go ahead and open up the Visual Studio code. So this is Visual Studio code and I'm going to just be working on an opening up brand new file and within a folder. So go ahead and select the folder that you want to work out of, and that's going to open it up. On the left-hand side, you get this welcome screen. You can disable the welcome screen if you are using the Visual Studio code. And you can just simply select new file, or you can go up in the top left-hand corner and do new file. So this is going to be the index file that we're going to work with. I'm going to make the screen size a bit bigger so the code is easier to read for the video. You don't have to do that. You can set your preferred size. So this is just going to be a regular HTML file that we're going to be writing the code in. We're going to link to the CSS file and all of that. So let's set that up and starting out with the HTML tags. And I'm also going to set the doctype. So usually we want to specify the doc type so the browser knows what type of document to expect and close off the HTML tags. And so let's go ahead and save this file. Go ahead and see that as the index file. So this is going to be the starting file, the starting point for your webpage, and saving it as an index file. Again, let's make the text slightly bigger. I can minimize the size of the menu, were not going to be needing that. And I'm also going to close the welcome message. So let's set up the head tag, and then within the head tag, then setting up the title. And I'll call it word game one. And then within the body tags, let's set up the body tags. And within the body tags, we're just gonna link out to a script file. So let's go ahead and save this and link, create a new file. So we're going to create a couple of files. So one is going to be the Javascript file. So we can go ahead and save this file. And this is just going to be the app.js file. So this are all of her JavaScript is going to go and also lets do one more file. And these are all going to be sitting on the same directory. And this is just going to be my style sheet. So I'll just call it style cs, s, And then we'll link to it from our code. So within the index file, let's linked out to the script source. And the script scores is going to be the app.js that we created. And then up in the head area, let's link out to the stylesheet. So link REL and the link type that we're going to be using is a style sheet. And let's link out to that style sheet. So that's located at Style and then close off the link tag. And now we're ready to just a quick check to make sure that we are connected. So selecting the body object and set the background color. And let's just set up to read for now. And of course we can update this later on. And also within the app JS, We're going to put a message in the console, and this message will just save ready. So it means that we're all ready to go. Now, let's launch the file. And you have a number of options to launch the file. So you can drag and drop the index file into the browser just like that. And that's going to open up the file in the browser. You can also navigate towards located within the directory. And once you've opened up the file, go to Inspect. And then under the inspect, go to console and make sure that you have a ready message. I'm also going to make this console message quite a bit bigger as well so that it's easier to read for the video. And once you're set up and you've opened up the read index page, you're ready to move on to the next lesson, where we're going to start typing some code with JavaScript and building out our game. So what's coming up next? 4. 2 Setup Game Start Values: Welcome back. In this lesson, we're going to be continuing to build out the game. So let's open up the editor and start typing some code. So we've linked to the app.js file and we're also going to be setting up a main game areas to just create a div, and we'll just call it class and gain area. So this is going to be where all the mean gameplay is gonna take place. And then using JavaScript, we're going to select the game area into a usable object. So let's start that and also let's get rid of the color background, red. So don't always have that red background. And we'll just leave that out blank right now. So first thing we wanna do is select that element from the page, and then this is going to give us access to that element. So just give it a name. I'm gonna call it game area to be consistent. And then using the documents and queries selector method, this is going to allow us to select an element on the page. And the element that we're going to be selecting is going to be the one with the game area class. And if you do use the game area class more than once, query selector, we'll just select the first one. If you do query selector all you're gonna return back an array. And in Visual Studio, it gives you some information here returns the first element that is a descendant of the note that matches all the selectors. So now that we know that we can select it. And if we're selecting it by the class, we use a dot to prefix the class name. And that's going to allow us to select the game area. And if you want to make sure that you did get the game area object properly, the element object properly, you can always log into the console. So when we refresh, and now we've got the game area and we can also refer to it within the console area. And if we want to add in some textContent into there and say hello, we can do that because now that we've got the connection to the game area object name connected to the element. Any of the updates that we make to this object is going to be reflected within the object on the page as well. Let's make this a little bit bigger so it's easier to read and we've got it up to a 100%. So now that we've got the game area connected, we also need to set up some more variables within the game. So let's continue. And one of the other ones that I wanted to set up his. So we've got a list of variables that we need for the gameplay. So game start values. And because we're creating an array of words that we're going to scramble. We need to have an array that's going to contain those words so that we can use them. And these are all just gonna be string value. So Byrd, and let's do some animals. So dog. And let's do a few more so that we have some that we can pick from randomly. And that of course, will make the game a whole lot more interesting because we have to be able to pick from those existing words. And we've got multiple words that we can select from. So let's also set up button area. So this button is going to be to start the game. And now we can't always go over to HTML, create a button, and so on. But we want to really focus on the JavaScript. So we're gonna be using another method for the document create element, which is going to allow us to create an element dynamically. And then we can use that on the page. So let's go ahead and declare a variable name button. And then using the document and create element, it allows us to create an element on the page and it requires some parameters. And the parameter that it requires is we need to specify what type of element we're creating. So I'm going to go ahead and create a button. And just this in itself isn't really gonna do anything, although it will create a button that we can see in the console and with set some values to it. So setting the text content of the button. And it will just say start game with an explanation work. So that's just a string value that's expecting, let's see what that looks like. So when we refresh, we've got this button element, but it's not sitting on the page and we want to get it on the page. So that's where we would use JavaScript once again and add it to the page. So let's create a section here. And we'll call it add two HTML page. And we're going to do this, of course with JavaScript. So now that we've got the game area selected, we're going to append. And we can also do append child. The difference between append and append child is that append child will return the upended object, whereas append won't. So they're both relatively do the same thing. And now we just need to specify what object we're gonna be appending to the game area. And now when we refresh, now we've got a big giant start button ready to go. And this can be what we can use in order to start our game play. So let's wrap this up and add in an EventListener because we want to have, I'm going to add an event listener. So what this one is going to be doing is it's going to be listening for presses on the button. And because we have the button as a usable object, we can select the button addEventListener and the event listener that we are going to be listening for is going to be a click event. So again, it's telling us more information about what the event listener, so we need to specify a type and then we've got a function. So we can have multiple different types. There's clicks, there's different mouse events, keyboard events, and a whole bunch of stuffs. So this editors giving us some more information about what's contained within the click object. You can use double quotes. You can use single quotes, usually for the string values who I'm declaring them, I use double quotes and when I've got them within a method, a Javascript method, I use single quotes. And the reason that I do this is that it's a lot easier for me to read. So sometimes if you have blank, DO single quotes, I know in the editor here it doesn't look like gets a double quote. But in some editors that will look like a double quotes. So that's just to make sure that I'm not adding and double-quotes and so on. So that's the reason I'm using that. So we're going to track in the event object and we need to associate event lister with with a function. So I'm going to be using the arrow format for the function. You could also of course write it I would does function and then passing in the object information and so on. So you can do it this way as well. But I like to keep it as modern as possible. So we're just using the shorthand format for the function of the event and tracking the event object into the console. So let's go back into start game. And now whenever we click the button, we're firing off the event object and the event object right now, it's only got adding into the console. So we're gonna do quite a bit more, of course with this, and that's coming up in the next lesson. So for now, create a start button and add it to your page and then make it clickable. And you're gonna be ready to move on to the next lesson. 5. 3 Setup Words Game: Okay, so now that we've got our game started and we've got something happening here. I want to create some more elements on the page. And what I want to have is just an area where we can output some content. So potentially we can output the word and have it scrambled. So let's create another variable and call that output. And then using that document create element, we're gonna create a div. And then this is what we're going to be adding to the page. So just creating a div to add to the page. And then also just as we appended the button, we're going to append the div, the output. And because we're appending actually outside in some content into output. And same thing, text area you could also do innerHTML says number of waves to add content. So click that button. So do you think that the output is going to be above or below the text area. So remember we're using append and we're appending the button first, and then we're appending the output. So let's see what that looks like. So refresh. And if you set the buttons first, you are correct. If we go and if we inspect the HTML code, we can see that we've added the button and then we've added in the div. And the reason that is because we're using append if we were to prepend. So that's another option that you have. So that's going to prepend and if we refresh it, then that's going to reverse the order and it's going to add the text first, so the output div first and then the button second. And also notice that we don't have to specify any classes because we already referencing that object has we're constructing it. So that memory location is always going to reference that same point. So it's going to always refer to that element object. So it doesn't matter where we put it on the page. And even if you were to take that and let's say we prepend and append at first and then we append it. So what do you think is going to happen? Now? Where do you think that the output is going to end up? So now we're prepending output, appending output, and then up or appending a button and then appending the output. And we're outputting output twice. So we think we're going to throw an error, or what do you think is going to happen here? And if you said that, we're going back to what the last command was, you're correct because it's still taking that same memory location of that element and it's just moving the position. So it originally, it had it up here above the button because we're prepending and then we're appending, sort of added it and after. So that was just a quick overview of how that works. And I think we're okay with having the button on top and then the text on the bottom. And this is up to you, whatever your preference might be. So now we need to select a random word. And we've already got the my words array so we can select a random word for their and return that Word doc. So how do we select a random word? First, let's sort the array. And there's a number of ways to sort the array. And one of the shortest waves is just to do sort of it. And if we want to sort it. So if we do my words array and sort, what's going to happen here is that it's going to sort it within the alphabetical order. And even though that will do some sorting, it's not going to exactly do as we want. So let's go back to the console and start the game. So now we've got bird, dog, cat, cow, bird, cat, cow, dog. So it's just sorts of alphabetical. So we don't want to do that. We want to have and with sort you actually have some options. So if we do math random of 0.5, this is going to return us randomized order sort. So I'm just popping over to the Mozilla Developer Network. So this a great resource if you've never used it before for code snippets. So who is go over to here? If I want to get a quick code snippet and I want to see something in action. So this is what we've got. We're just using the sort right now and it just sorts it in place. So it doesn't rewrite the function, but it sorts dot function in place. So that means that it rewrites the order of how they're ordered, what the index values are within the function, and then reorganizes them. So there's also some parameters that you can pass it and you can do a compare function. So basically we can do a comparison between two elements. And this is where we allow us to specify the sort order. So if we want to do a comparison of a to b returns less than 0, sort a of an unexplored and be a comes first. So basically we can mess around with the sort order by passing in the parameters. And if we have a math random value, then this can also update and change how we're sorting, how we're doing the sort. So let's go back into the code and let me show you what I mean. So when we're doing the sort, if I provide a value here and the sort is expecting a function to be returned back. So let's add the function and, and for right now we'll just return back a value of 0. And I'll see what happens. So refresh, start game. So now we've got a value of 0. So it's not actually changing the sort order, so it just keeping it as is. And this is where we allow us to have the comparison. So if we do a negative one on this value, and now we get the order of cow, cat, dog, bird. So we're getting a different order here. And every time we click it, it's providing a different order here for the, for the array. So that allows us to scramble the array. And if we want to introduce the random, so whether we're having a 0 or a one, we can introduce random and that's gonna even randomize the array even or so. Let's introduce the return. And we'll do a 0.5 subtracting whatever the value of math random is. So this is going to give us an opportunity to be either positive or negative. And you can try the math random out in the console so you can see what values are potentially going to be returned. So we get, sometimes we get negative values, sometimes we get positive values. So it's all up to how the random is interpreting it. And this is gonna give us a complete randomness of the array. So let's go back and, uh, one more time. And so we're gonna remove out that first console message. So every time we click the button, we're going to randomize the array differently. So that's giving us a full randomization of the array. And I think we've pretty much got all of the words showing up first and in different types of orders. So we can do this in order to pick the word we want to use and whatever word we want to use them, we're going to scramble that. So let's do that to or where it gonna pick. We're gonna re-sort the words and then output the word that we're gonna be using are going to write that into the output area. So let's select a word and I'll just call it temp, or we can just call it temp worth. So this is our selected word, or sell or for the selected word. And whatever the first word is in my words, with the index value of zeros, the one that we're going to use. So that gives us a random word. And now let's take output and set the text content and are going to use template literals. So those are those back ticks to the left of the one key on your keyboard. And then the dollar sign in the curly brackets allow us to do JavaScript functions. So also defined variables. So let's try that out and refresh. I'll clear up the console. And now every time I click Start, we get a different word here in the beginning. And that's the word that we've selected going forward, and that's the one that we're going to scramble. So that's still coming up in the next lessons where we're going to scramble the word. So go ahead and provide a way to randomize the content in the aerate, following what you've just gone through in this lesson. And you're gonna be ready to move on to the next one. 6. 4 Scramble the Letters: Hey, let's create one more objects. So we've got a list of words, and in here, let's just create an object called Game. And then this is what we can use for picking up whatever the selected word is. So selected is going to be blank right now. And scramble is going to be blank as well right now. And we're going to add in, whenever we've selected a word, we're going to use the game object now. So game and game selected is gonna return back the word and will also have to update how we're outputting it. So we don't have a variable selected word anymore, we're using game select. So now let's scramble the word letters. So now that we've got a selected word, we can scramble that word. So let's turn it into an array. So temp will just create a temporary value. And we're going to take the game selected word and split that. So it using the, now that it's a string, if we use split, we can split the contents into an array. So let's logout the array into the console. So doing a refresh click, and now we've got the word as an array. And we already saw that we can scramble the contents of an array really easily by returning back using the sort. So we can do the same thing to the temp. Now that this is an array, we can do the same sort. And now we can output the temp and to turn it back into a string, let's set that up as well. So we'll set temp and then use temp join method. And we want to just join it with blank. And actually I'm going to use the single quotes for this. So just let me clean that up for a second. So now we're joining it back together and now we should see the word, but it's an it's scrambled format. So now we've got the, and we've got bird scrambled, WC scrambled. And we do want to have one check and make sure that it actually does scramble the word. So let's create a function, and the function will continue to run until the word is scrambled. So we're gonna create a function in order to handle that. Because what happened here in this example, this was actually picking up the word and it's sorted the order of the letters. But it turned out it was actually the same as the word. So we don't want that to happen because that's gonna make things a little bit too easy. So let's create a function so we can pass in our word value and create the function sorter. And it's going to return back the game value. So we can return back the scrambled value is going to be whatever we're returning back from sorter. And let's pass into the sorter. The value that we're passing in is going to be the selected work. So let's add in one condition. And this condition is going to check to see if the original word is going to be the same as the newly created word, and if it is, then we know we've got a problem. So let's logout into the console. And then we're going to run this a bunch of times and hopefully we're gonna get the same word and we'll see this in action. So now what we wanna do is we want to try that one more time. And we're gonna do our return and run the function on itself. And if we, if this is not true, then we're good to return back whatever the value of tempest. So this way we are assured that we're going to have different values being returned back and that we won't get the same value for the game selected as the game scrambled. So this should not happen and I'm just going to put them into the console. So, and then run it a bunch of times and hopefully be able to trigger that. We're getting the same word. And I'm also going to add in a short word. I'll just add in high. So we have a two character words, so there's more chance of that one landing. So let's see what happens. So refresh, just clear that. So we got that one was scrambled. This one was scrambled. And see what happened here is that we ran at a bunch of times, so we weren't able to scramble High and it came back the same. So it went back into the function, tried it again. Both of the words came back the same. So we ended up still getting that scrambled word in the end. So it looped through a couple of times and that was really the demo that I wanted to show you. And the reason why I'm adding in this condition here to Can you to run the function until we get different results so that we do get a scrambled word. And we can also have like a countdown or something like that. That if this word doesn't scramble, we do need to make sure that we're avoiding the one-letter words. Because not all obviously is going to always equal. And then at that point we're always going to be returning, returning, returning. And we might want to have a count or something like that so that we break out of that. So that's the only thing to now consider that we need to have a minimum of two characters. Minimum two character. So we've got the word and we've got the scrambled word, and we're ready to move on to the next lesson. So go ahead and add in the function that's going to sort the words and scrambled the word. And you gotta be ready to move on. 7. 5 Output Scambled to Page: This lesson, we want to output the word that we're scrambling and we want to output it to the page as that's the scrambled word. And we also want to get rid of the Start button, do a little bit clean up of the gameplay. And we also have already set up that we are scrambling the word. So ready to go to update the gameplay? So let's start by getting rid of the Start button as soon as it gets pressed. Setting the button style property to be display and set that to none. So now when we click the button, it's going to get rid of the display value. Also going to set some properties for the text, for the output area. And I'm going to set the style property for that to center the text. So let's take that as well. Set style and text align and set that to center align the text and refresh that. So let's go to central line the text. I want to create another line here and I output the word spirit. Now hi is the word. So let's update that as well. And so saying hi is the word. We'll just output that as the word. And let's update output style, font size. And let's set the font size property to make it very large as Rowley outputting the word. So refresh. So HI. And we want to actually output the scrambled word, not the actual word. So we've got the game scramble value here. So let's put this into the text area. So that's our scrambled word. And we want to provide an input for the user to be able to select that scrambled word. So let's create that input on the screen. And right off the bat, we can create it in a number of ways. Create our input. So it's going to be our word. And then using the document, create element, creating an element input. And let's update some of the properties of in word. We're going to set an attribute. The attribute that we're gonna be setting is type, and the type of input that we want is a text. Also, we can set a name for this if we want. Although we don't have to, because we can always reference the input area within Word. So let's just add it to the page. So we're going to add it in under output. So see what that looks like. So refresh. So we've got the input area here, Swan and make this a little bit bigger and space it out better. So also we want to center that. And let's apply some styling to that. So I'm going to add a class to it. So use class list and then add a class. And I'll create a class for it. And I'll just call it my input. So it'll add that class going into the stylesheet. Let's update some properties for the my input. So setting the font size, setting it to, to eat em border. And actually let's set the border size. Let's set the border. So all of the border proper one pick solid and will make it a really light border. So see what that looks like so far. So now we've got the spacing and we also, let's take a quick look at using inspect. Take a quick look at the HTML. And we probably wanted to center everything within in-game area. So we can do that with styling as well. And of course it can be also done with JavaScript. So it's up to you how you want to do it. So just doing a margin auto and we'll also do a text alliance so we can center all of the content on the page. So now we've got the input area is centered. We want to restrict the length of the input to be whatever the number of characters we have there. So again, let's check dots and go and do that with her JavaScript. So we're going to be re-upped, eating the length of the input and the inward and use set attribute. The attribute that we're setting is the max length value. And then the NOX length value is going to be whatever we got for the word. So you can use the selected word or the scrambled word. They're both going to have the same length. And this is a string property. So all strings, you can return back the length value. So let's see what happens. Start Game. So now we're maxed out at the length. So we can't take more than that. I'm going to also add in some letter spacing to the input area. So let's do that with within the style sheet. So letter spacing. And this is the amount of spacing that you want between the letters and do a refresh Start Game. So we're maxed out on the letters. I also want to Center. So let's do a text aligned and we're going to center align the text. So now the text is within the Centre and let's speak the border even later. So what we want to happen is once we get the three characters, we want it automatically to do the check to see if we've unscramble the word. So we'll do that coming up in the next lesson. So for now, make the updates and coming up next, we're going to check to see the length of the characters within the input field. And if we match the length of the characters of the word, then we're going to automatically do a check to see if the word is correct. 8. 6 Letter Counter: In this lesson, we are going to be adding listing for key event listeners and also applying focus. So whenever we click the start button, so the focus automatically goes to the input. So let's open up the code and we'll set that up that whenever we've generated a word, we've already got the inward field. So let's do in word and apply the focus to that inward. So clicking the Start button. Now we've got plight focus right to where we've got the input field. Also going back in and I want to do a letter count. So let's add another event listener. And this event listener is going to be applied to the word elements. So let's input element, add event listener. So the EventListener that we're listening for is key. Press. It's just going to fire off whenever any of the keys are pressed. And what we wanna do is we want to check to see what the length of the input inward is. So for the console, let's take the inward value and apply a length value to it. So every time we press on the inputs or getting a value that's being applied there. So it's maxing out at four. So when we first start, we've got 0 and now we've got 1234. So we could listen for the key up as well. So that would be listening for whatever we've hit the key up. And that would allow us to more accurately count that key process. So notice that before we were starting out 0 because we've got the key press and it wasn't registering the content within the input. So now we're registering at three. So we wanna make sure that once we hit the length of three, that we're gonna do a check to see if the word matches the word that we've got for the game scramble. So let's do that check. So doing a condition. If the inward length is equal to the game selected length. And if it is, then we do our check to check for the words and also want to have on the Enter key. So now that we've tracked that, I'm going to add into the event. So for the key process are tracking the event object and I want to track the event for the Enter key. So it's press enter and we get the key code for Enter. And as well the key is enter. So let's track on the event code and check to see if the event code is enter. So or if the event code. Is equal to enter. And if it is, then we're going to run the check. So right now just put the console log checking. So whether we press the enter key or whether we get to three characters, either way it should run an ad in the option for checking. So now we've got the checking firing off. And if I press Enter or if I get to three letters, both of them will check on the value. And if I take one away and add in another one, I can also see that I'm tracking in on those letters. I also want to add in the spacing for the letter spacing on the word itself that we're outputting into the output area. So I'll just add in output style letter spacing and then what we want to space at by. So let's keep it the same as what we've got for the input, the letter spacing. And we're actually going to update the letter spacing when we have a word being output. And then we'll bring back the letter spacing back to the default. So we can set it over here as well. And then maybe this can be the default, the letter spacing, so that will space out the letters a little bit better. We also want to run the check to see if the words are matching. So let's do a function when checker. And we don't need to pass anything in because we already have these values within the global. So we can always pick up the inward value and check it against the game selected value. So the inward value. And we'll check against that selected value. And if it's correct, that will output correct in the console. And if it's incorrect, then we'll output incorrect into the console. And if it's incorrect, will clear out the inward value. So the user can start again and keep typing onto it. And also just as we set the focus to inward, let's select that and focus on the inward. And will also take the inward style border color. And let's set the border color to green. Actually, that should be if it's right, it's going to be green. And if it's wrong, then it'll go red. And then once we start typing, we're gonna just set a border color back to the default. So we'll just set a border color blackout. I believe we had it as E as the default. So let's see what happens. So now we click it and it's checking. So let's make sure we're invoking the checking function. So now we're not doing that when Czech, so we do need to add that ID. So run the wind check function. So let's start the game. So it goes red. If it's wrong. And if it's right, it should go green. Let's also set the border width. So change the border width as well. So let's set the border width two 5-6. So that's really evident if it's right or wrong. And then whenever we start typing, then we're gonna set it back to one pick. So start game. So it was wrong. And its right. So it goes green if it's rate. And we should also run next word. So removing this word of from the rate R1, the next word. And we're also going to have a score keeping track of how many scores we've got right and wrong. So let's set that up as well. And that's coming up in the next lesson. So it's scoring. 9. 7 Scoring and GamePlay: This lesson, we're going to be updating some of the gameplay as well as setting up a score. So let's set that up, opening up the editor. And we want to have an area where we can add in the score, so tall that scoreboard. And it's the same as we did before. We're create the element for the page. And this can just be a regular div. It's going to hold some content for us. And for the div itself. We don't have to necessarily enter anything in quite yet. You can't. However, if you want scoreboard and set textContent and set the text content to score. And we're going to be outputting the content of the score. Afterwards. Let's also add in into the game. So we'll have score. So value of 0 and in correct. So that's going to be another one that we're going to track. So correct and incorrect. So a score and incorrect, we're going to be tracking within the gameplay. Let's create a function to output the content on the in the scoreboard. We also need to have some just odd score. It's actually going to be updating the score. And I need to add it to the page still to the index page. So how about we prepend this one just to do something different and have it above. So we're prepending the scoreboard at the top. So go through try the game. So we've got the score at the top start game and the input. So let's also highlight a few of the elements so we can hide the scoreboard by default. Hide non needed. So hide non needed. So let's do game area. And actually it's not going to be game area. We're not hiding the whole game area, were just hiding the scoreboard style display and set the display to none, as well as the input areas, because we don't need this quite yet on the screen. And so that one can as well have a display of none. So in Word. And then we're going to toggle these values afterwards when we start the game. So the button goes to display none, but these ones are going to go to display bold or display block. And also this one to display block. So let's see how that looks. So stark game. Click that button, we click it. We don't have the input for. Let's take a quick look and see what happened. How come it's moved over to the left-hand side. So we've got the display area, we've got that, and the input. And then the input is being displayed. So right now it's display block. And that one should actually be displaced span or display inline. So that will keep it centered. And the reason when we go block on an input, it's going to pull it over to the left-hand side. So that's why if we do an inline, then it will keep it by the natural state for the input. So we've got a score area. Also, let's update the background color of the score area. We can do this with styling, or we could do it within the JavaScript. So let's Let's do it within the JavaScripts so that we get a little bit more practice with JavaScript. So style, color and setting the color to be white. And again, scoreboard style. And let's do the background color and set the background color to be black. So we have some nice contrast between what we have for the game area and then the score area also wanted to add in a little bit of padding. So notice most of the time it is easier just to do it within the stylesheet. So let's do some padding to the elements and do 25 pixels of padding. So start game. So there's our score, there's our word. So we've got that wrong. So we should have an update on the score. So within the odd score function, we want to output the score content onto the scoreboard. So where we're setting the scoreboard, we need to update the text content for the scoreboard. So let's create a variable and set up as temp output. I'm going to use a template literal, so the back ticks. So what do we want to have for the score? So whatever the value of the game score is, that's the number we've got correct score. And then we also want to have incorrect. And we'll just do the value of in-game incorrect. And that's the output that we're going to output to the score board. And we can do text content and we could also do innerHTML. So InnerHTML provides us more flexibility with adding in HTML. So I'm going to add in some HTML content here. And let's do a quick bold around the score. And this one can be italicized. So let's see what that looks like, an odd score. So every time the score updates, we should add the score and we get that whenever that we're checking the winner. So if we have it incorrect, then the incorrect will increase. And if we get a correct, the score will increase. So game score increase. Game incorrect increases. And then we update the score within the same function. So let's try it. So we've got incorrect. So whatever number of incorrect trice we have, now we have the correct try. And it actually should clear out the word for the correct as well and allow us to move to the next word. So we shouldn't be able to continuously enter into the input field. So let's make an adjustment for that and set the disabled to be true. So that way we can't type into it anymore. So see if that works. So now we're not able to type into it. We're not able to press enter on it or anything like that. So disabled is true. And maybe we want to have, if we click it, then we get a new word. So let's set that up where if we click it. So now that we've got the score one and we're going to add in. So on the wind condition, we're going to add in an option to get to the next word. So that's the button. So we're going to do the button Display and we're going to add the button. And then also for the button. Text content. Let's write next word. So click for next word. So see how that works. So we get it correct or we got it incorrect and we get a correct. And now we've got click for the next word. This is disabled. There's nothing else that can be done. We can just simply click for the next word. And then clicking the next word should generate another word, should clear out that input area and should re-enable it. So there's a few other things that we need to do and that's, we're going to make some final game tweaks coming up in the next lesson. 10. 8 Final Game Tweaks: This lesson, we're going to play through the game a few times and just to make sure that the game is working as expected. So one of the things is that we're going to have to reset this. So we've got start the game and the game starts. We've got a score value. So maybe on the default, let's set the score value to be just 0. So where we've got the textContent of score, and we'll set it to 0. So that's the default starting value. And we should actually be setting that default value every time we hit the start button. So creating a function to start the game. And this should set all of the values and all a lot of the stuff that we're doing within the button click we can set here. We can also keep it within the button click. So we can create a new function for it, or we can keep it within the button click. So we've set the score to 0. And we can also do an odd score. So that will output the scoreboard content. And always do suggest that you play through the game and make sure that it's functioning as you expect it. So it's tracking the incorrect and now let's get it correct. So we've got the next word. So this should reset and give us the ability to type again. So a nibble, not input area, it did generate the next word. So we should actually update and remove that word from the inwards. So we need to take that word out. So let's use the shift from the array. And this will shift out. So the shift method within the array, and this is going to take the first word within the array. We also need to check to see how many words are left so we can add not into the score. So let's update. We'll update the value of words left within the game. So when we shifted out, we'll take game words left and set it to whatever the, my words length. So if we end up at 0 words left and f2, we've shifted it out, then it's actually going to be no more words. And then that means that the game is over. So let's add that into the score. And I'll just do this as within the small tight because road putting HTML and will output the value of game words left. Close the small tech. And let's say it words left. So see what happens. Start the game. So we've got 0 words left. So it looks like there's a problem there with the number of words that are left. And in order to debug, you can always output the object into the console where we should be adding in a value for the words left. So let's start the game. And we've got words left of four, but it's not outputting here or wanted to output. So let's see why. And that's because we called the odd score function before we calculated how many words are left. So let's move that down after we've got the calculations. And that's why we're getting an incorrect value. So now we're getting the correct one where we've got four words left that are in the array. So whatever the array length as. So when we look at the my, let's look at the my words array. We can see we've got four left, so we've taken out high and we've got four left. And next word. So now we've got three left. We have to re-enable that and turn that green so that we can continue with the gameplay. So where we've updated it and where we've done the checker here, we have to re-enable it. So we've got disabled is true Swift to set that to false. So we can make sure that we're able to type into the input field. So update that to be false. And also we need to update the border values. So we've got the border as five picks. Let's change it back to one pick. And then we're also going to update it and change it back to that gray color. And update the border color and set the border color to that hex value that we have initially. So refresh, start the game and target rate. And we also need to clear the input on the start. So let's do that as well. So in Word value, and just clear that. So start the game. So next word, High, and let's try that one. So next word. So we're tracking the incorrect, tracking the correct and how many words we have left. So we should, they actually have, whenever we get to 0 words, we should be clear of that. And I also want to move the button down underneath the input area. So that was just an order where we're setting those and we can reorder, reorganize those. So let's append it to the bottom. And we should also be centering that button. So within the style, we can center the button. And I'm going to select just the button object and center that button. So now it's centered. We get click for the next word. We're ready to solve the words. We need to also check to sure, to be sure that we have no more words left before we try to display more words. So let's do a quick check to see how many words are left. And if my words length is equal to or let's do an equal to or less than 0. And it shouldn't really be ever less than 0, but usually just in case, let's do the equal to or less than 0. And if the length is that, or if it's equal to or less than 0, then the game is over. So console log. Game over. And if the game is over, then we don't want to run any of the rest of the stuff. So we'll just put an else. And so there's nothing really else to output. And we'll take the game area, and then we'll just output the score. How many we got correct. So I'm gonna do the doc ticks and we'll talk to you got correct. You got whatever correct versus what you have incorrect. And I need to keep that back tick there. And I'm going to start by adding into the game the length, the initial length of the words, so that we have a tracking of how many words we've played played. And then this will be my words length. So we track that in as a hard coded value so that if we need to use it at the end to track how many words were played. Because remember, we are removing from the myWords array. So this array is going to be at 0, and that's where we've got the end of the game. So let's see what happens. And I'm going to just do a quick update of the array. So make it way shorter. I'll make it with just two words. And that way we can trigger the game and a lot quicker. So we've got one word, click for the next word. And you got to correct VS 0, incorrect out of two. So it's the game over. And we should also write that game over. So we're going to update the inner HTML of game area. And so the textContent so that we can add some HTML tags. So a set it and will also append to it. So we can use the back ticks as well for this. So div and destroy big game over within the DEF and create another div for message area. And let's try it. So oftentimes you do have to play through a number of times just to make sure that things are working as you're expecting. Next word, game over, you've got 0. So output textContent, unneeded type, put a div or HTML. So let's try it one more time. Again. Sometimes you do have to play through multiple times and it's always a good idea. So you can make sure that your game is playing as expected. And you got to correct VS 0, incorrect out of two. And I should actually put words out of two. So there we go. So we are complete with the game and come up next. We'll do a quick review of the game and what we've covered in the earlier lessons. 12. 10 Dynamic WordList from Sheets: So I get this question all the time. We just created a game and we've got a list of words, but this is very static. It's sitting within the code. And in order to update this word list, you have to keep going back to the code. So in this lesson, it's gotta be a little bit more advanced. We are going to show you how you can get a word list from a Google Sheet and then update the word list and the Google sheet. So if you're assigning this within your website, you can always pull the words dynamically and from the sheet and you don't have to go into the code, update the code, and you can pull in all of the words dynamically. So let me show you how to set this up. And for this, we are going to be making a fetch request to a web URL where the Google Sheet data's gonna be sitting. So for this we're going to have to be running within the HTTP protocol. So if you've been following along in the earlier lessons, right now we're just running in the file protocol. We've gone to the location where the file is located. We've opened up the index file and we've been running it that way. We can't run fetch that way. We have to run it within the HTTP protocol. So we do need to make some adjustments. So let's show you how we can set up a web server within the Visual Studio. And depending on the editor that you're using, some of them will have default live servers brackets. We'll have a live server that will put you in the HTTP protocol. And the way that you can tell the protocol is whenever you go to the web address, you can have the HTTP in front, HTTPS instead of the file. So make sure that you don't have the file in order to make the fetch request. So let's go into our Visual Studio, go under Preferences and look at extensions. Here we can select different extensions that we can run. And the one that we're going to be looking for is going to be the, it's called live server and this is a node package. So you need to have npn installed and running on your computer as well. So you can search the extensions and live server. And this is the one that we want to install its life server. Right now it's 5.6 and it's written d as creator of it. So go ahead and do an install of it. And the way that this is going to work, this is going to allow us to automatically run into the HTTP protocol. So once it's finished running. And there's an example over here of how this works. We're automatically, we can run the live server and you can read through all of the documentation here it will tell you more about how to use the live server. And if we want to open an HTTP HTML file, we can right-click on the editor and click open with live server. So now that's going to be an option that we can select the index file and we can right-click and I'm on a Mac. So you can do a control click and select Open with live server, or you can memorize the keyboard shortcut. So we do open with live server. This has started a live server. And it just tells us what port it started on. So 5,500 is the port. So it started the HTML file on a live server. Let's go back and open that file port on the live server. And there we've got our game. So now it's coming in. And most importantly here is to notice that we didn't need to make a refresh there, because by default it's going to look for the icon and let's make it bigger. So we do have all of the same gameplay that we had on the file protocol. But now we're running on this web address, the 1270 dot 0. And this is the local address running on your own computer system. So now that we've set that up, we can close the side menu, go into JavaScript. And we can also close this part here. And we are ready to make our fetch request in order to request to a web URL. So also you will need to have a Google account because this is looking for a sheet that's going to be live on line. So you can go into your Google account, go to create a brand new sheet. And within the Google Sheets, you can list out some words here. The way that we're gonna do this is we're going to pick up the words from each one of the rows and use these as the wordless. So right now we're going to have to word lists that we're gonna be able to make use of. So within the Google Sheets. So once you've created a couple lists of words, you can name the sheet to whatever you want. We're just going to be looking for the first sheet within the sheets file and under File go to publish to the web. And you can select the sheep that you want to publish, hit publish. And what this will do is this is gonna give you a web URL for the sheet so that you can paste it into your browser and you should be able to see the sheet data. So we're going to be actually getting the sheet data and getting that from a JSON file. And for the JSON file, we are going to need to take the ID value of the sheet. So every sheet is going to have a unique ID value. Easiest way is to get it within the web URL. So open up the sheet that you want to use. Select the ID from past the d slash. It's a bunch of characters, there are probably about 30 and then slash edit. So those characters that are in their copy that go into your editor. And let's set up a value for ID. So paste that ID in there and just make sure that we've got that proper. And I'm going to update the words array with that content. But first let's make our fetch request and the address that we're making the fetch requests. So this is going to be rather long. So I'm gonna paste it in and we'll just run through it. So it's HTTPS colon forward slash, forward slash spreadsheets dot google.com slash seats, forward slash list, forward slash ID. So that's for that ID value citizen and then the public values. So let's just make sure that it's working and copy the ID into the web URL. So you get an awfully long web URL. I gotta try it within a new window. And just to make sure that we've got the feed. And actually I believe this should be one. So once we get the value of one, because we're looking for the first sheet, we only have the one sheet. You can see. That we're listing out the contents of the spreadsheet. So we've got dog, horse, bird, chicken there, and we've got the list of the sheet contents. Let's make sure we update this value to one so it corresponds with the data that we're outputting in the web URL that we're going to be generating with the ID. So it makes sure that that is updated to one. So we're ready to make our fetch request to the web URL. And using the promised based method. We're going to have whatever the response is back from the server and using that response, returning it back as a JSON object. And then lastly, we're going to take whatever that response back as from the JSON object. And I should, I need one more bracket here and return that back as a value object of data. And then this object here we can place in, we'll just for now will output into the console a console log value of whatever data is. And then we're going to continue to parse through the content that is picked up. So we've got all of the information is sitting within the feed. So we need to next navigate into the feed. And within the feed, We've got a number of entries here within the array. We've got the ID, we've got a number of link objects here. So the way that, so we need to pick up from feed entry and then selecting the entry. This is gonna be an array. Right now we only have one roll of content, but we know within the sheet we have to. And that's because by default, the way that it works is it pulls back the first role of contents as the object names. We have GS, sex, bird, DSX, catch, ESX, dog. And then that's translating to the value that we have under the dollar sign t. And the way that this is working, this is actually picking it up from its using the first role as the title and then the second rule as the entry. So let's update our word list and insert a role above word one. And then this can be whatever words we have worked, five and so on. So let's refresh and see what information we've got within the feed. So now we've got two rows for entry. And there we have all of the words. So you've got word 123. And as well, we can pull it back as content text and simply use that value. So that's going to be the word to word three and so on. So that's returning it back within an object format. And you're probably wondering, okay, well what happens if we have more words than we have available? So let's update these to P, have ones in front of them, and then drag it so that they're all different words. Once again, do a quick refresh, sue, it comes back. So now we have all of the words here, but they're under the ESX and they're getting these random characters in front of them. So we can do it either way. We don't have to have the title. We can just have one title, words or something like that. And it actually doesn't matter where it sits. As we're going to loop through all of the content names that start with the GSD. And we're going to pull all of those back cuz that's where all of the values are held. Us, let's do that. So going in and we want to loop through all of them and getting the ones that have a substring of gs x. So those are the elements that we want to pull back. So within that entry. So setting up an element for this array. And then let's do a check to see, will check for the key in the element. And we're going to loop through all of the keys and the elements I'll output into the console now so that we can see what we're returning back. So keys within the element, the elements is going to be done entire object that we're just putting out into the console. So we looped through all of the key names and we're looking for the ones that start with gs x, so that we can strip out the TSX and just take whatever the value is. So let's also set up an array. And we'll just set up a holding array. So we can, and then afterwards we're going to build it into the words. So looping through and letting, going through the key and elements do a check to see if the key and using java script substring to return back if the 0, the first three characters are going to be equal to the G S x. And if it is, then we know that we found an entry that we want to add to the array so that we've got a value that we want to add into the array. So we're gonna take the holder and push whatever value we've got. So taking from the elements and whatever the k value is and should be within the brackets there. So using the bracket notation, and we want to return back the whatever is contained within the dollar sign t. So rake show we've got the same structure there. So we're getting the value back. So we're returning back dot and we want to whatever's associated with dollar scientists, so they're all dollar sign t. So that makes it easy to extract that information. Loop through. And then we'll console log folder. And now let's see what happened. So we built up an array of all of the words that are contained within that first roll. So that's exactly what we wanted to do. And I'll just redo these back to their original so that we don't have the ones in the words and refresh. So now we've got cat, dog, bird. We actually want to build multiple arrays. And then let the user select which, which set of words they want to pick from. So that means that we can loop through and let's comment that one out and creating a loop that's going to loop through all of the entries. So we're only selecting by index values 0, but we want to loop through all of the available once and drop those within the array. So let's do the for-each and set the element name and return the element name back. And then we're going to use that within the same formula that we had earlier. And then we just need to wrap this with foreach, loop and indented so it's easier to read. So let's see what happens now we refresh and now we've got all of them within that same array. So we actually don't want it to be within the same array. We want to still keep it split up so we don't want the wordless getting mixed together. So that's where we can create another array. So setting up a default array here and then adding to that array. So every time we have that ready, we can add to that array. So let's select array object that we can drop this into. And then every time we loop through each one of these, we're gonna take the array and push whatever the current value of Holder is into the array. And lastly, once we're done, we'll output the my array. So this is going to build a multidimensional array with the contents of each one of those lists. And actually what's happening here is that it looks like we're getting all of them deposited in. So we don't want to do that. We want to empty out holder each time. So as we loop through, we're going to empty out holder. And this way we're gonna get the contents from each one of those rows. So now if I update this and if I add in another word there, let's make sure that our list updated as well. So now we've got four words in there and we're ready to let the user select from this array which, which set of words they want to use. And this is all coming from the spreadsheet. So now you update the spreadsheet. You're going to update the word list. So we're going to finalize this in the next lesson. So I know we've got covered quite a bit here. So I do suggest that you do create your own sheet. Also, then share the sheets. So don't forget to go File published to the web, get your sheet ID and then use the code, use the fetch and that as you fetch, the data contents, then traverse through and pull out the data entry values according to the keys, and then return back that into a newly constructed array, which is going to make it a whole lot easier to work with than working with sheet data, which as you can see, it's rather difficult to read through and get the array contents that you want to use. So set that up and you gotta be ready to move on to the next lesson. We're going to finalize this. 13. 11 User Selects List of Words: Hey, we are ready to update our game with having the user be able to select from a list of different word lists that we have. And these wordless are actually going to be coming out of our Google Sheet. So all we have to do is update the Google sheet and we don't have to worry about updating what we have within the quotes of the code will always run. And that's one of the best ways to build a game and to build code. The more dynamic you can make it that user to update, you can make it the better it's going to be. So that's coming from our Google Sheet. And we've got already two lists there. And we could add in a bunch of other lists as well, so we cannot add more words. So I'll show you how to do that once we load. So what we want to do is give the user an option, a selection before they start the game on what wordless they want to select from. So we wanna make sure before we allow the user to start the game, that there's a drop-down list here of the various lists that we have, the word list that we have. So let's create that. So going into the JavaScript code object with JavaScript, select word, list and using document create elements. And the element that we're creating is gonna be a select list. So I don't want the player to be able to start the game. I don't want them to see anything until we have the list of items and then have that drop-down option for the user so that they can select the list. So first thing we wanna do is we wanna make sure that this all loads. And until the data has loaded, we don't wanna do anything on the screen. So let's make an update to that. We were not going to show the button. And we're not going to show that out. Well, within the output will say content loading, loading. And we'll just have it like that. And then once it's loaded, then that's when we're going to show the button to start the game. So button style display and set the display to block. So that dot point is where we're going to show the button. So for right now, we want to hide the button object. So just as we're hiding these, let's select the button. And we'll hide the button as well on the screen until we've finished loading the content. So we've got words loading. Once it's loading, then we can start the game. We can update the words there. So let's update, put content and whatever we want within the output text. So once it's loaded, please. And by default, so let's populate the word list. So we can have a different list added into the Select word list. And this is another one that we're gonna be hiding until we're ready to show it. And once were populated, once were loaded, we're ready to show this list. So this is another one that we're hiding. And then we're going to show when we're ready for the user to interact with it. Let's also append it to the game area. And we will actually want to put it above the button. So that's the next action that we want the player to take. So that's the word list. And now let's populate the word list and adding in the word list content. So as we loop through each one of the lists, we want to add in a new list to the Select word list. So let's create option. And using document create element, just as we've done before, we're going to create the option. And we need to label these options. So the option and append append a child to it. And the child is going to be just regular text to it. So document. Create a text node. And what do we want to say within the text node number? And then what we want the number to be. So that would just be the count. And we can also select it, get an index value. So that this way we don't have to have a separate count on that. We can just do index plus one cuz we know that this starts out with 0, which is, I'm double-checking and we've got a lot of brackets here. So don't want to have too many brackets just to make sure that I'm not updating too much. And lastly, we want to add to the Select word list. We want to append option in the Select word list. And also for the option we want to give it just a numeric value. And then this is going to respond, this is going to be the value that we have for the option. And this is going to be just whatever the index value is that we're placing it into the rate. So it's going to correspond with our main, my array index value with the word list. So it's loaded, do an inspect and see what we've got for the word list, the options. So value 0, value one. So we want to pick up those values whenever the player hit start game. And that's going to dictate which word list we're going to be loading. And we also want to center this on swell. So let me update within the style. And I'll just call them a separate this, and have the Select Object as well so that it's nice and centered. And also let's in some spacing above it. And we'll just start in some margin on the top. So it's not right up against the button. And I do also want to update how the when the word list is added, so wanted above the button. So now we've got our word list, and in this case maybe we wanna add a margin to the bottom. Now instead of margin top, let's update this to margin bottom. So going back, refresh. So now we've got. Please select your word list, so either one or two. And then whenever we hit Start game, we want to populate the array with the word list that the user has selected. So we've got the my words array and we want to just populate that with whatever the word list that's selected. So we need to make this thought. We can update my words so that this is just gonna be an array that we can update. And we also want to be able to clear out that array and also add to the array. So once the start button is clicked, then we want to have the list of words. And then also we want the next game, the next round that the player can select from a different word list to play. So if we're starting the game, then we're going to take whatever the selected list is and update the array with dropping the words into it. So let's check to see what we can get for the selected list of value whenever we start the game. So this will be the index of value of the word list that we want to return back within the main array that we've been adding a two. And let me move this words value just outside here. And just what we want to run this one time. So reassign the value of the words depending on whatever list was selected in that we hit Start on. So we need to toggle the start of the game. So this only runs one time, but for now, we're going to run it and we're going to reassign whatever this value is to the, my words so that my words will have a length there. So let's see what happens. Let's clear and hit Start Game. So that loads the list of words. And let's try the second list. So it loads the second list, so everything is working properly. We do need to hide this, of course, So there's a few different tweaks and adjustments that we need to make. So this one actually should get hidden when we start the game. So display none. And also let's update the game so that we know that it's in place or not in play. So the in-plane value false. And then once we set in play to true, that I'm going to skip it over the next time. And then we're gonna set in playback to false whenever we're ready. So a game in play. So if it's false, then we're going to reassign the values to the array and also update the value of game in play. So update value of game and play to be true. So that we were only going to get at one time when we do the list. So let's make sure that that works. And select the wordless we wanna use. So wordless disappears. So next word and next word. And Game Over versus 0, incorrect out of total words. So now we should have an option to replay and reset the lists. So again, going into where we've got the lists, we need to select from the list. Let's update these and add these. So play through it again. And I'm actually going to shorten the lists. So I'll just insert above and I'll just have the words while. So select list number one, and we're done. So the game over, we need to handle that to show the lists once again. And what's happening is we're overriding the game area, so we don't wanna do that exactly. We want to just update the output and update the output. And we'll also update the output with the police select. See what happens as we're overriding everything. And so we've got game over. And while this is fairly large, Swift to bring the font down, we have to reset the game and we do have the word lists. So now we've got the word lists. We're not updating the list. So there's a few bugs that we have to work through. It will do that in the next lesson. 14. 12 GamePlay Bug Fixes with List: Hey, so now we're gonna be doing some troubleshooting and bug fixes. So we've got the word lists loaded. We can select different word lists and we can start the game on all of the dynamic word lists. Let's get rid of some of the console messages so that we can properly debug the application as just do a quick find and replace for the console and comment out the console. So we'll do a replace of all of them. Replace all. So that should get rid of all of the console messages that we have. And now we can add in console messages as we're doing our debugging. So what we want is, so, so far the game is working out. Okay? We start the game. We've got 0 words left. Score one, click for the next word and GameOver. So we should be actually hiding the score, and this is way too big. So we need to make an adjustment on the text size within the output. So let's update that. And that was an update for where we had the spacing. So output style letter spacing should go back to 0. And this is only if the game is over. So we're launching the game over. And also let's one more time. So the next word, so GameOver, you got one correct versus one incorrect out of 0 words total. So we're not setting the total words. So that's something else that we need to update the total words. So is played, so game played gets the words, the my words length. So let's make an update to that array. And where we've got the, my words being set, an update dot. And I also want to update the size of the font as well. Sir, font is rather large. So we're going to update the font size and we're, we're updating it to 3M. Let's update that back to one EM or 2m. So again, depending on what your preferences are going to do, 1.2 E m of this. And it should have used an equals sign to assign the value. So it's not an objects. So let's refresh, select the first wordless and suddenly got the one word there. So GameOver, you got one correct VS 0 incorrect out of one words total, please select your word list. We should. Everything looks okay and we can keep the score up there at the top if we wanted to, we could hide the score. That's something we can update fairly easily. And I'm actually going to hide the scoreboard. So I'm going to just do a display, none on the scoreboard whenever the game is over. So we've got our game over stuff. So let's try it one more time. So GameOver, you've got one correct VS 0 incorrect. How to total words? Let's select word list again. And now it's still on game over. So we gotta do some troubleshooting here. And it looks like what's happening here is that we didn't set the in play. So let's update the in-plane and set that to false so that we can rebuild the word list or refresh again. And oftentimes you gotta play through a number of times. So again, it's sitting out in game over. So for some reason it's not properly loading the word list. So let's update that and output that into the console. And that's going to be whatever sitting in my words. And the problem here is that the array is empty because we are associative array. So we need to duplicate the contents of the array. And what's happened is because we assigned the value, it was actually using that first word list and removing from it. So in order to fix that first, let's turn it into a string value. So using join and just put a space in between there. And then we'll turn it back into an array with split. And this is going to separate out and disassociate and reassign new values into the words array with the contents of the array. So this is going to allow us to do what we're set out to do where we can just keep reusing these word lists and have them run. So we've got the word list again. We can use one again, and we can use as many of the lists as we want. We can also add in new lists dynamically within the sheet and selecting out the different word lists. Click for next word. We shall need to update this button as well. So start game or something like that. So let's update the button to say start game. So that's within the button. Textcontent equal dot to start a new game. So it makes more sense for the player. Again playing through it. That's how you catch a lot of these. So now it's game over. You got one correct VS 0 and correct out of a list of one words total, please select your word list and then the word list is here below. Maybe we need to move the word list above the input. So we can do that where we set them and have the selecting of the word list just below the output. Let's see what that looks like. Click for next word. And now it's got the word list. We can select the different word lists. And I say we need to keep it where the button is. So let's update that and bring that back to where the button is. And this is a personal preference. You can style this as however you want it to stop. As long as it's working. Start new game. We've got the word list. So let's try this word list. And again, we've got the words correct. So let's try one more and play through the words. And so we got five correct VS 0 incorrect. So what's happening here is it's adding to the score. So every time we restart the game, we need to clear the score. So that's another thing that we need to handle. So that can be whenever the game ends. Then after we output the score for the player to see, then what we should do is we should be updating and removing that score. So game score and set the value to 0. And game played also set that value to 0. And you might catch a few more little errors here and there. I want to output it after. I wanna set these values, after we've outputted on the screen for the user to see. And again, replay it once again, just make sure that everything is working. So I'm going to purposely getting a bunch wrong. Let's get one writes and I got one correct versus five and cracked out of total one words. Let's try it again. So right now we're still got that five incorrect. So that's not resetting. So I need to make sure that that value resets. So for whatever reason that value didn't reset words left and it's actually incorrect. Thats not the plate. The plate is a different value. So incorrect should be set to 0. And again, just replay it, just make sure that things are working as expected. And this time it does look like at work properly. So we've got the incorrect, the score and the list. And we can select these lists dynamically from the sheet. So you can now you can update your Creek, connect your own sheet and update as many lists as you want for words and let people play through the game if you have any questions, and I hope you've had an opportunity to try the code. Do you have any questions, please let me know. 15. 0 Game 2 Intro Word Decoder: Hey, I've got another game for you in this section, so let's start the game. And this game, I call the JavaScript game word decoder. So the objective of this game is to match the letter codes and D scramble what this hidden message is. And we've got a timer here at the top for the gameplay. So you need to check to see which letter matches up with the numbers and then type the letters here. And once you solve it, the timer starts, stops, and you can actually start another game. It's going to give you another phrase. And till you go through all of the phrases that are loaded within the game and solve all of the phrases. The player needs to solve the phrase using the numbers so you can hide and show the number codes to each one of the letters and the words or phrases are dynamically loaded. So you can have unlimited number of different phrases or words. The application will automatically generate the values, the number values for the letters that the player can play through. So we're going to be walking you through how to set up a game board, how to select the secret words, and how to run the game, how to set up the basic structure of the game. Also how to create interaction for the player, how to provide the player messages and output during the game play, also an array method, how we can shorten some of the codes. So improvements and tweaks on the code, making the game. All of the steps that you need to do in order to make a game. One of the best ways to learn is to work alongside the lessons. As you work through the lessons, build your own version of the game. The source code, of course, is included. And I strongly suggest that you try the code out for yourself to get a real feel for what it does and how it works. And that's one of the best ways to learn. So create in-game flows and how we can set up objects, connect the values, and working in the background with JavaScript. And this is also a great way to practice and learn more about JavaScript, DOM and traction updating elements on the page as all of these are going to be created all using JavaScript. Everything is all dynamically generated with JavaScript, we start out with a very basic file that just has one div within the body and the rest of the content is created and generated dynamically with JavaScript. So this provides us a lot of flexibility as we create the game. Also the player interactions are also done with JavaScript and of course, the wind conditions, the start and end game conditions. I'm also going to be walking you through how to debug the application. So I'm also going to be walking you through how you can debug the application and apply your own improvements to the gameplay. So I know you're excited to get started. So let's dive right into this lesson and start building out this JavaScript decoder game from scratch. 16. 1 Game board Setup Secret Word: Hey, welcome this lesson. We're going to be setting up the HTML code, creating the CSS file, as well as the JS file in order to prepare to create our game. So first thing we wanna do is specify the doctype and specify the doctype as HTML so that we're working with an HTML5 document and then open up there and create the HTML tags to wrap the content within it. Let's create a title there. And I'll just call it secret word game. And then also create the body tags. And then within the body tags are going to link to the script file. And this is one that we're still going to be creating. So it creating app JS. And we're going to link to that file. And also within the head area, the head section, let's create a link and link it to the style sheet. So the type that we're linking is going to be a style sheet. And then the H ref, so the location of it, we're gonna create it within the same directory. So we'll call it style CSS. And that's going to be the preparation we need in order to create the game. Also, lets go ahead and create some game area. So creating a div and class, I'm gonna set this to the game area so that we can reference it within the JavaScript selected, apply some code to it. So now let's create the style and the app.js file. So I'm using the Visual Studio Code editor. You can use whatever editor that you want. Go ahead and create a new file and just save this file as style CSS. And also one more new file. And this is going to be the, were the JavaScript's gonna go. So this is app.js. We've created those files. You can go ahead and you can drag the index file, open up the browser. I've got it kind of opened up here in the background. You can drag it and that will run the index file within the browser. And whatever code you have in there right now we don't have any code, so we're just running the file. I'm going to go ahead and open up the dev tools. I am using Chrome. So Chrome does have the devtools. So going under more tools, developer tools, and there's the Developer Tools interface. And we're going to be using this as we construct our JavaScript in order to debug and create the JavaScript code. So now we can start creating the assets that we need. And we're going to start out by setting up a text area and also having an output area. And that's going to be added into the game area on the screen. So going into the app.js, Let's create those test.txt input area. And I'm just gonna call it text input. So using the document, create elements, we're going to create a text area element. And also first, Also I should select the game area so that we can, or this should be Game area. And using the document. Query selector lets select the element with the class of game area, because we're going to need all of these objects as we construct the JavaScript code. I'm gonna make this slightly bigger so that code is easier to read for the video. And of course you don't have to make it this big lunch you're doing on your own. This is optional, just making it bigger so that the text and the code is more readable. So we're also going to need an area where we can output some content, some information to the user. So again, we're going to use the document, create elements and just create a div there. So this is going to serve as our way to communicate with the user, with the game player. So now we need to also, there's one other thing. We're gonna need a button. And the button is going to be what's going to right now it's going to take the content from the text area and it's going to encode it. So taking the button and also using document, create elements and create a button. So this button is the one that's going to be clickable. And now we want to add all of this to the game area, selected game area content. So let's do that. So add elements to HTML page. So that's what we're gonna do. And you're seeing the game area and append and what do we want first? So let's have in the first area, we're going to and append the output element. And then game area append. And next we're going to have the text input area. And then lastly, Actually I'm going to update this to user inputs so we don't use anything similar to what we've got for the keywords. So user area and then game area and append button, and that's actually btn. So now let's go out sad or refresh our page. And we do have the button. We can't see any text in it. We have the text area and also we have the output area that div above. So we've got the three main elements already written now in the page, and we're ready to move on to the next lesson. We're going to create the interaction for this content. So that's coming up next. So go ahead and set up your game and you're gonna be ready to move on to the next lesson. We're going to create some of the game interactions. And if you need more information about the methods that we just used to construct the page. Predominantly, we use query selector to select the element from the index. And then we also use the create element. And the last time we used append, which is an option to append elements to the page. So querySelector, there's more information at the Mozilla Developer Network. So basically it returns the first element that matches the selection. So if we did have more than one element with a class of game area, it would it just return whatever the first one is that are found on the page and we only do have the one. So this was just one of the ways there's a number of waves with JavaScript in order to make selections. And MDM has some examples of how you can make selections and you can really fine tune your selection process. So if you have more than one element, you can be really specific with it as well. There's also the crate element, which is a method that creates HTML elements by specific I, specified tag name. And you can also add in some options within the tag name. So usually the way that I set that up is I create the element and then I update the properties of the element afterwards. And they're using the append child. So difference between upended append child is that append a child does a return of the element that has been added. So if you're not using that, you don't need to use a pen child, you can just use append, but they're going to work relatively the same way. You can also show, there's also different ways to construct elements. If you want text inside, you can create a text node and add that into the element as well and append it into the element so that again, more examples are available at the Mozilla Developer Network. If you want to find out more about the document methods that we just used to construct our game area. 17. 2 Create Interaction for Player: Now that we've got our basic game setup, we need to update it and make it more attractive and interactive for users. So let's open up the code editor and first we'll select the button, adding in some textContent there so that we know what the button is for. And what it's gonna do is it's gonna take whatever content is within the userInput area. And it's going to create a message using Creating a coded message and return that back into the output area. So we've labeled the button, and I'm also gonna put the button on a new line. So there's a number of ways to do this, and I can update the style of the button. So let's do that and update the style and set the display of the button to be block so that it will move to a new line. So let's refresh secrete message code. We're gonna, we can update the text area for want or you can keep, keep it as this. So maybe we want to update some of the values within the user input area. And let's update the style properties of it will settle width for it as well as a height for it. So the width can be 600 picks. And let's set a height for it. Height doesn't have to be too tall. So let's set a height for it and setting the height to be 50 pix. So basically kind of like a one line height. And if the user wants to add in more than they cannot anymore. So I've got the screen zoomed in at 200. So I can unzoom that. And we can see where we've got the message content going in. I'll zoom it up a little bit more because I do want to be readable within the video. So now we've got an input area, we've got a button. Right now. The button isn't doing anything yet, so we want to create some button interaction. So after I add the elements to the page, I like to add the interaction, selecting the button object, addEventListener, the event listener that we're adding is going to be a click event. And then what we want to do so that whatever function we want to fire off. So for right now, we're going to just track the event that gets triggered whenever the button gets clicked. So do a quick refresh, click the button, and we're triggering and outputting the event object every time the button is clicked. So now we've made the game interactive or the user-interface interactive. Snowy have to decide what we wanna do. We wanna take. 18. 3 Create The Coded Values: In this lesson, we're going to take the input from the text area and we're going to apply some code and translate that into numbers. So there's a number of different charts online that you can type into Google and do letters as numbers. And this will return back whatever the value is for the letter, associate it with the number. So one is a, five is E, 12 has L, 23 is w. So the objective of the game is going to be to decode the numbered values and return back the letters that are associated with it. So we're taking in our value that's being added here within the text area. And we want to return back the coded returned value that's associating the numbers for that. So let's create a function that's going to make the output. So let's call it make output. And this can just, it's going to be just running off the value from the input. So we can either pass it in or we can just take it from the user input area. So in this case I'm going to pass it in because it's going to make our game more flexible. And then it's going to return back the value. So let's have the value or whatever we want to have it response. So it's call it REP. So now we're expecting a value to be turned in to the MC output function and we're going to return back a value from it. And we can do is also console log it that returned value. So what this function is gonna do is it's gonna take a value in a bunch of characters, doesn't matter where it's coming from. And it's going to assign a variable value to a vowel to that input. And then it's going to make the calculations and return back the response. So we need to return back the value of tau and creates and pick up the character values. So we can do a for, loop for that. And looping through each one of the characters that are within the words that we're passing in. So wherever the vowel length is, and this is using the string method because every string has a length. So we do have a length to the user input, and we can return that and use that for a for loop. So let's increment i. And then within the for loop, we're going to be deconstructing the values. So we're going to be getting whatever the character value is. So let's get a character value. So let me update that to see HER value. And taking the val and return back the character at whatever the value of I is. And for now we'll log that out into the console as we loop through. And I also want to update the content that's contained within the input area. So don't always have to keep typing in a message. So input area and set the value. And I'll just type in Hello World. Let's refresh. So we've got Hello World there and we'll create a message for it. So we loop through, we get each one of the iterations of the loop gets different character value. So go back into the code area so that we're breaking apart each one of the values and just getting whatever the character value is that's associated with it. And so we can take that character value and I'll just call it coded. So whatever the character value is. And let's transform them all to lowercase, so that we are always having lowercase values. So we don't want to mix and match the uppercase and lowercase because we always want to return back the same number and using a method character code at 0. So let's see what we have now four coated and do a refresh. So it's returning back numeric value for each one of the characters. So that's gonna be the actual character code. So we can subtract off of the character code, are going to remove out the value there and take the character code and let's subtract 96. So refresh. So now we get 8x, 5121215 and negative 64, and that's the space actually, so we're going to have to handle that as well. So let's go into the numbers to letters, letters to numbers. So eight is h, e is five, L is 12. And that's what we're returning back here. So we're almost there that we're returning back the values of the letters as numbers. And we just need to be able to handle the dash 64. So that's a space. So let's create a holding array that we can use to hold the values as we're delivering the character codes. So just a blank array, we'll call it holder. And that's gonna be the array that we're going to return backward the strings that we're going to return back to the event listener. So now we're able to pick up the character codes and the character codes, every character we'll have a code. The reason we're going to lowercase is that we don't have a distinction between upper and lowercase. And we can use this type of calculation. So it makes it really simple to update the character codes. We don't have any distinction between upper and lowercase within the coded messages. So now we're returning back the caudate value. And let's also update that coded value and we're going to add it into holder. So using holder and the array method, push, we're going to push coded into that array and then output the array, output the array into the console. So let's see what happens. So now we've got the array of the coded letters and we need to update the 64 to be a space. So we can do that at this point or we can update that. So it's a number of places that we can update that. So if we end up with negative 64, then we know that this is just a space. So we can update that in here as well. So doing a quick condition to check, and we can also do a find and replace. Once we finish the loop, let's create a temporary variable. And using the content from holder, we're going to join it together. So another array method, and we're going to join it together with the dash. So I'll update holder to temp. And let's try that one more time. So we get the coded message, we get a bunch of dashes. And so we want to distinguish between the spaces between the words. So that would be taking out the dash, dash, 64 dash. And if we had updated this to be a space that we'd have dash, space, dash. And we still have to do a find and replace. And in order to fix that problem. So let's create another variable and we can call this temp one. And this is going to use the value from temp and do replace on the content that's contained within there. And what do we want to look for? We want to look for dash, dash, 64 dash, and replace that with just a space. So let's return back temp one. And we're almost there where we hit the coded message. We get the code for the words that are within the input area. So if I update that, I'm going to get a different returned coded value. And we need to actually replace all the instances of it. We can replace this with a regular expression. So use the flag g for that. And so now it's going to be replacing all of the instances of the dash, dash, four dash with spaces. So it doesn't matter how many we end up with. And let me just load a whole bunch more. We always replace the space and we've got a nice clean words with spaces in between that returning back the characters. So these can now be used in order to output on the screen. And then we can have those as deconstructing for the character codes. So we're actually ready to return back the content. So let's do a return of the content that we've just constructed. So it's returning temp one. So refresh returns temp one. So now we're ready to use that and output that to the user. So go ahead and update your code. You're going to be ready to move on to the next lesson. And if you want to find out more about regular expressions, there's a great website, reg XOR.com, and this website will show you more information about regular expressions. And then this is where you can also test your regular expressions. We are looking for the, the values of 64. So dash, dash, 64, dash. So that's what we've done here, where they've got the flag of G automatically. So whatever characters we're looking for, it's going to return them back within the regular expression. And you can try out various regular expressions on this website. So reg X R.com, excellent, excellent resource for constructing your regular expressions. And that's how I was able to pull out that dash, dash 64 dash from the string value and isolate that in order to replace it with the JavaScript code. 19. 4 Output Code t o Player: In the last lesson, we updated and are returning back a digit code for the word that we've got within the text area. So this lesson, we're going to output it on to the output area. And we are returning back the response from the add event listener. And the output of the content is gonna be really easy because we can just output the content like this and to an output of the content and set the output as text, content. And whatever's being returned back from the response. So whatever we update the content to, and then all those aren't real words. But it shows that it's gonna deliver all of the encoded content here above in the output area so that we can, the player can see it. And they might want to go through the letters and just kind of decipher it. So let's set up a way for the player to be able to see the way to decipher this, what each one of the character values is going to be worth. So we're going to add that as well. So create another element to the page. And this will just be output one. This will be another div. And for this div, we're going to append it at the bottom. Output one. And this is going to run whenever the page loads, whenever the document is ready. And we'll create a function called INET. And it's going to allow us the same thing that we looked up in the last lesson, where we have the numbers to letters and we're gonna output that on the page for the player. So adding to the document addEventListener. And this is going to be actually a fairly long one. And I'm going to update this to be loading on the window object so you can load it on the document object are on the window law object. And what we're listening for is DOM content loaded. So it's fairly long. And the event that we want to fire off as the ion IT function. So launched that whatever the DOM content is loaded and you can use this. It's very similar to what we have, what jQuery when we have the document ready. So this just means that the DOM content is loaded, so it fires off when the initial HTML document is completely loaded and parsed without waiting for style sheets, images, sub-frames, and so on to load. So basically whenever you're ready and ready and able to write to the DOM, than you can launch the DOM content loaded. And within the eye NIT for now we'll just console logging the value of ready. So you can see it in action. Refresh. It looks like we're ready to go. So let's go back into the ion IT function and creating a loop, a for-loop. So letting the value of i equals 0 and we're going to loop through while i is less than 26 and increment i plus one. So initially, let's output that into the console. Or we want to output within the console. And we could actually even make it a whole lot easier. So we could start at the character 97 and loop through all the way. Because a is going to be 97. We're going to be looping through. So the value of i and then whatever the associated value is. And this is gonna loop all the way to 123. So setting up of value that we want to return back the character code. And this is using a string method. And the method is from character code. And it's gonna return back the string value of the character code of i. We've got i and vowed that we're going to log into the console and let's see what this looks like. So now we've got all of the associated values along with their character codes. And we're ready to create a key area for the user to decipher this character code content. So let's output that and we're going to add that to the output area. So let's append the content of output. We can also just build that as a string value and then append it afterwards within the ion IT. So let's do that. And then afterwards we're gonna take that output and set the inner HTML value of it to whatever the value is that we're building. So let's create a variable. I'll just call it HTML. And right now just be blank. So as we update and add to HTML, we're going to add in the letter. Now using back ticks. So the template literals, and those are the little back ticks to, on most keyboards, just to the left of the one key. And that allows me to break in and out of the string value using the dollar sign and the curly brackets. So value and then equals whatever the value of I s. So we are creating the HTML that way and space. And then lastly, let's update the output one or inner HTML, so refresh. So we've got the way to D scramble this, and actually we need to associate the number. So we need to subtract it and have this associated with 96 instead of 97. So we need to take the value of i minus 96. So refresh. So now one is equal to a, b is equal to two and so on. Also, if you like it the other way, we can reverse the numbers and have it equal to whatever the string values or the character value is. So you could do it this way as well. You can remove out the spaces if that's easier to read. So there's a number of options, however you want to display it. This is just for the character heat. And also I wanted to update some of the style properties of output one. So I want to make it fairly small. So let's update the style of it and update the font size. And setting the font size to be 0.6 and 0.06 EM. So suit, that looks like. So now it's nice and small, so it's not bad intrusive. People don't need to see it if they don't want to see it. And also output one style. Let's set the background color for it. And that should actually have a hash, although it's not a color. So there we go. So I'll also let me do a quick bit of potting for that as well. And you can apply your own styling as needed. So it's also easier, of course, to do it within the stylesheets, but we do want to focus as much as possible on the JavaScript. Now we've got the deciphering key down here at the bottom. And we've got the ability to create the coded message at the top. And also did want to work through another way to do our return of the content. And that's coming up in the next lesson, we're gonna be using the map method in order to return the contents. So it's going to clean up this code a little bit. 20. 5 Array Map Shorten Code: This could be a quick lesson. It's just going to illustrate another way to make the output. So a little bit shorter method. And you can stick with the original one or you can try the new one. I'll call this make output two. It's going to have the same thing where it's going to expect the value being returned. And I'll just do a quick updates to be make output one or two. So it's up to you which one you want to use. And again, this is going to be a shorter format. So let's first construct our variable. And we're going to take whatever is sent him from Val and using the split of it, turn it into an array. So let's console.log what we've got for temp right now and go back and refresh, clear the console. And we can see that now we're returning back. And of course we're still getting undefined here because we're not returning back anything yet within the new function. So now we've split that entire string value into an array. And you can see if I have multiple words, it's just going to be a longer array. So basically it's taking all of the characters, turning it into an array. And we need an array in order to work with array method not so that's why we're doing the split on it. So let's create another variable. And I'll call this temp one. And then what we're gonna do in this one is we're going to return back. So using that newly constructed array called temp that we've just created. And then the map method, we're going to take the value of the letter. So just call LTR for short for letter. And using a function. So it's expecting a return of a function. So it's going to loop through all of the items within the array, and then we have an opportunity to do something with those items. So this is where we can take the letters and I'll console log those out as well. So just so we can see that we're looping through LTR. And then we'll console log temp one. I'll get rid of some of these other console messages as it's might be leading to some confusion within the console. So that's where debugging gotta keep those to a minimal. So we've got stuck Hello, space, world. So we're outputting all of the characters are still getting undefined here. So within the new array, it's all defined. Within the new temporary, it's undefined. So let's update that where we're going to just simply return back the content that's passed in from the first array. So basically it's going to construct a new array that's gonna look exactly like the first original array. So we don't actually want that. We want to do something different to that content. And that's going to be the exact same thing we did over here. So let's take that and update the value as who are returning it with the character codes to the lowercase. So now we've got the same thing that we had originally, where we've got an array. We've got all of the characters codes in there. And we can take the value of temp one and we can join it, we can replace it, and then we can return it. So let's do that. And we also are going to need temp two. Actually this is going to be a bunch of attempts. So temp three is going to take the value of temp two, temp three, and we're going to be returning back temp three. So I had to make some updates there. But relatively the same idea, same concept. It's going to be a little bit shorter. And holder is not defined because we need to use temp one, it's not holder. So let's see what happens. Refresh. And so now we're returning back that same character code that we were doing earlier. Let's also make this a bit shorter so we can do a whole split on it and get rid of that so we can do it all within one statement. And then also for the temp one, let's do a join of the temp and we can also merge these together. So now we're just getting temp one and we're going to have it within two lines of code. So do a refresh, create the message, make sure it's working and it looks like it is. So that's allowed us to shorten quite a bit of the coding that we were doing in the other function. And really simplify what we're returning on what our output is. And you can even simplify it one step further by simply doing a return and getting rid of that second variable. So we only have to creat the one tested out, make sure it's working and you're ready to move on to the next lesson. If you want to find out more about the array methods. So we'll add the Mozilla Developer Network. So what the map method does, it creates a new array populated with the results of calling a provided function for every element in the array. So same idea of what we did, except here they're just passing in numbers. They're multiplying the numbers and they're returning those values using the map method. And they've also got the shorter format for the arrow function. So we can update that because we're just simply returning that back. We can just do an update of it and get rid of the quotes brackets as well. So that will once again, that will simplify it. I'll leave it as is, but it's up to you if you want to even simplify it even further. And then it's just outputting the content in the console. And now you can see here it's multiplied each one of the array values by two and returned it back, constructing a new array from the original array values. They've got more information here about how that works. And as well as some more examples. 21. 6 Make it into a Game: Okay, so now that we can make coded messages with the numbers and then return them back to the letters. We've got a decoding key down here at the bottom. We're going to turn this project into a game. So the objective of the game is that you're going to be presented with a string of characters, of digits. And then you have to unscramble what the hidden message is. And that's going to be the objective of the game. So we need to add in a start button and then also hide some of the elements. And we're gonna get rid of the text area and a few other updates to the code in order to make it again. So in this game as well, we're going to have a timer. So the objective is to solve the puzzle, puzzle as quickly as possible. So let's add in the timer in this lesson. So going into the HTML, we can add in with HTML tags, but of course, we want to do this with JavaScript. So let's go ahead and create another object that we're going to hold our time. Counter in. This is documents, create elements. And the element that we're going to create a div. And then within this div, we're going to have the minutes and seconds. So we're going to create a couple of spans and attach the minutes counter. And actually let me spell that as counter. So I'll update the name of the variable and doing a document create elements. And we're gonna create coupled spins. So the first span is going to be the minutes and the second span is going to be the seconds. So going in and creating a seconds counter. So we're going to have this at the top, and we're going to add all of these. So we're going to have the minutes and the seconds into the time counter. And then we're also going to append it to the top of the page. So let's do that first where we've got the game area and using append, let's add in the counter object. So it's the time counter object that we just created with the const and add it to the top of the page. And then we're also going to be updating the time counter to hold the minutes and seconds. So appending those. And we wanna do the minutes. So the minutes counter object that we just created and append that. And then we're also going to be appending it with the seconds counter. So that should give us all of the objects, the shell of the objects that we need. Let's do a quick inspect on the code. So in the game area here at the top, we've got the minutes and the seconds. And this is where we're going to apply the code to make it look more like a clock between the spans. Let's add in a semicolon. So open up the code and where we're appending the time counter. We're going to also append. And we're gonna do this within one statement. So creating a text node, so using the document object and the same way that we've been creating the elements, we can also create a text node. And then what we want to be within the text node, and choose a spot to have the colon in the middle there. So let's refresh. And now we've got the colon between the spans and we're ready to update the spans with some code in order to make the counter. So going back into the code, and before we at any interactions, let's set up a game values. And I'm going to create an object, just call it game. So within this object, we can contain all of the game value. So we're going to be adjusting. So let's create one and we'll call it total seconds. And set this value to be 0. And then going into the game, once we start the game, we're going to launch an interval. So within the game. And I'll just call it inter. And this is just going to be a regular blank object. And then will we start the ion IIT? Let's create the counter for that. And I got to place a value, assign a value for inter, So as a global value, so we always have access to it. And a lot of times when you are creating games, it's good to have a lot of global variables so that you don't have to call them within the functions. And that's one way that you can achieve access to all of the variables that you're using. So let's set up the and set interval. And the interval that we're gonna be setting and the function that we're going to be running in, we can just call this timer or whatever we want to call it, set a timer and let this run every second. So now the interval is going to be running. Let's create the function in order to handle the set timer. And within this function would take the game total seconds. And we're going to increment it by one. And now let's apply the values into the counter. So where we just created the minutes counter and the seconds counter, we're going to update the inner HTML with the new values. So innerHTML. And equal that to be game, total seconds. And whatever the remainder of divided by 60 is. So we're using the modulus which returns back a remainder of 60. So it's going to divide game total seconds and divide it by 60. So whatever the remainder is, that's what it's going to output for the minutes. And then we also want to update the seconds. Actually this should be seconds and the minutes is going to be. Divided by 60 for the total. So let's do a quick update of that. And that's actually should be seconds because when we divide it by 60, it's going to show whatever the total seconds is that's left. And next, let's handle the minutes. So we want to divide it by 60, and then this will show the total number of minutes. And now that we've set the interval, so we should have a count happening. So looking at this, the seconds are okay except we're not adding a 0 in front of that. So it's only going to be two characters. And then the minutes, they're way off. So it's got the decimal place. So we need to handle that and get rid of the minutes decimal place. So we can do this with math ceiling. Let's see what that looks like. Or actually it should be math floor. So Math Floor brings it down to the nearest full number. So now it's 0 and we've got the seconds. Let's create a function to add in the extra 0. So we also need that for the minutes as well. So let's create a function. And we can call it pad number. And then whatever value we're passing in to the padding of the number. So we're gonna take that value. And let's create value as a string. So take.val and we'll add to it. So turning it into a string, so just a blank character. And then using the string method, this gives us access to the string methods. And with the string method, we can take the length of the string and check to see if it's less than negative two. And if it is, then we return back the value. So we add in a 0 in front of it. And then whatever the value, string value was. And else we just return back the number. So we return back whatever the value string is. So let's wrap both of those values before we output them with padded number. I'll see what happens. And then also in the console, let's output the value of total seconds so that we can see what our total seconds is and then what the value of the minutes and the seconds are. Because that's what's going to be important for the player. And let me check what happened there. And it should be game total seconds. So refresh, and we're outputting the content as seconds, but we're also running it within the console. So now we've got more of a game feel. We need to still add in a start button to start the game. Provide some scrambled messages, so some random messages that we can scramble and also provide a place for the user to input the solution. And we're gonna do it character by character. So there's a number of ways to handle this. And coming up, we're going to show you all of this in order to turn it into a game. So go ahead and add the timer. And the timer is also really useful in a number of game formats. So this is a really useful function to have so that you have the gameplay within games that you built. 22. 7 Setup Game Start: So let's continue to turn our project into a game. So what we need is a start button that's going to kick things off. And that's what we're going to clean up some of the code that we've been using in order to better construct and focus on creating the gameplay. So let's get rid of some of the extra that we have. So getting rid of some of the extra functions that we need. And we don't any longer as well need the text area. So we can get rid of that. We can get rid of some of the other text areas that we've been appending to the screen. So we're gonna keep the counter because that's part of the gameplay. And we won't need the button either. That's going to kick things off. So we can actually transform that button into a start button. So let's do that where we've got the button, routing it to the page. And this button is going to be start again. So we're making some updates to the code. We'll keep that output one. So this was displaying the key to solve the solution. Also, keep the button to display as a block. I'm going to update the user input, so we'll get rid of that. And also for the game object, we're going to need a list of values. So let's create some words. We can call it game words. So we need an array or game words, and we need an array with a bunch of words. So let's do hello world. And you can add in as many messages as you want. And so there we go. So we got three messages there that we can use within the game. Will also add the keep the event listener there. So this doesn't need to start the counter, but we, what we want. So this will keep the event listener because this is loading in output one content. But we don't need to start the interval. And we're going to reserve the interval part to where we've got the click of the button. So this is going to start the timer where we start the game. And it will also update some of those values. And I'm going to move the timer content to the bottom. Since that's already complete, we don't need to make any updates to that. So that's all the time or stuff that had moved to the bottom. We don't need to track the console messages of that either. And all of the timer stuff is going to be set up down here. So that includes the ion IT to output the decoder area. So now we've added an EventListener. We started the timer. And so whatever the button is clicked. So let's update the button style and display none. So we'll hide the button, so that will prevent the user from continuously clicking the button. We need to create our output. So this is something that we're gonna pick randomly. So we no longer have the user input value, but we're going to pick this randomly from the array of values, from the array of words. So let's make that selection from that array of words and pull that information out. So taking the game word's array, and let's do a random sort of it. So again, word's array. And what we'll do to it, we'll do a sort of the array. And this is going to be whatever the game value is. So whatever the first value is, the index. So we'll pull that out. And then the phrase that we're sending over to the output is going to be the myFreqs. So let's see what happens. So refresh. And we did throw an error there. So we're still got the user input that we're looking for within the function. And we can get rid of that because we don't need it to add it to the screen anymore, do another refresh. So we've got the option to start the game. So once we start the game, we're presented with a phrase. So this is randomly, or it's actually sorted from the available word phrases. So secret message. So we have to unscramble this and the first word, first letter is B, next as e, then S, then T. So best. And then the rest of it we can unscramble as well. So we want to actually have this coming from random because what's happened where we've sorted the phrase, where we sorted the game words. And we can output this into the console. So I don't always want the same order. Because if I memorize the available words, then it's always going to be the same order within the JavaScript. And this is where you can use the math random in order to sort an array. Arrays come with the sort method that's attached to it and allows you to sort elements in place. So it keeps the same array of values, but it just sorts them by alphabetically. And it also converts elements into strings. So if you do have numbers, it's going to convert them into strings. And that's why you're going to get this type of sort order where you've got 102,134. But all of the values that we're dealing with are all going to be string values. So we also have some parameters that we can add in to the sort function. So we can do a comparison. And it's expecting a function being returned back within the parameters. So let's add in a function within the sort. And I'll just take whatever the element is for this function will return back the element. So really it's not gonna do a whole lot. It's going to pass the element in. Well, we start the game and it's just going to provide the sort order for the game. And actually I'm not going to get rid of the button quite yet so that we can launch this sort a number of times and see what happens with the sorts. So refresh, start game, start game, start game. The problem is that we're still within that same sort order. So it's expecting a function that's going to return a value. And if we have the value as minus1, we can have a sort order. And there is some randomness to the sort order, but it's doing it every other value, so best game ever. And then it sorts it negatively or positively. So reverse sort order and it's toggling it back and forth. So we don't want that to happen because the negative one, that's what the negative one will do. How about we return a random either negative or positive? So using the 0.05. and then math random function, we're going to randomize the value that's going to be returned back in the sort. So it could be negative, it could be positive. We don't know, it's totally at random. So doing it that way will provide me random results here for the sort. So it's not always the same result. It's not toggling the result. So every time I start the game, I could potentially have a different value to start out with. And that's what we want in the game because we don't want the less predictability in the game, the better. So now we're ready to go back in. We'll remove out the start button again. And now we've got a random selection from the array of a word. And instead of just selecting that word, want to pull that word out. So out of the gain words, I just want to pick up the first phrase. And I'm going to use Shift method in order to pull out whatever's first in the array. So every time we loop through, it's going to change the number of items in the array until we end up with 0 items. So let's do a refresh. Once we've got gone through this and we've solved it, then we can move on to the next one. So now the array is going to have that first item removed. That's going to be what's displayed on the screen. And we're ready to move on to the next lesson, where we're going to be introducing more of the gameplay and the game interactions. So that's coming up next. 23. 8 Play the Game: So going back into the gameplay, usually what I determine is going to be next in the game. I tried to play through the game. So I've got a number of things showing in. Actually, I only want to have the start button showing. I don't want anything else showing, and I also want to align things, center, align things. So let's make a few updates to the style to make it look a little bit better, cleaner. So we're selecting the game area and we're going to center the game area content. So using text, align and align, center the content. So see what happens. So now the content is center all of the elements inside and also set the margin to be auto as well. So that will center align the content. And then for the game, or actually for the button element, we want to center the button. So this can be margin auto as well. So that will center the button. We might want to make it look more like a button. So let's apply some padding. So 15 picks and set a background color. And you can do all of this if you want to challenge, you can do all of this in JavaScript as well. And let's set a border radius so it's slightly rounded and update the font color to be white and text size. Let's set the text size. And then let's also set the font size so that it's fairly large to two M. So that looks like snow has got a big start game button. We want to hide the timer initially, as well as the solution heat. So let's go into that and update those and hide those off hand. So we can have for the solution for the output, one, style and display and set that to none. As we don't need to see that when we're just starting out with the game. And also maybe for the output area. We might want to have some content there that says something like output text, content. Press button to start the game. So is think of it from a perspective of a player coming in. They're not going to really know what to do at this point. So that's why we're setting all of the instructions as well. And I'm also going to hide the counter. So let's start and we get this message press button to start the game. We click the button, we get the code. We also should add in the timer back-in, so we should be able to see the timer again. So let's update the timer. And maybe we want to have a button that can toggle the key open and closed. So we'll add that in. This can open and close depending on what the button is pressed. And then we also might want to center this even more. So apply some styling with that. So going over to where we start the game. So that all happens within the click of the button where we're starting the game. So let's create a function actually is going to handle the game start. So this is actually really important function. And all of, most of what we have within that initial click button we want to add into the start of the game. And this will also give us a place to reset some of the gameplay. So we'll update some of the styling for these to make them look better. And just run the start game for now. And we'll shift some more of the stuff into the gameplay so we're starting the interval. So it's one of the things that we're doing. We're hiding the button. Whenever we start the game, we're picking out a word to use. I'm going to get rid of these console messages since we don't need them within the game. And we'll add some more in as needed as we do some debugging. So all of this stuff can be added into the start and game. So that will clean up quite a bit of what we had within the button press. And we could also just minimize this just to run the start game. If we have some other options that we want to set in here, we can keep the curly brackets, so it might not want the button necessarily to always disappear. When we bought start game, we might want to have some other options. So those types of things you can add in to that button click and then keep everything else within the start game. So now we're showing the timer work, showing the output area. So let's refresh start game. So we want to do here is we want to minimize some of this content. And we can add in a button in order to handle that if we want, or we could just have it something that we can click and it can minimize. And it can then also show the content that's there. So depending on what the button that's toggled. So let's go back in and update this. So where we've got output one, let's add in and we're going to add in another div within the output one. And this will be the solution key. And I'm going to just add that into the output one. So right now we're setting all of this stuff and that's and also within the output one style. We can also update this to add for using a class list. And then add a class. And let's create a class that we want to add in. So the class that we're going to add in is going to be the, I'll call it keys as this is going to provide the keys. So going into the CSS sheets, create keys, access pumped it with a z. And from here we can set things like the font size. And let's make it small. So 1.8 m will also set background color. And of course these things are easier to adjust if we are using styling. So sometimes it is a good idea to keep it with styling, so set it to light grey and then you can also change it as needed. So going back into the JavaScript, I'm going to get rid of all of this within the output. And I'm adding in just the class list into that. And then going back in. So we've got padding as well that we're adding ten pixels of padding. And maybe we want to set a width for that. So set up to 50%. And then also let's set margin auto. So that's gonna center thought. So it's not taken up as much space now. So it looks a little bit better there as a key. So I want to have a button that I can click on a link that I can click that's going to show it or hide it. So let's go back into the JavaScript and we created the container for the. So the solution key is going to be where the solution content is going to go. And then within the output one, we're going to also have clickable area that we're going to add into that that's going to hide and show. So toggled the content. Whenever the solution one. Whenever the output gets clicked, we're going to toggle the view for the key. So let's do that. So we're, we're updating output one added into the solution key. And then make the output one clickable area. So where we have the event listeners. Let's add an event listener. And the event listener that we're listening for is click. So if the element does get clicked, that we're going to launch the function. And within this function, we're just going to toggle the visible area. So let's have a value for keys, and this can be a Boolean value. So by default we're going to, by default we're going to show it. And if the user clicks it, that will hide the keys. And we can also do it the opposite as well. So maybe the default should be false and that way we can hide and show. So whenever it gets clicked, let's add some content to it. We're going to hide and show. And the element that we're hiding showing is the solution key. So depending on what the value four keys is. So if game keys, and so if it's true, then we're going to set game keys to false. And solution key style is gonna set to display none. And we want this to toggle whenever it gets pressed. So the toggle values are actually going to be the opposite, where we're going to set to true. And then also set to display block for the element. So that way we can toggle it on and off. Let's refresh, start game and we toggle it. Let's see what's happening here within the game object. And we're set to true, but it's not showing it. So let's go back and see what happened here. And we still need to add the solution key to the output one. So let's go down where we're appending and take the output one element and append the solution key object. So let's try that one more time. Go refresh, start game. So we've got the solution key and we're hiding, showing, hiding, showing. So let's make an update to that. Right now. I'm just laying it out into the console so we can see that this is toggling. So by default, it's starting out at none. So that's where we should set the default value for it. So solution key, display, none. Let's refresh. So right now we don't see anything. We click it, we can see the solution key, hide and show the solution key. And that way we can provide the solution key or we could show it, hide it depending on what we wanna do for the player. We can also get it to disappear out a certain game count. Because remember, we are counting how many seconds we are into the gameplay, and that's up here at the clock value. Also, before we conclude, I just want to make a quick style update to the clock counter. And let's set up the clock counter, some styling to it. Do font size. So wanna make it really large font size. So 3M for the font size, and then within the JavaScript for the clock counter. So where we've got the time counter, let's add in a class list. So for time counter, getClass list, we're adding in a class list. And the classes that we're adding, is this the one that we just set up? So let's see what that looks like. So now our counter should be quite a bit larger. And we've got the solution key that we can toggle and hide. So coming up next, we need to set up the inputs for the player to be able to input the values that are associated with the numbers here that we've got, the string value numbers that we're showing on the screen. And then we're going to have to check to see if all of the values are correct. And all of this is still coming up in the upcoming lessons. 24. 9 Player Inputs: Hey, this lesson, as we continue to build out the gameplay, we need to set up the option for having inputs from the player. So we need to create a series of inputs that are going to serve as a way to input the content. And we'll also spaced them out nicely as well. So let's set that up and that is going to be coming from whatever the length of this string is, how many inputs we're going to have to create. So going down to the input area, might want to even create a second div area. So let's take a quick look and see what we've got for spacing. And we've got this key div, we've got the display for the start game. We also have the output area. So we need another spot here that's just below this div where we can add in the input solutions. So let's create that with the JavaScript. And going into the output one, we're gonna create another one called output T2. So that will just be sitting right below it. That will be a div as well. And then for that output, this is where we're going to, how is all of the input. Now we're going to have from the player. So let's append output just after output one, output two. And for now, let's add in some content to output to update the text area or textContent. And I'll just write inputs. So this is where the player is going to be inputting the solution. And this actually should be above the other elements. So let's shift things around a bit. And we want the solution key right at the bottom. So now we've got the inputs area. We want to add in and read, create all the inputs that correspond with whatever the phrases, the phrases coming from the game words. So that's going to be a random phrase from the game words. And this is going to tell us how many characters long we have to create the inputs. So let's create a function and we'll call it Create inputs and pass in a value called my phrase. And this is going to create all the inputs on the page within that output to element. Let's create that function and create inputs and tossing of value. So this is the frieze word, and right now we'll just console log val. And because this is a string, we're gonna return back a length for the string. So it's going to allow us to create the inputs. So this one is 11 characters long. So we've got 12345 space 67891011, so 11 characters long. So we need 11 inputs in order for the user to be able to input characters in there. So let's generate that. And I'm going to use a for loop. So let's I equals 0 and we'll loop through while i is less than the values length. And then increment i plus one. So creating the loop. And we want to create separate inputs. And we can just call this whatever want, call it player input. And using document create elements, the element that we're creating is going to be an input player input. We need to set some properties for this. So if we want to set max length for the player input, we can also do this using the set attribute. So let's do it that way. We're going to set the attribute. And the attribute that we're setting is going to be the max length value. And the maxlength value is one. So we only want one character and also player input. We're going to use class list and add a class. And I'll call it invalid for the value. So going into styles, let's set up this class. And we want to be really small because we only want the one character. So let's do a width of 20 pics. We'll see how that looks. Go back to the JavaScript and add this to the page. So output, and I believe we have output to append and append the player input element to the screen. So let's see how that looks. So refresh start game. So now we've got all of the inputs. And we can also clear out the input. And if the character is just a blank space that we just want to register the space for it. We don't want to have the option for the player to be able to input characters into it. And I also want to Center the content in the. So do a text align center. And we'll do a check to see if the value of i is equal to blank. So if it says blank space, then what we wanna do is we want to accept player input. So maybe we'll set it to disabled. Disabled and set that to true so that the player can't enter in anything into there. So whenever someone enters in, that we want to move that over to the next input, the focus, so that way they can type fairly easily. And also, we want to register the key presses on the inputs and check to see if it's correct. The solution is correct. So go down. And elsewhere, generating the player input. We can add an event listener. And the event listener will be key. Press and register the event. So let's check to see if the so what will console log out, whatever the event object is. Because we want to also track those event. So we're getting a key of i. So it's the code that we're registering and we're also getting the key code as well. So that's an interesting one that we can use within our calculations as we've been deconstructing the key codes previously. So let's take in the key value and we'll output that into the console. So whatever the key. So refresh, start game, I'm gonna get rid of that word inputs. So now we're getting the key values. And let's get rid of the word inputs because we don't need to show that anymore. So right now that is not doing a whole lot. That was just as we're developing so we can see where that's gonna be located. So whenever the keypress is there, let's do a check to see if the key value is equal to whatever the value of I is. And if it is, then we're going to update the player input and style border color. And let's set the border color to green. And if it's not right, then we're gonna set the border color to red. So the players immediately going to get some type of input there that either it's right or wrong. So start game. And for some reason it's not registering it properly. And that's because let's logout whatever the key value is. So see why it's not registering it properly. So start game. So it should be a B. And notice that is uppercase, so there's a distinction between upper and lowercase. So we might want to translate, lead all of these into uppercase. So let's do a two uppercase method. And then we'll also do the uppercase method. And let's take the player input value and update it with the player input value to uppercase. And I'm going to add in on the key down, that's going to transform it into the uppercase. So taking the key down, so right away it just going to take that character and it's going to upper case the value. And we can also get the value again from the key code. So from the event object, let's just transform it into uppercase right away. So whenever we select on it, so whenever we lose focus. So take that player input addEventListener. So whenever the focus is attached to the element, if it's incorrect. So if the border color is going to be a red, then we're going to clear it. So check if border color is red and actually we're going to update it and just set a variable there. So player input guess and we'll set that to true. And otherwise the player guess will be false. And then by default, the player and guess will be false. So that will save us a little bit of coding there that we can just check on the player guess. And so relying on the colors. So wherever the focus is applied, if the player guess is false, then we're going to clear whatever the input value is. So let's try that and just making it a little bit more user friendly. So let's do a wrong character. So now whatever I focus on it, it's going to keep the correct ones. And if I get a wrong character, it will remove out the wrong character. So even to make it a little bit more playable, I wanted to be able to move the focus to the next input once the player types something. That's come up in the next lesson, we're going to continue to do some tweaks and adjustments to the gameplay. And then of course, we still need a check to see if the characters entered are correct. So that's all still yet to come in upcoming lessons. 25. 10 Gameplay tweaks: So on key up, I wanna be able to move to the next element. So once we keep up, I wanted automatically to move to the next input. So let's create that within the JavaScript code. And we can do this on a key up event. So we've got the key press and whatever the key up, we want to move it over to the next available element. And also keep in mind that we do have some blank ones. So those are just disabled ones. So we want to skip those as well. So let's try it first and select the next sibling. So because they are all created in all in a row, we can just move to the next available sibling. So taking the E target and then the next element sibling, and I'll set a value to that. So we'll output that for now into the console. And I'll just call it tau one and will output the next element sibling into the console, so val one. And we're just going to have to do some traversing through of the elements. So the next one and do need to select that, select the focus on that. So it's take val one and apply focus to it. So JavaScript to focus on the element. So once again, start game. So we have to also make sure that it's not null. So some of the elements could be null. So we need to check to see if next is null or if the next one is disabled. And then we need to move it to the following one. And if it is disabled, then we just need to check to see if there's another available one. So let's try that and where we've got the next available element. And have a condition to check if val one and if L one is not equal to null or vowel one, disabled is not equal to true. And if that's the case, then we can apply the focus on it. And otherwise, we're not going to apply the focus on it. We can also have a separate condition to see if it's val one is disabled. And if it is, then we can move to the next available one because we know that if it's disabled, then that means that there is another one that's available. So how about we check for that first and check to see if val one disabled equals true. And if it is, then we're just going to move to the next available sibling. So take val one and select the next available sibling. And set that as a val one instead. So it will just skip that one. And if val one equals is not null, then we're going to apply the focus to that. So let's see how that works and hopefully that works a little bit better. So start game. So I'm typing a little bit quick there, so, and it's also not moving over because of the null, but it did skip the spaces. So let's try that. And we can actually get rid of this key press. So we can do this and handle this on the key down, where we'll update the color and get rid of this key press as it might be interfering and might be running too many events. And right now cannot read property disabled of null. So we should be skipping that if it's disabled, checking to see if it's disabled, if it's null. So first we'll check to see if val is not null. So we're going to wrap that with the disabled. And if it's not disabled. So making sure that it's not null. If it is, then we just skip it. The auction. If it is not null, but if it's disabled, then we're gonna move to the next sibling. And then once we're, we're going to set the focus to. So let's try that now. So try that one more time. So I think I'm typing rather quickly and it's not picking it up. So do a quick refresh on the code up and we're picking up the backspace. So we don't want to pick up any additional characters there. So it does look like I'm able to pick up backspace and other characters because we're tracking on the key code. So let's update this. And this is because we've got the key down and we're changing the key to uppercase, and that's what we're setting the value. So let's do a Boolean value and return that. And using the regex test, we're going to test to see what the value of a0 c0 is. So let's console log this first and then we're going to put it into the condition and the regular expression that we're going to create. So the regular expression that we're going to be using to test is going to check for all the characters. So looking for a to Z as well as lowercase a to C. So it's the regular expression and we're going to be running a test with that regular expression on the result of the E key. And if this comes back true, that we know that this is a character that we can update to uppercase. Let's add in the test method and to try to start the game. So came back true. If I go back space, it's also coming back true. And numbers are false. So we need to also account for the length of it as well. So we wanna make sure that the length as well is one character. So that's another way that we can test. So we'll add in the condition. And if regex, if this test is true. 26. 11 Game Win Check: This lesson, we need to complete some tweaks on the gameplay and check to see if we have a winner. So that means that if all of the letters are filled in and they're correct, then we can launch the winner. And then we're also going to make some styling updates as well to the gameplay. So that means that the game is over and they could launch into the next phrase if they want hiding, showing the key codes, we're going to also update some of the styling on that as well. So let's initiate and go back into the game. And whenever we added in a new character, this is the time when we can check for if the game is won. This is where we can, we can check. Winner will just launch a function to constantly check for the winner of the game and creating that function. So what this function is gonna do is it's going to check the winner and run through all of the available code. So let's select all of the elements. So we'll just select all of the element inputs. And using, because we've attached them all to the player input, that they're all sitting in. Output two. Let's select that and then use query selector all and return back all of the input elements. And for now we'll just do a console log of all of the element inputs. And we're gonna get the values of those inputs. We're going to loop through that, get the values of the inputs. So let's see what happens. Got all of the inputs, they're all listed. You can have also, as we're constructing and adding them to the page, we can add them in us, an array. So either way will work. So we can add them in as a golf global object. So there's two ways to make those selections. So element inputs for each. Let's loop through the element. And we'll also get the index value in case we need the index value. And as we loop through, we're going to console.log each one of the element values. So let's see how that works. So start. And so right now we've just got the H hello. So let's go back in and let's construct an array with just the element names. So creating that. So holder a blank array each time. And then as we loop through, let's take holder and we're going to push, we're gonna push the element value into the array. And then afterwards, just as we've done before, we're going to take the, so add it to the holder array. And let's create another variable. And take the holder array and join it together. And just with a blank. And then we'll console log out the values of val one. So this shouldn't be returning back a string value. So now we've got Hello. And we are missing the space there. So that's one of the things that we do need to add in as a space. So let's go back in and check to see if the value of it is a space. And we don't need to take the element value because we're constructing them and we can pass the actual input value within the player input area. So let's add that in. So player input, and this is going to be the actual value we need to assign to it. So let's set up a variable for that, and I'll just call it player input v. So because the player input is an object, so even though it's an element on the page is treated as an object. And we can always return back whatever that character, that original character is that we're placing. So instead of element value, we can return back the element v. So start the game. And that allows us to create the space and update the space instead of pushing through the value. And if we join it with just nothing, we should start to build up the string value, the complete string value. So taking into consideration the spaces, now, let's handle this and check to see if it's a space. So if so, let's do a ternary operator and we'll call this val2. And that condition is going to be if E v is equal to a space, then what we do is we keep the EV as a space. Otherwise, we're going to use whatever the element value is, whatever the users placed in. And instead of passing will pass in the value of val T2. So this should give us a more accurate picture, as well as include the spaces into the final result. So we can see that we can now compare the final result. And we just want to transform it also to lowercase as well. So let's change it to lowercase so that we can check to see a match. And going back into where we've got the original game, freeze. Let's update that to the game phrase so that we can access it globally. And do a quick update here so that we can do a check to see if there's a winner. So the game phrase is just going to be just a blank string right now. And that way we can use the phrase as an object. And whenever we pick it up and we can access it globally. So that's one of the nice things about being able to set up one object that's controlling all the game variables, that we can access this as well. So this is the original game phrase. And whenever we do the check winner, let's set this to val for I'm just creating some variables here and it's going to have the game phrase. So let's see if there's a match. And we probably have to do this to lowercase as well. So let's see what happens. So start game. So now we should have a match. We've got both of those values being output. And if they are matching, then we have a winner. So if the val one is equal to val for, then it's actually going to be game over. So well console log and writes game over. So come up next where do some testing and some tweaks and adjustments to the gameplay. But so far, we've got the ability to check to see if it's a winner and running the game over function. And then that should trigger the Start button again and have the player collect to the next phrase. So that's coming up next, we're going to do, doing some final bug fixes, tweaks and adjustments to the code in order to improve the gameplay. 27. 12 Final Game Tweaks: So let's play through the game and makes sure that the game is functioning as needed. And then we're going to update the styling. So right now, we can still solve the puzzle, but we don't have the option for checking and showing that the game is solved. So we need to kick off a loop and I'm going to actually update some of the values here so that this is of course in testing mode. So we don't want to be typing in such long words. So let me minimize that array and I'm going to just have one word answers. So I'll pick one of those random phrases instead, these longer ones. So a lot easier for me to just kinda quickly run through and test it. I'm also going to get rid of the additional console messages. So do a quick find. So anywhere it we've got the console logs. I gotta be replacing them. So replace on all of them. So we're not gonna have any more console messages. And I usually do this for debugging. So now we should be running game check to see if we've won. So we've got that check winner. We're outputting into the console that it's game over. Let's create a function. So end game. So this is the function that's going to end the game. So what do we want to do here? We want to stop the interval count. So let's select the interval and stop the interval count. So run clear interval and selecting the inter bolt by name. So that was game inter. So that's going to be our game interval. So by doing that, this is going to clear the game interval. So that stops the timer. So the count stays. Hows is we've got game over. Let's refresh. We need to initiate and show the start button as well. So btn set the display to block so that we see the Start button again. And this will give the user the opportunity to start again. Oops, tipped a little bit faster. So now we've got the start button showing. We can get rid of the inputs there and just show the solution. And let's actually move the start button down a little bit on the screen. So we've got the button and I'm gonna place it above there. And we also want to hide the keys. So let's do that as well. So we've got the output one. So we're going to display none on that. And a lot of this is just some fine tuning on how you want your game to look. So try that one more time. So we got the game, we solved it back to the start button. And that's our time. So we hit Start Game and we should actually be clearing out all of those inputs. So that's one of the things that we need to do whenever we are constructing them. So we're creating the inputs. We need to clear them all off of the screen. And because we've got them within that one div, it's going to be really easy to clear it. So take output two and update its inner HTML and just make it blank. So it's going to get rid of all of the outputs. So start game, start game. And we should set focus on the first input. So let's do that as well. So on the first one. So once we create the input, will check to see if i is equal to 0. And if it is, then that's where we're going to put the player input and apply focus using JavaScript. And I've shown you gotta wait till we've got it on the screen. So as we loop through adding all the event listeners, so on. And if it is the first one that we're just going to apply the focus to it. So start game. Hit Start Game again. Hit start game again, and hit start game again. And this time we've got a length of 0. So really it's game over. So as before we go through and we create the elements, we need to make sure that the length is the length of the game words so that it's not less than 0. So we need to update that as well. So let's do a quick check on game words and makes sure that the length of game words is greater than 0. Otherwise, we need to put an output message to the player. And let's update the output. One area, text content and say, so just straight, there are no more phrases. So start the game. And it should be actually game words length. So refresh, start the game. And it should just be greater than 0. So that's what we're still throwing an error. So start the game. So now when we do start the game, we lose the button. We're not running anything or not outputting anything that's visible. So need to update and output. Update the output to be display block. And we don't actually need the counter. So let's get rid of the counter as well. And also want to take the opportunity to update some of the counter values. Just before we're starting out that the textContent is going to be equal to 00. And as well the textContent of the seconds should be equal to 00. So we're always starting out at a 0-0 for the counter. And then whenever we're starting the game, we need to reset the counter back to 0-0. So let's add that into when we start the game. And also take the game. We're going to set the game total seconds to be 0, so that the counter always resets and restarts. So let's see how that works. So one, reset on the counter, two seconds, reset on the counter, and one reset on the counter. There are no more phrases, so we're updating the wrong spot. I need to update this character code area. So let's update that one instead. So update the output area. And also we can keep the output one to be hidden because we don't need to show that because there's no gameplay happening here. So try that again. Now. So it's happening in the console. So there's no more phrases. We need to also clear out that input area. So let's update output two. And we can just write game over or something like that in there. And we should also still be hiding the timer. So the Timer should not be showing either. So let's hide the timer. We don't need to show that. So display none. So let's see what happens. Start game. And we shall need to update the button as well. So every time we restart the button, every time it's end game and we're showing the button. Let's take that button and update the text content to say or new game. So the restart, Start Game. New game. There are no more phrases game over, so the game is now complete. So coming up next, we'll do some final styling and tweaks to the game and adjustments. 28. 13 Numbers to Letters Game Conclusion: In this lesson is going to be the final lesson in the conclusion of the numbers to letters in-game. And here we're going to be making some updates, so some styling updates and just overall some gameplay updates, layout updates. And a lot of this is subjective. You might want to make your own changes to the game. And the main thing is that we've gotten to the point where the game is working properly or as expected. And now we can conclude the game and put the finishing touches on it. So we come into the game, we've got instructions, press button to start the game and a big start game button. So let's click the button, see what happens. We get a count down or account timer. We've also got some character codes here, and we need to resolve these to be the same as we have for input. So let's update this to match the same width as the inputs. So going into the styles where we've got the input, we've got the width of 20. So it's comma separated out and create another one called box. And just as we've constructed it, where we've got the make output, we're adding it to the output tax content. We're going to get rid of the output tech textContent. And we're going to create a loop through of the content that's contained within the game phrase, and then just add that to the output. So there's a number of ways that we can do this. And we can create a dissimilar as we've got the inputs. So let's, let's do this and call it create boxes. So it's going to create all of the boxes according to whatever the final freeze output is. Instead of outputting it as rep. We're going to get the function to do all of the work for us. And we're just passing the value into the function. So first off, let's start by doing the same thing where we've got the length and we need to create an element. And this element that we're creating, so it doesn't have to be an input. It's can be a span. And we can call it the same thing because these are separate functions. So within the player input, and we don't have to call it player input. We could call it game input. And for the game input, we're going to use the class list and add a class of box to that, solving the box class. And then lastly, I'll take the output and append the game input to the output area. So let's see what happens. So refresh, start game. So we're not getting any output there which has got press a button to start the game. So we want to first clear out the output. So just as very similar to what we did with the creating the inputs. So output, clear that. And for the game input, let's apply some text content. And the content is going to be whatever. We've got four val with the index value of i. So try that one more time. Start game. And we're going to get these to behave like in-line blocks. And we also have to have spaces and boxes around the elements so that we can distinguish between them. So let's go into here and update box and do a display inline block. And let's add some border and see how that looks. So refresh start. So because it's in a string value, we need to split it and create an array out of it. Let's create an array. So using a val one, we're going to take whatever the value of val is and split it, split it by the dashes. So that's going to create an array. And that way we can use val one array for the different characters and also update that to val one. So see how that looks. So refresh, start game. So now the numbers are in the appropriate boxes. I'm also going to be updating. So let's add in and back to our key phrases so that we can test up accordingly to the content. So update the game words. You can comment-out that testing. Alright, so start game. So it doesn't really look quite right. So we've got the nine, the 1215. So these are both on different lines, quite right within this. So we need to still split on spaces as well. And the reason this is happening is that we're, we're constructing when we're creating the return value, as we're creating the output, we were removing out the space. So if we want, we can handle this and we can create a dash space including the word space. And then look for this as a needle as we're constructing the input, the game elements. So when we're creating the boxes, we can check to see if the word space is there and let's make a quick update to it. So creating ternary operator using val two, we're going to check valve one with the index value of i and check to see if its value is equal to space. And if it is, then we're just going to add in a space, that actual space. Otherwise, we're good to go with whatever the vowel i value is. And that way we can update the game input value with the vowel to. Let's try that out. So now it should be adding in those spaces. And it's, we need to make, apply some styling to the elements to make them a little bit wider. So going into where we've got the box and I'm going to just simply remove it from there because none of this stuff is really in line. We need to update the width. Let's try setting it to 24 picks. So adding a little bit extra and then as well padding. So the inputs have some default styling. So that's where we need to make some accommodations. Our existing one to see if we can get it working looking the same. So now we have it looking the same. And actually I don't like tap the box effect to the numbers. So that's because we want to have the inputs are the only ones with the box. So we maybe get rid of the border and see how that goes. So see if that looks any better. And because we got rid of the border, we need to add in some additional width to it. So let's set up that 26 picks for width. And now we've got it exactly right. So we've got the input value and just below. So we can now align the text phrase with what we have on top. And once we solve it, then we get the new game button. That counter stops. So everything is working, although we need to add in some spacing for the button. So the button is very close to what we have within the JavaScript input area. So we can either select for the keys, we can select the button and add some padding on the top of that. Let's do that within the styling. So for the button, or we're going to add in margin. Talk for the margin. And let's do 20 pixels. So that will create some spacing. And I'm also once again, I'm going to go back to our default shorter game values. So default shorter at game words, so that it's a lot easier to play through now that I know that the phrases are lining up proper, properly. So the new button. So we didn't get the styling applied to it. Auto only two left and right at 20 picks two top and bottom. So let's do it that way because we're using the shorthand. So now we have some spacing between the button and you also want to have some spacing for the keys area. So that to me is very close. So we've got margin and the same thing here where we're centering it. So let's add a margin, top and bottom. And that opens up the keys. So might even want to make this a little bit smaller or update the font color of keys. And we'll make the font color white. Let's apply some more spacing between them. So it's a little bit easier to read. So as we're generating the keys object when we start the game. And that was way down here at the bottom. We're updating the HTML. Let's add in some more spacing. And maybe we want to add in some brackets. So again, it's up to you how you want to style this. So once you have the game working as you want, run through it a bunch of times, makes sure that you can test it to see if it's working the way that you're expecting. Make any tweaks and adjustments as needed, and customize the game. So let's do a quick code review. So we started out by setting up the index page, linking to the stylesheet, creating a div to handle the game area. And linking to the app.js file applied some styling to make the game look better. And then with JavaScript, this is where all the interaction came from and all the dynamic content. So we set up a bunch of elements, create a bunch of elements for the page, set them up, pause the clock counter, customized What the elements style looks like. The ones that we've had to hide, we HOT, we hit pendant them to the page. So this can also of course be done with HTML, but we did want to focus on some JavaScript. So that's why this is rather long start to what we setup for the gameplay area. We needed some words to add into our gameplay. So now I can just switch it back to the initial freezes. As with the phrases that works a little bit better, the words are very easy. We are only using those for testing. We set up a global game object that we can connect to from any one of the functions as needed out at some event listeners. So it made sure that the DOM content is loaded. And then we ran the ion IT and the ion IT was just the setup of the Help key, that key code area. We also have the timer here at the bottom. And then the adjustment for the timer, because we want to have the values have to characters. So it's always going to be if it's 123456789, that they have a 0 in front of them. And that's the same thing for the minutes. And then we set up an event listener for toggle, the help section. So that was just the game cuz area. And we also set up an event listener for the button. So when you click the button, it hides the button, launches the start game. The start game resets some of the values. It checks to see if the words length is there or not. And if it's greater than 0, then we know that we've got more words in the game word's array. We pick out another random one, so we resort at randomly. We get whatever the first one is within the array. We create the inputs, and we also create the output content from the game phrase. And that just gets passed into next to create the boxes. So that this was all, again, visual stuff that we want to improve some of the gameplay. And if the, if we're out of words within the game words, then we hide the counter and we put out a message to the user that the words are hidden. We created the create boxes. So this was the visual area for the number values that the player has to solve. And we created a bunch of elements, spams again, so it looks nice and aligned. And then the main part of the game was the inputs, where we created the corresponding number of inputs for each one of the letters of the words. Updated some of the values, had some hidden values within the player input object that we used within the gameplay. Also set the spaces to be disabled and appended them to the output area, add an event listener. So this is the creating the interaction for the game, checking to see what keys are pressed. And if the key down is then we're checking to see if it's right or wrong. And we're also transferring them to uppercase. You don't have to do that, but we just did that as an exercise and to bring in some more JavaScript functionality. And again, to improve the game play when the key is up, then we automatically move the focus to the next sibling. We check to see if there is a next sibling. If there isn't or if it's disabled, then we take different auction. We don't move to the next sibling. And if it is disabled, then we skip the disabled one and we move to the next sibling. We add an event listener. So whenever it's on focus, we check to see the input. And if the player input, guess if there's no guests there than we just clear it. Also, if we have a value of i equals 0. So the first set of inputs that we're creating. So the first input, if the array is 0, that we automatically set the start focus on the first element, the first input element. We have a function to check the winner. So that basically checks both of the phrases. We use the to lowercase so that it's not going to be so that it's not case sensitive. So it doesn't matter what case the letters are. And again, because we're visually displaying the letters as uppercase to the player. And then we also have a small end game function. So if both of the content in the all of the inputs matches our original content, the game phrase, then that means it's game over. And we run the end game function, which ends the game and allows us to click the button to move on to the next word. We have the output that we're constructing. So we're using the map, the splits or turning into array so that we can use some of the array methods. And then we're updating and adding in the character code into the array. We're joining it together as a string value. We're making a replace of the dash, dash 64 dash, which are the spaces. And we're just updating it with the word space so that we can pick that up afterwards as we're constructing the display area. The digits that are going to be used to decipher the character codes. So I do suggest that you play through the game and try that and just make sure that it's working the way that you expect it to work. Make any adjustments and tweaks as necessary if you have any questions or comments, I'll be happy to hear from you. Thanks again for taking the course. I'll see you in the next one. 29. 14 Code Review for Game: So let's do a quick code review. So we started out by setting up the index page, leaking to the stylesheet, creating a div to handle the game area and linking to the app.js file applied some styling to make the game look better. And then with JavaScript, this is where all the interaction came from and all the dynamic content. So we set up a bunch of elements, created a bunch of elements for the page, set them up, ties the clock counter, customized what the element style looks like. The ones that we've had to hide, we ha, we hit appended them to the page. So this can also of course be done with HTML, but we did want to focus on some JavaScript. So that's why this is rather long start to what we set up for the gameplay area. We needed some words to add into our gameplay. So now I can just switch it back to the initial freezes. As with the phrases that works a little bit better, the words are very easy. We are only using those for testing. We set up a global game object that we can connect to from any one of the functions as needed out at some event listeners. So it made sure that the DOM content is loaded. And then we ran the ion IT and the ion IT was just the setup of the Help key, that key code area. We also have the timer here at the bottom. And then the adjustment for the timer, because we want to have the values have to characters. So it's always going to be if it's 123456789, that they have a 0 in front of them. And that's the same thing for the minutes. And then we set up an event listener for to toggle the help section. So that was just the game cuz area. And we also set up an event listener for the button. So when you click the button at heights, the button launches the start game. The start game resets some of the values. It checks to see if the words length is there or not. And if it's greater than 0, then we know that we've got more words and the game word's array, we pick out another random one, so we resort at randomly. We get whatever the first one is within the array. We create the inputs, and we also create the output contents from the game phrase. And that just gets passed into Next to create the boxes. So that this was all, again, visual stuff that we want to improve some of the gameplay. And if the, if we're out of words within the game words, then we hide the counter and we put out a message to the user that the words are hidden. We created the create boxes. So this was the visual area for the number values the player has to solve. And we create a bunch of elements, spams again, so it looks nice and aligned. And then the main part of the game was the inputs, where we created the corresponding number of inputs for each one of the letters of the words updated. Some of the values had some hidden values within the player input object that we used within the gameplay. Also set the spaces to be disabled and appended them to the output area, add an event listener. So this is the creating the interaction for the game, checking to see what keys are pressed. And if the key down is then we're checking to see if it's right or wrong. And we're also transferring them to uppercase. You don't have to do that, but we just did that as an exercise to bring in some more JavaScript functionality. And again, to improve the game play when the key is up, then we automatically move the focus to the next sibling. We check to see if there is a next sibling. If there isn't or if it's disabled, then we take different auction. We don't move to the next sibling. And if it is disabled, we skip the disabled one and we move to the next sibling. We add an event listener. So whenever it's on focus, we check to see the input. And if the player input, guess if there's no guests there, then we just clear it. Also. If we have a value of i equals 0. So the first set of inputs that we're creating. So the first input, if the array is 0, that we automatically set the start focus on the first element, the first input element. We have a function to check the winner. So that basically checks both of the phrases. We use the to lowercase so that it's not going to be. So it's not case sensitive, so it doesn't matter what case the letters are. And again, because we're visually displaying the letters as uppercase to the player. And then we also have a small end game function. So if both of the content in all of the inputs matches our original content from the game phrase, then that means it's game over. And we run the end game function, which ends the game and allows us to click the button to move on to the next word. We have the output that we're constructing. So we're using the map, the splits or turning into array so that we can use some of the array methods. And then we're updating and adding in the character code to the array. We're joining it together as a string value. We're making a replace of the dash, dash 64 dash, which are the spaces. And we're just updating it with the word space so that we can pick that up afterwards as we're constructing the display area for the digits that are going to be used to decipher the character codes. So I do suggest that you play through the game and tried it, and just make sure that it's working the way that you expect it to work. Make any adjustments and tweaks as necessary if you have any questions or comments, I'd be happy to hear from you. Thanks again for taking the course. I'll see you in the next one. 30. 0 Game 3 Introduction hangman: Hey, do you want to play JavaScript hang man, how boat build a JavaScript hangman game? Well, that's exactly what we're gonna be doing in this lesson. So the objective of Hangman is to solve the mystery letters, the mystery phrase with as little missed letters as possible. So we present you with a board. There's a number of letters that you can click. We've got scoring here at the top, and this is all hang man. So the objective, try to solve it as quickly as possible with as little wrong letter guesses. Oh, this is gonna be done with JavaScript. So you get an opportunity to learn more about JavaScript, how to build a game using a JavaScript. This is an excellent fun way to learn more about coding and how you can build your own version of this type of game from scratch. All of the source code, of course is included. One of the best ways to learn is to try the code out for it yourself. So we're going to be walking you through how you can set up a game board, how you can apply the game logic. Also, we are going to be wrapping this in an application that's going to run when the dom content is loaded. So I'm going to be showing you how to that had to do that self invoking function, also creating the game from start to finish, applying the logic for the game, building out all of the game elements and all of the gameboard content. And this is all as well done with JavaScript, the interactions, adding event listeners for the key events, and then tracking and scoring, applying conditions, checking to see if the phrase is correct. And applying the scoring, checking how many letters are left to go and how many are missed. So all of this and also the conditions, the letter checks, the updates of the elements, dating the dawn elements, making an fun interactive dashboard for the player to play the JavaScript hangman game. This is going to be a step-by-step section. So we're going to start with just a plain file. Build all of the HTML, CSS, and JavaScript to make it dynamic and interactive and fun to play. So I know you're excited to get started. So let's dive right into the section and build out JavaScript hang man from scratch. In the upcoming lessons. 31. 1 Game Board Setup: Here we're going to be building the game from scratch. So starting out with index.html, let's first define the doc type. So the Doctype is going to be HTML. And then open up the HTML tags. And within the HTML tags, let's create the head tag. Within the head tag will create the title, and we'll call it hang man game. Then within the body section, create the body tags and creating a div that's going to contain all of the game content. And we can just call this a game area. So close that off. And now let's create the stylesheet as well as to JavaScript. So creating a file within the same directory. So let's just go to new file and save this file as up JS. And let's call it ops up to JS. So JavaScript file. And also let's create one more file and save this one as style CSS. So now we're ready to add them to the page content. So linking out within the head section. So creating a link and specifying the link as a style sheet. And then let's link out using the HRF to the style CSS file. So it's going to link out to that game file. And then also let's add in the script tag and link out to script and up to JS. And we can close that and create the script tag to link out to. So now we're ready to write some JavaScript code. And I'm actually going to move the script tag into the head section. And then we're going to load all of the content as the DOM is loaded, that we're going to start the game content and low dike game content. So do it a little bit differently than what we did within the previous lessons. So once were set up, we're ready to start writing that Javascript. So it's coming up in the next lesson. So set up your HTML, set up all of your source files, and you have to be ready to go to move on to the next lesson. 32. 2 DomContentLoaded Run App: So let's go back into the index file and we've linked out to up to JS. And this file is going to run whenever the DOM content is loaded. And I'm going to include the DOM content loaded script, that event listener for the DOM content loaded script within the HTML. And you can also include it within the end of the app to JS file if you want. So let's set the DOM and add an event listener that we're listening for. So this is going to be similar to what we get with jQuery whenever the DOM is loaded in in order to interact with the DOM content which has all of that document object contents. So within the body, we need to make sure that the DOM content is loaded before we tried to interact with it. And usually it's fairly quick and instantaneous, but there is a little bit of a delay so we wanna make sure that the dom content has loaded. So when the dom content loads that we're going to run a function called APP IN IT. And that's going to be the MIT of the application. So it's going to kick off the application running and the ion, IT is going to be all contained within the js file. So let's create that sort of create an object called App and run an anonymous function. And within this function, so this is where all of the game stuff is gonna take place within this function. So we're going to run all of the code there within the function. And this is going to be a self invoking function. So that's what we've got, the rounded brackets at the end. So basically what that means is that this function, we're going to declare it and then we're also going to be running it as well. So adding into this function, because we are calling from the index app IN IT function, we want to return back though IN IT object. So let's return back. And the object that we're returning back is within the ion IT, we're gonna run the INET initiation function. So we also need to create that. And that's going to be the first function that we're creating. So first off, we'll list the variables for the game. And then we're going to select the DOM objects. And then we're going to run the INT function, so function IN IT. And for now, what we're going to be returning back in the function is just gonna be that console log n. It's going to say ready. So let's see how that works. And once we've written the code, let's drag the index.html file to the browser and open up the file in the browser. And we're gonna be using the Chrome browser. So select, inspect to open up the dev tools. And within the dev tools there we've got a ready message, so ready to proceed and select the elements. So let's make a selection of the elements within the INI file. So open that back up within the ops INI file. And this is where we're going to select all of the object information. So we know that the dom content has loaded. So that means that we can select the elements on the page. And we actually have the one element on the page, and that's the game area. So let's make a selection of that object. And we can create constant variable so that we can create a constant variable for the game. So this way we can access it globally. And also let's create a const for the DOM elements. So this is going to contain all of the DOM elements so that we have access to these globally. So selecting out the DOM element, and let's give this element to name. So this is going to be where all of the elements from the page or going to be contained. And let's define this as DOM element gain area. And then using the documents and queries selector, selecting the element with the class of game area. And once we run the IN IT, then also, let's take a look at. So instead of console log ready, I'll move this down and I'm going to log the DOM elements. So this is where we're gonna place all of the DOM elements. So that's nice and neat within the DOM element object. And then if we have any other variables that we do need to define, we can define these here up at the top as well. And let me update this to be game values. So let's refresh. And now we've got access to the element within an element, so a game area. So we've selected the game area, and this is sitting within the DOM elements object. And as we create some more elements and update them to the page that we're going to add them all into the game area. So we're going to need a few more areas within the game area. So let's construct those. So under the DOM element object, we're going to need a few objects, and one is going to be the letters. So this will be the list of letters. So using the document create element, and these are all going to be the top containers and creating an element. So we're just going to create a few divs for this. So we're going to have a bunch of letters that the user can select from. So also within the DOM element, we want to have the hidden word. So also document create element. And the element that we're going to be creating is going to be a div. So this is where we've got the dashes for the hangman. And then also let's create one more DOM element. And then this is going to be for the score. So under the document, create elements. And within here we can create a div. So we've got a score, we've got the hidden word, so the output of the hidden word. So this is going to be just the dashes for the hanging man to indicate the letters. And then we're going to have a listing of all the letters and allow the user to select from the letters and try to solve the word in his little clicks as possible, or the phrase in those little clicks as possible. So right now we're just outputting all of these into the DOM and we also need to add them to the page. So right now they're not going to be visible. In order for them to be visible, we need to add them to the page. So let's do a quick append. We've already selected the game area, and we hit append a bunch of divs to that area. And we can also create a function that will make this a little bit easier. So let's, and we'll just call it create elements and pass in a value for the different types of elements. And so what this will do is this is going to create a temporary element. And then we're going to assign that value. We're going to return it back within this function. So within the temporary element, we're going to create element by Id. So whatever value that we pass in. So this will be valid. So this would give us ability to create multiple different types of elements. And then we're adding it. So the parent so whatever the parent element is, and the parent elements is where we're going to append the child element two. And then also, let's have some output value. So this will be whatever the temp area text. So temp text content should be. And that's going to be equal to output. And then what we're going to be doing is we are going to be returning the temp object and assigning it to whatever the value is. So let's create a bunch of elements. And that way we don't have to keep writing the same code over and over again. So it's going to simplify things a little bit. So all of these are gonna be diffs. So the values are going to be divs. And actually I'm going to probably duplicate this. The parent is the DOM element game area. And then the output is, this is just going to be a place holder. So we're going to be updating these after so that we know what we're going to be placing within these elements. So let's duplicate thoughts and duplicate that. And so this is going to be a div as well. So this is going to be secret words, and that's the Hidden Words. And then this is for the score. So it's said that looks like so do a refresh. So now whenever we do an inspect within the game area, so we've got the letters, secret words, and score. So I want to update, change the order. And these, this way to change the order is just whatever the order that we want to present the content. And so I'm going to shift things around a little bit before we populate them. And if this is good, we want the score at the top, the secret words and the letters. So if that all is exactly how we want to present it, then we're ready to move on to the next lesson. So that's how we can start our game board. So go ahead and set up your project. And the reason that we're doing it this way as a self invoking function that's self-contained, is that we're not going to have any issues doing it this way because all of the object information is contained within the app and all of the functions are contained within the app. So that means that if we have another function with another library and we're linking to an ion IT function. They're not going to interfere. So we can create another function and have this as IN IT, and do a console log of this. So basically what it's doing is it's separating out the functions. So this function will never actually run because we don't, we're not invoking that function. We're invoking the INET that's hidden within sight of app. And this is a great way to separate out your content so you don't have any conflicts. C can freely add additional JavaScript files without having any conflict. And then this one can be focused on creating the game and the operation of the game, and solely the operation of the game tied to the one element that we have within the index page within the game area. 33. 3 Create GamePlay: Now let's create the game play. So we need a button. So when we come into the game, what we want to happen is we might want to hide some of the elements and as well, we might want to have a button just to start the game so that kickoff, that gameplay, maybe some instructions and so on. So let's add all of that content in. And that means that we need to create another elements. And let's create that button. So this is going to be a start button. And I'll just call it btn. So we can have a button on the screen and set it up as a button, and also attach it to the game area and then start game is what the output is going to be. So let's see how that works. And now we've got the start game button on the screen and we can hide some of the elements that we don't need to use. So it might only want to have the start game. We want, might want to populate secret words with some instructions. So let's do that. And we're going to hide the letters as well as the score. So the dom elements score and update the style of this element to display. And let's set it to none. Add a DOM elements, that should be DOM element. And we're gonna take the letters and same thing style display, and set the display to be none. So both of those are gonna be hidden and then they'll, So let's handle the DOM and hidden word. And within here, let's update the text content. And this will be just the instructions. Click the button to start the Hang on. It should be Hangman. And let's set so that we can output. So let's see what this looks like. Do a refresh. We got click the button to start the hangman game. Let's also apply some styling to the content of the game. So selecting the elements with a class of game area and update the text, align, center align the text. Also, let's check the update the font size to make it fairly large. Sit that happens. Now. We're still got a fairly small button. So we can give the button a class or if we only have the one button that we're gonna be using, we can just update the button text as well. So let's update the button to background color and we'll set that to read. Add some padding around it to make it a little bit bigger. So ten picks. And let's update the text color to be white. So that looks like. And also let's make the font size bigger. It's already centered because we're centering the game area for all the texts. So now we've got a huge start button. I'd also like to apply border radius to the buttons. So whatever your preference is for buttons, you can make the updates within the styling. I don't want to spend too much time on the styling. I also do want to have a little bit of padding underneath. So let's margin under the margin bottom and we'll set the margin bottom of ten picks. So that will give it a little bit of space between the text and the button. So we've got this giant start button right now you can click it. It's not gonna do anything. So we needed to make the button active and this is going to kick off the start of the game. So we're, we want to add in the button actions. So let's add that into the eye in IT as well. So this is all of the setup and creating all of the actions. So let's take the DOM element buttoned and add an event listener. And EventListener that we're gonna be adding is going to be a click. So whenever the button gets clicked, right now would just track the event object and just make sure that the button is working. Listener. So addEventListener. So I'll refresh, start the game. And now whenever we click the button, we've got the action. I also want to, as we're developing this, update, the styling. So the cursor. And whenever we're on top, let's set that to grab. So now the button clickable and we've updated some styling for the button. So what we want to happen now whenever the button gets clicked is want to start the game. So we need to create a function that can start the game. So let's do that and just update the function whenever the button is clicked that we start the game. And one of the things that we do want to do when we do start the game is that we want to hide the button. So let's select the element and style and set the display, and set the display to be none. And then here is where we've got the next step to gain. So we're gonna work through this step-by-step. So the player comes in, it gets a message, click the button to start the hangman game, clicks the button, and now they still have the message. So we need to update that. And we need to also update the next step in the gameplay. So it's coming up next. So go ahead and add to your project the ability to click the button, as well as apply some of the contents and setup the game board so that you're ready to move on to the next lesson. We're going to be kicking off the game and we're going to need some values here within the game values. So all of that is coming up next. 34. 4 Start the Game Setup: So we're developing this game step-by-step. So we've got a big start button. We start the game, we need to hide this texts or we need to update the text with the hidden word content. And as well, we need to build a letters, a board where the player can click a bunch of letters. And we need to add in the scoring. So there's quite a bit of work to do within this step, and we also need some values. So let's set up an array and we can just call it My words array. So we're going to need to have some words to display on the screen. So let's create one called JavaScript or HTML. And also let's do on CSS. So that will give us our, MY word serene. And these are the words that we're going to be having the user guess. So there's a few things that we need to set up at this point. So this is building the starting of the game and we want to build out game board. So whenever we start the game, so let's update the display values to show what we need to show. So we're already hiding the button and what do we want to show? So we want to show the score. So update that to be blocked and as well update the letters to be block. And then we also want to update whatever the hidden word content is. So this is going to be whatever the hidden word is. And for now we're just going to pick one of the words and we'll show the word. So we need to have a way to select the word that we want to use. And we're going to select that out of the array. So once we start the game off, we're going to do a quick check to see if the, My words array length is greater than 0. And if it is, then we know that we can select a word. So let's go ahead and we're going to select a word, was selected random words. So we're gonna re-sort the myWords array. So it sorts in place whenever you use the sort method. Within the sort method, let's return back of value for the sort method because it's returning expecting a function within the sort argument. And we're going to return back the value of 0.5 minus math random. So what this is gonna do is it's gonna randomly sort the contents of the array, is going to sort it in place. So it could be negative, it could be positive. And that will dictate which word is next within the array. So it could be any word that's going to be next. So we need to take out the word. So let, and we're actually going to place the word within the game of values. So have current, so game values. And this will be the current word within the game values. So just sat a placeholder there. And as we select the word, we're going to assign the value of that selected word to gain values current so that we can have access to this globally. And so that means that we're taking from the myWords array and then using the JavaScript shift in order to pull the word out and assign that value to gain values. Current. So at this point as well, we can build the board and we can show the content. So right now what we'll do is I'll show the current word as the value, and then we're gonna hide that word. So within the hidden word, that context, we're going to update that. We're going to update the letters and then as well update the score content. So all of that is still needs to get updated, as we'd guilt built the game board, but let's try it out so far. So now we've got our random word from the array. So both times JavaScript, now it's CSS. And let's see if we can get one with HTML. So relatively random and we're picking a word. So even if I know what words have got in the array, I don't necessarily know what word it is. And we need to build the board in order to hide the word. So now that we've generated, We've picked up a word. We need to build the board. So we'll launch a function that's going to build some of the game board. So let's create that function for build the board. And we don't have to pass anything in because once again, we're just accessing all of the values globally. And we know that we have the word sitting there within the game of values. So we do have a value there for the current. So that's the value that we can use in order to build the board. So we can also split that into an array. So let's also do within the game values. And this is going to be the array for the solution. And we're going to take my words. Or you can take this game values current and split using the JavaScript split. And so we're going to split that into an array. And I'm just going to console log out the solution here within the game board as we're building the board. And so I just saw spelling mistake. So it should be built board. So let's correct that and tried it. So we should see the solution scrambled. And actually let's just put all of the game values object. And we also should have a placeholder for solution. So let's comma separated the current value and have solutions. So let's see what happens. So start the game and there's our solution. So we've got it already broken down into the array. So this way, we can have different spots that are available and we can check on all of those letters to make sure that the playwright letter is. So we've broken it into an array. So they've got index values. And we'll also have four slots or four spots where the letters can go. And then we need to also build out the letters options so the player can select a letter. And then also we need to update the scoring. So quite a bit still to do. So that's the next part. As we continue to build out the board, come up next, we're going to build up the letters. So go ahead and add the ability to break, create some random words, break them apart into an array, and also pick a random word from that array. And you gotta be ready to move on. 35. 5 Build Player Letters: This lesson we're going to be building up the player interaction area. So we need to output a bunch of letters on the screen and provide those to the player so that they can click those layers. So we're going to be constructing a bunch of elements and applying them on the screen. So let's do that. We're going into the build board and creating the elements for the page. And that's going to be attached to the letters, the DOM letters. So first, when we come in, we'll clear out the DOM letters. So enter HTML and set that to be blank. I'll just use the single quotes. And let's loop through. So creating a for loop. And we want to loop through while i is less than 26. So you've got all the 26 letters of the alphabet. And we're going to loop through and we're gonna populate. So we're gonna create a bunch of elements that are going to hold that information. So let's create those elements. So let div. And now we can use that same method that we had earlier. We were doing the crate elements function. So let's copy that. And as we loop through, we want to create a div and we're appending it to the DOM letters, so not the DOM area. And what do we want the contents of it to say? So we want to have, for the contents, we need to generate a string value. So let's use a variable called temp. And then using the string format from character code. And what this will do is this is going to generate character code. So starting at 65. And then plus whatever the value of i is, as we incremented starting at 65, this will actually create the letter and we're gonna be adding them to the screen. So let's see what that looks like. So refresh, start games. So there's all of our letters. And we want to make these clickable as well as we want to have them inline. So let's apply it close to them. And going into our style, I'm going to add a class of box. So the box will display inline and maybe we want to inline block. So they're all inline. Let's set a width for them. So how about we set 20 picks as a width and also do a border. And we can always adjust these as needed. So we're going to apply the box style to the elements. So now that we've created the element div and using class list, we're going to add the class of box to it. So let's see what that looks like. Start game. So now we've got them more in line. Looks like we need to make them a little bit wider. So let's do that as well. So instead of 20 picks, let's try 30 picks, see what that looks like. So start game. So there's all of the letters and whenever they get clicked, we're going to try that within the solution. And we're also going to be grading them out. So we're going to be. Disabling them so the player can't click them again. So the objective is really just to kinda go through and be able to click these. Let's make them, style them a little bit better, add some spacing in them. So again, let's do our border radius. So little bit of a border radius, add that in and do a margin. So do a margin. And let's do five picks on left-hand rate margin. So see if that looks like, so it's spaced it out a little bit. Maybe we also want to do the top and bottom margins such as 2-5 picks all around. And maybe five picks is a little bit too big. It's up to you. You can update that as needed. And if you want to set a background color to it. So I'm gonna set a background color of block, soda, font, color of white to them. And then whatever the box is hovered, I'm going to swap these. So set the background color to white and the color to be black. So that looks like so refresh, start game. So now whenever I hover over them, we get the swap. I've also going to update the pointer for it. So just, we can also just do that. Grab. So one more time. Just try that. Now we've got letters will make them clickable and track the clicks. So going where we've created the element, we've applied the costs of blocks. And let's add an event listener, EventListener that we're listening for is a click. And so what a click will do is this will actually remove that element. And we can run all of that function here. So whatever we're clicking it, it's going to remove event listener. So that's so that we can't just keep clicking it. Remove the event lists. So not so long one. So this is removing the click event from the event listener and the function that we want to run whenever the event listener is clicked. So let's set that up as a function. And I'll call this checker. So this is the function that's going to run whenever the button gets clicked, passing in the event object. And then within the event object, we're going to console log that event object. And this way, if we've got a function called Checker, whenever the element gets clicked, then we're going to run checker. And then also, that also gives us an option to reference the function that we want to remove. So it's going to remove out the click checker. And the reason we're assigning a function to chapter is that that gives us an option to also remove that element. And we also want to console log whatever the value of the key is. So console log the key and then we're going to disable it from being clicked again. So we can only click them once. And then once they get clicked, Let's also disable the element. So going into the elements and once it gets clicked. So we're removing the EventListener. And let's also select the div and style and update the background color so that it's different and we can distinguish it from the rest of the elements. So background color, and let's set the background color to be DDD. So suit that looks like. So refresh, start to game. So once they'd been clicked, and we should also removed the ability to hover on it as well. So we might want to have a completely different style for an element. So maybe we want to remove out the box and I'll just call it box D, so that way it won't have the hover. So we'll remove out the box and we'll apply box D. So div, class, list, remove and remove out the class of blocks and div. There's a number of ways that you can add and remove these classes just for the effect. So whatever effect that you want. So this case I'm just going to add a remove the class list. So that will remove the hover. So it no longer can hover on it. And I might also want to remove out the pointer as well. So let's remove the cursor Grob, or let's update the cursor with JavaScript. So just as we did the style background-color, selecting the div style. So it's style cursor. And let's select the cursor. And let's go back to pointer. So refresh, start game. And I'll get rid of the cursor, grab here and update it within the JavaScript. We'll update it to grab. And sometimes you do need to play through it a little bit just to make sure that it's working properly. Let's update the cursor to default. So there we go. So now we've got it that the buttons are now disabled, were not able to continuously click them. So once we've selected a letter, were not able to click them anymore, and that's exactly what we want. The letters are being tracked within the console and that will allow us to compare within the word object. Go ahead and add in the clickable letters to your game, and you gotta be ready to move on to the next lesson. 36. 6 Check Letters to Word: This lesson we're gonna be continuing with building out the gameplay. So we've got a start button. We've got the interactive objects to letters from the last one. And now we need to check whenever the letter gets clicked to see what happens here within the guessable object. And we also need to hide this. So we need to create a series of dashes so the user can see that this is what needs to be filled out and then also populate them if the player guesses correctly. And also if we have multiple words, we need spacing in between them. So let's update the object to just have multiple words. So there will actually be all learn the first word. And I'll just update this to be learn. So now we have multiple characters in the frieze. And we want to output them as dashed areas on the screen. So for that we need to loop through for each one of the letters. And that's where we've got the solution here. So the game solution, and this is an array. So splitting it by the space will allow us to loop through all of them. So you can do this before, you can do it after it's up to you. So doing loop through. So selecting the array and then for each item within the array. And this will just be the letter that we're going to be returning back. And then what do we want to do with it? We're going to be constructing a bunch of elements for this one as well. Let's clear out the textContent area. So this is the hidden word, textContent. And we're going to be updating the inner HTML just to be blank. So just like what we did in the letters section. So update the innerHTML to be blank. So let's create the game board content. And this can also be box, maybe we can call it box e for the box elements and set these to display inline, same width. We can also have a border, border-radius. Maybe we might not want as much of a margin. So let's see what this looks like. And that's the class that will apply to them. So we want to create these elements and we already have the value within the letter. So let's pass the letter value through and update that. So we can maybe do it to uppercase for want. So run the two uppercase method so that they're all uppercase letters. And the values that we're touching a two is the DOM, hidden word. So this is where the hidden word is going to go. So let's see what that looks like. So start the game and we've got the learn CSS. So that's written there. So that's, and let's do a quick inspect on it. So we haven't attached the class yet. So let's go ahead and do the class. So just as we added the class list, box D, we need to add the class list box 80. And we could apply some styling to make it look nice. Start learn JavaScript. So that's the solution that we're looking for. And if we want to hide the line, then we can just get rid of the border. So let's do a quick check to see if the value of letter is equal to just space. If it's blank. And if it is, then we can update the style of the border color and set that just to be white. So let's see what that looks like. So refresh, start the game. So now we've got the space there. And we can select the entire object. We can apply some more styling, so we've got more space. And we can also maybe make the font size bigger for the letters that were guessing. Sluts. Select the font size and do 2.5 AM. So that's going to be bigger than the rest of the letters. And that means that we also need to make it wider as well. So let's try 50 pix, refresh, start game, learn JavaScript. So they've got a little bit too big. So let's update that to 1.540. We don't want to be moving on to another line as much as possible. So we need to have dashes here instead of the letters. So let's go back in and update the content. So instead of adding in the letter to uppercase, they're all going to be dashes unless it's a space. And then we're going to be applying the border of white to it. And we can update that afterwards. So let's just apply the dash to all of them. And then update the div text content to equal just a space. So now we've got the words are hidden, and of course this is a learned HTML. So going into the console, we want to check the letters to check to see if the player scored properly. And then we've got the score area here where you can keep track of the score. So let's set that up in the next lesson. We're gonna be doing the check and then also the scoring of the game. So go ahead and set up the visuals for The Hidden Words and you'll be ready to move on to the next lesson. 37. 7 Update Hidden Letters: So now we need to run a check to see if the selection is correct. And we need to apply some scoring to that. So let's get rid of some of these console messages because we don't need them anymore. We want to only use them for the debugging of the game. So basically do some cleanup of the game object. And anywhere we've got some extra space in the code. I'm just removing that. So it's a lot easier to read because we need to add in a function that's going to check to see the letters. And we need to run that function. And where we're doing the checker, where we're running the value of the checker. We've got the div element within temp. We want to check to see if this value is correct. So creating a function that we'll call check letters and then temp. So within that function, and this is where we're going to be passing in a function called check letters and whatever the value is that we're checking on. So let's console log value as we're developing it and go start the game again. So start. So let's click one of the letters. So we're passing in L. So that's registering within the checker value. And we want to loop through all of the elements that have a class of box e. So let's make a selection of all of those. And this is going to be the solution letters. And using the document and query selector all selecting all of the matching elements that have a class of box e. So we get them into an array. And that way we can loop through them and make a check to see if any of them are matching. So solution letters. And let's do a loop through for each. We want to loop through and get each one of the associated letters for those objects. So this can just return back the element. And we can console log and do the element and textContent of the element. So let's see what happens. So refresh, Start Game, select anyone of the letters, and we loop through all of these. And we've just got the dashes because these are hidden. So we need a way to pick up those letters. So instead of going into textContent, let's update the letter and provide the letter in a hidden value within the object. So we'll just call it letter. And within here, this is where we've got the actual letter that we wanna use. So let's assign the letter value to it and loop through. And stood of L will output letter. So that will return back the letter. So now we've got the Learn HTML and we've got the spaces as well that are being included. So now we can have a condition to check to see the value that was passed in if it matches the letter. So let's do a check for that and see if val is equal to letter. And if it is, then we're going to update the element. So take the elements and add the text content. And we're gonna set that to the E letter of value. So it's going to show the letter. So let's start the game L. And because these are lowercase, so that's where we're running into an issue. So we need to update these to be uppercase as well, so that they match with the letter. So whatever the vowel is that's being passed in, Notice that the vowel is uppercase, so it's not matching up with the letters that we have. And again, uppercase. So that's what we're searching on. So we need to make sure that the case notches and the case of the val matches the letter. So how about we updates and set the letter using to uppercase. And we'd apply that as well as we make the update. So apply it to uppercase. So let's try it now. So now we're able to fill out the content on the page with the matching a letter. So whatever letter is matching, then it's filling all of those letters in. So we could apply this to the score now as well and have the score happening. And we also need to find a way to do the wind solution. So now that I've solved the puzzle, I should be able to detect that the game is over. And then also we need to work in the scoring. So all of that is still yet to come. Right now we're able to detect the letters and then we also have to account for the spaces as well. And what happens with the spaces. So that's all still coming up in the upcoming lessons. So go ahead and add in the ability to solve the puzzle and you're going to be ready to move on to the next lesson. 38. 8 Scoring of Game: So let's work out the gain values. So we've got the current, the solution. So we also can incorporate the score. And also let's have value for wrong. And this can be a value for correct. So we've got correct and maybe instead of wrong, let's update this to incorrect and set these two numeric values. So correct and incorrect. Both are set to 0 and update these whenever we start the game. So let's do a quick update of those game of values. So every time we launch a new game, we want to update those game values so that again values and update the correct value. So set that to 0 and also update incorrect setup to 0. And let's output the score as well. So we're going to create a scoreboard. So function score board. And this will just update the score element. So within the score elements, creating an element for output, I'm using the back ticks, so template literals, and then the dom elements score. And let's use HTML. So set the innerHTML to whatever the contents of the output is. And then with an output, let's output some values there. So we want to output for the solution, the number of letters. And we need to also account for spaces, so we don't want to count the loose in the solution as the number of letters left. So let's create another variable within the game values that we can attract that information. And this will just be total at right now we'll just set it to 0. And then as we loop through, we're going to increment total as we're constructing the letters when we're building the board. So as we loop through the game of values and if it's space, then we're not going to increment it. And if it's not space, that we're going to take the game values total and we're going to just add to it. So that's going to actually give us the total amount of letters. And we can use this within the scoreboard for the total letters. And then found. So this core can be game values, correct. And missed, can be gamed values and correct. And then we'll update these depending on how the player plays the game. So starts and update the score. So we need to update the score, suny to run the scoreboard when we start the game, wherein the scoreboard, and anytime we do updates to those values, we need to run the scoreboard. And we'll update the scoreboard after the check of the letters. And first of all, start out with found checker to be 0. And then as we loop through, if we find letters, so if there is a match, then we increment found checker. And then after we loop through all of those, then we can update the score. So take the game values. Correct. And we'll update the score with the game values correct value. So that's just going to increment with whatever the value of found checker is. And if there's nothing found. So we'll do a check to see if found checker equals 0. And if it does, then we're going to increment the incorrect by one and just increment that by one and then update the scoreboard. So let's see what happens. So L And we've got one missed, so there's something wrong there. A so we've got two missed so it's not finding the letters. Let's check out what's going on here. I'm going to end up this. So it's a little bit easier to read and checking to see if found checker is still 0. So do a console log of that. So some quick debugging and see why it's not picking that up. And also we can get rid of some of the console messages as well. So there's a clean up power debugging area. So let's select a letter. So it looks like we did get a value of three, but for whatever reason it's not updating the game values correct? With whatever is the found checker. So if it's not 0, then it should update. So let's try that again. So now it found three, mist, 0, missed one. So now it looks like things are working a little bit better. Let's try it again. So once the found equals the total letters, that means that we've got a Game Over scenario. So once we found all of the letters, we've got a game over and we can conclude the game and launch the next word. So it's the wind condition on this scheme and it doesn't matter what the mist score is. This is just keeping score on what's messed. So let me update some of the wording here that we've got. The found is awfully large. So just do a quick update on the found. And we can maybe put this within the brackets and miss and also put this within the brackets so that we'll just clean up the output a little bit on the screen. And you can also apply styling as needed as well. So go ahead and add this to your project and come up next. We're going to do the wind condition on the game. 39. 9 Game Win Conditions: As you come to the conclusion of your game, you're going to find that you're playing through it over and over again. And this is a good way to catch any of potential bugs or issues that you have. So right now we have the scoring, but we don't have a wind condition. So whenever the puzzle is solved, actually nothing happens. So we want a way to make that solution and check to see if the amount of letters and the letters found is equal. And if it is that we know that we've got a win to the game. So as we're updating and doing the scoreboard, we can also check the values within the scoreboard to see if we've got a wind condition. So let's go back to scoreboard and check to see if it's a winner. And there's also, depending on how you structure your game, you might want to have a separate function for this and run this. But most of the time when I'm ever, I'm updating the score. I'm running score board. So that way I can check to see if we've got a win to the game. So let's do that condition. And the condition that will be that if that game values total is equal to the gain values, correct? Then we know that the game is over. Game over. I'm going to shorten the content here that we have within the myWords. So as we do more testing of the game content, I'm going to just shorten this. So it's a lot easier to create the solution. And maybe I'll just leave CSS. So let's try this and start the game. So this one is C, s. So we've running game over. So it's triggering the function. And we need to create a function that's going to run as the game is over. So usually I do like to have a separate function that's gonna run for this. You could as well do it within this one spot. But just in case you want to have different and came over conditions and there are different places within your game. So it's always good idea to have it within one function that you can run and that can trigger the game over. So whatever the game is over, then we can go through and weekend, maybe disable the keys if we want or update and highlight the solution. So we have to decide here at what point and what we want to happen and what are the things that I do want to happen is that I want the ability to display the button to start the game again. So let's add that into the screen. And then we'll have to play through it a few times and take and make sure that we've got the game over. We're going to display the button once again, and I'm actually going to hide all of the elements were pressing, so all of the key elements, so the letters, so let's set that to none. So a lot of the same stuff we did with the INI tea, set that to none. And we can also update the score board if we want. I know we've just set a value to it. But we can say an output to here. And let's create that output. Using the template literals, the back ticks, and whatever we want. For the game values. Total. And you've found all the letters with and then whatever we have for incorrect. So that's game values. Incorrect. Mrs. missed. And you can customize this as needed. So let's see how that looks. So start the game. You found all five letters with 0 missed the button. It's being pulled over to the left side. So the button by default, it's going to be, it's not block, that's going to be inline. So let's update the style of the button to be inline, block. And try it one more time. And we're gonna see what happens. We should also update what we have for the value of start game. So now it's centered, hit it again. So we actually did move on to the next value. And then that's also be recorded the letters that we have to find. So that's incorrect, so that actually incremented by the value. So we need to reset the total letters. So let's take the game values total, and we're going to reset that as well when we do the start game. So gain values total, set that to 0 for the total that we need to find and update the value of the game buttons. So whenever we run the game over and button, so let's update the button. And odd in textContent and whatever we want for the textContent, I'll just write next word or a next game or next round, but we added next round. So let's see how that works. So start game. So CSS, so we get next round, you found all three letters with 0 mix. Next round HIT a. You found all five letters with 0 mix next round. And this one is with the L. So you found all five letters with 0 missed. So right now it doesn't know what to do because it's not loading anything. And maybe we need to count how many words are still left before we output the message. So let's take the value of my words length and we're just makes sure that it's greater than 0. And if it is, then we have put next round. And if it's not greater than 0, then it's actually going to be the last round. So we don't have any next move and we can just wrap up the game. So let's also update showing of the button. And nothing really happens whenever the game is over. So we can track so that to none have the output. And then also maybe we want to have some output four where we've got the letters area. And here we can write that the game is over. So only set this to none here, and then letters and update the innerHTML and set solved all words. And here we can just write the game over. So let's try that from the beginning. And going in through, we select the letters. We get next round. So we've got the solution there again next round. And this time this should be the last word. So now you've found all three letters was 0 missed CSS, you solved all the words. Game over. So there is no next round and the game is actually over. So coming up next, we'll do some final tweaks, bug, bug fixes, and also do a quick code review. So that's coming up in the next lesson. So go ahead and update your game so that you have a way to complete the game, that it's game over, and you can be ready to move on to the next lesson. 40. 10 Final Game Code Review: So this is the lesson where we play through the game and just make sure that everything is working as expected. So try the game out and I've still got it within the testing values. So again, try to game out, make sure that everything is working as expected and do any debugging and also apply any styling that you want at this point. And apply any styling that you want at this point. So let's do a quick review. And let's update this docked to the actual values, to the actual values that we have. We launched the game with the start game. So just make sure that again, everything is working. And a lot of times you're gonna have to play through a number of times just to make sure that everything is working as expected. And then lastly, apply the styling that you want for the game content. And then when you go into the code, this is the point where you can also go through the code, remove out on any of the console messages. So I'll do a quick code review. We set up the basic HTML shell. We linked to an JavaScript file. And then we wanted to wait till the DOM content loaded before we ran the game content, because this is all DOM based content, we add an event listener that listens for DOM content loaded. So whenever the DOM content is loaded, so that means that all of the body content is ready to go. Then that's when we continue with the game development. We created one div within the body area, give it a class of game area. So this is going to be serving as their main game content area, the styling as well. So we applied styling to some of the elements. We also applied styling for the boxes. And this was done to save us some time with the JavaScript can also of course be done with JavaScript. We have a function, so anonymous function that's self invoking. So whenever that app to JS file runs, It's going to run this function and it's going to set up the app object with the function IN IT. And that's the same one that we're calling from the DOM content loaded. So that's going to run the app IN IT function. So the, within the ion IT function. So we start out by setting up some global objects that we're gonna be using within the game functions. And then the INET basically sets up all of the DOM content that we're going to be using in the game. It's the event listeners to the game board we created. We have to create a lot of elements within this game. So created a function that creates elements. So it requires few parameters passed in. So the type of element that we're creating, where we're attaching it to and the content of the element. And once the player is ready, they click the button that starts the game. So this kicks off the starting of the game. It reset some of the values back to 0. So this, we can also use the start game to load the next word. So it comes in at, at heights, the button, the start button, so the player can't keep pressing the button. It checks to see that the length of the array is greater than 0. And if it is, then it randomizes the. First item or the items in the array, we just select the first item using the Shift method and that load sit into the game values, whatever the current value is that we're trying to solve, we also create a gain value solution. So we split the value of the content and we split it into an array object. And then we also show a few of the elements. And then the two main functions of the game are building the board and the scoreboard. So the scoreboard is relatively straight forward, where every time we update the score, then we run the scoreboard. The scoreboard is where we simply output the letters. So basically the progress of the game. And then we update the scoreboard visually for the player. And this is also where we check to see if the game is over. Because every time that the score changes, we can do a comparison of the number of game values total to the ones correct. And if those are equal, then we know that it's game over. So we run game over. And what happens in game over is that it checks first to see if there's any more words left in the length. And if there is, then it updates the button shows the button, updates the button to say next round at hides the letters. And if there are no more letters in the myWords array, then it basically says that's game over that we've found everything and that's what it outputs into the HTML. And we also update the score as well here. So within the game over, so this is another opportunity where we update to whatever the player has scored. We've got a function that's called check letters. And this is where we loop through all of the available elements that have a class of box e. So these are all of the letters that are the hidden letters. And we check. We set the found check. So this is for scoring. We set that to 0. And as we loop through all of them, we check to see if the value that the player selected from the interactive elements is equal to the element letter. And if it is, then we update the found checker value and we also update the text content. So the later letter now shows instead of the dash, we can comment out the console messages or simply remove them. And then within the found checker, we check to see if it was correct. So if the found checker is now greater than 0, that means that we need to add it to whatever the correct score is. And if it's incorrect, then we're going to be adding to the incorrect score. And then we're running the scoreboard, which again checks for the values to make sure that we check to see if we've completed all of the letters and it updates the scoreboard for the player. So the big part is here, or we're building the board. So what we're doing is we're clearing out the letters element as well as the hidden word element. And then we're looping through all of the gain values solution. And the gain value solution object is that array of all of the letters of the solution that we set upon start. So we loop through each one of them, referencing LET, which is probably not a good way to reference it. So I'm gonna update that to LET T so that we're not referencing let, which is a reserved word. And so as we loop through, let's just update these. To be L E T T. Since that'll let, so it's better practice not to use any other reserved words as the value. So as we loop through, we assign a letter value using the let to the object, to the element objects. So this is hidden in the background within the object value. And then we're going to use that in order to check the contents to see if they match up with the selected letter that's been selected. So we also outputs and we update the contents of its space. Then we add whiteboard around it so it's not visible. And we set the text content to be a space instead of a dash because the players all the c aren't trying to solve spaces. We run through and we update all of the gain values to initiate and create a total. And this is also what we use within the scoring to check to see if the total is matched up with the amount of letters that the player has found, then we create the letter board area. So this is the interactive area for the player to be able to click the letters on the screen. And we looped through using the character code starting at 65. So these are uppercase letters. So 65 represents a all the way through to 26 additional characters. So that's 91, and that's going to represent the uppercase Z, and then it goes to lowercase. Actually after that, we want to display them as lowercase. We would set this to 97 and starting up 97, and then that would display it as lowercase characters. So we could also play the game with lowercase. In my opinion, it looks better uppercase, so we'll leave it out uppercase. But you're free to adjust this as needed. So let me just give you a quick demo of that. So if we do update this to be 97 instead of 65, what's going to happen is when we started, these are all going to be lowercase now. And the other problem too is that they're not going to be matching up anymore. So you need to have consistency, either using uppercase or lowercase, or you're running the two lowercase to uppercase so that the characters aren't going to be case sensitive. Next, we're creating the element using a Elements function, and then we're applying the cursor of Grab. So that way we can update the cursor back to the default when we remove the click function. So we're adding a class to it and we're creating a function called checker, which the reason that we're creating it and adding it to the EventListener is because we also want to have the option to remove the event listener. So we need a variable name to reference the function. This makes it easy to remove that function from the element once it's been clicked. So we only want the one-click on that element and then we remove it. We're also can be running through check the letters function, and then applying some styles, adding and removing some classes to the element as it gets clicked. So that makes it look more like it's not available anymore and it's disabled. So this is our create elements function. So it requires some parameters, uses the document create element method, creates an element, appends it to whatever we're supposed to append it to, updates the textContent output and then returns the element object that we associate with the variable name. And then last thing here, we've got a return of the ion IT function. So this allows us to kickoff the IMA t function with app.use mid-1980s. So basically it's going to run the INET function and allow us to start out the game play and set up the game port. If you have any questions or comments, I'd love to hear from you. Thanks again for taking the course. I'll see you in the next one. 41. 0 Game 4 Introduction wordsearch: Hey, do you want to play a word search to? I'll play a game, and this game is going to be word search. So this is all dynamically generated, all using JavaScript. I'm going to be showing you how you can build your own version of this game from scratch, where we take a wordless and we populate the content as much as possible available within the grid. So the objective of the word list and the word search is to have fun find the hidden worlds within the word list. And if you do get the words wrong, if you get any of the letters wrong, they're gonna go read, if they are on the word list, they're gonna go green really to solve and select and find all of these hidden words on the board. Once you find all of the hidden words, then you can restart the game. And you can also dynamically up just what size of word lists, what size of grid that you want. So how many letters across and how many letters down? And that will also affect how many words that you can fit into the list to the application is going to try to create and load the grid with as many words as possible. So this is all going to be randomized where the starting positions of the Word says the direction the words are going to be flowing, if the words are going to be reversed or not. So all done with JavaScript and dynamically loading the content so you can separate it out. You can create multiple word lists and load them into the application it will run generating the word search board for the player. So this section will show you how you can create this fully functional word search. It fills the grid with as many words as poses a very challenging and interesting way to learn more about JavaScript. And it's a fun way to generate a fully functional application. So this is a dynamic grids with populates the list of words, and builds the gameboard,