JavaScript Mini Projects DOM Interactive Dynamic web pages | Laurence Svekis | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

JavaScript Mini Projects DOM Interactive Dynamic web pages

teacher avatar Laurence Svekis, Web technology Instructor

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

41 Lessons (11h 34m)
    • 1. 0 Intro Back to courses JavaScript Projects DOM Interactive Dynamic web pages

      3:18
    • 2. 1 Web Developer Setup

      9:00
    • 3. 2 JavaScript Resources

      2:00
    • 4. 3 JavaScript DOM

      12:04
    • 5. 4 Page Elements Select ALL

      11:45
    • 6. 5 Page Elements Event Listener

      10:10
    • 7. 6 Input Values from Page Elements

      11:13
    • 8. 7 RequestAnimationFrame

      13:51
    • 9. 0 JavaScript Starter Projects DOM Simple Projects to Start Coding

      5:37
    • 10. 1 List Maker DOM

      15:37
    • 11. 2 Interactive List Items Part 2

      16:33
    • 12. 3 Star Rating Project

      20:13
    • 13. 4 Coin Toss Game

      30:48
    • 14. 5 Typing Game Project

      19:07
    • 15. 6 Element Mover Path

      23:44
    • 16. 7 Combo Guess Game

      25:16
    • 17. 8 Shape Clicker Game

      19:47
    • 18. 9 Number Guess Game

      23:55
    • 19. 0 JavaScript DOM Interactive Fun Useful Projects

      7:06
    • 20. 1 Pure Javascript Accordion

      11:26
    • 21. 2 Drag and Drop

      15:16
    • 22. 3 Dynamic Drag and Drop

      14:38
    • 23. 4 Dynamic Drag and Drop 2

      22:21
    • 24. 5 Email Extractor

      20:01
    • 25. 6 JavaScript Quiz Maker

      24:23
    • 26. 7 JavaScript Quiz Maker 2

      27:58
    • 27. 8 Image Preview HTML5

      21:13
    • 28. 9 Dice Game JavaScript

      17:31
    • 29. 10 Dice Game JavaScript 2

      16:19
    • 30. 11 Dice Game JavaScript Challenge

      28:45
    • 31. 0 JavaScript DOM Fun Projects Interactive DOM Elements

      3:50
    • 32. 1 Tip Calculator Project Part1

      11:13
    • 33. 2 Tip Calculator Project part 2

      10:29
    • 34. 3 JavaScript Calculator Part 1

      15:27
    • 35. 4 JavaScript Calculator Part 2

      15:39
    • 36. 5 JavaScript Calculator Part 3

      14:59
    • 37. 6 Bubble Popper 1

      28:17
    • 38. 7 Bubble Popper 2

      31:30
    • 39. 8 DOM Element Mover

      17:37
    • 40. 9 Element Collision detection

      15:35
    • 41. 10 JavaScript Game Development

      28:37
  • --
  • 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.

57

Students

--

Projects

About This Class

Explore how you can create amazing Mini Project to learn JavaScript - Grow your portfolio - Expand your skills!

Explore how you can create amazing Mini Projects to learn JavaScript - Grow your portfolio - Expand your skills!

Do you want to add interaction or dynamic content to your web pages, this is the course for you!

JavaScript can bring your web pages to life - interact with the DOM.   Select page elements, make changes and update them as needed.  Power up your web pages!!!

Create amazing content on your pages, driven dynamically with JavaScript.  Projects within this course are designed to help you learn more about JavaScript and interacting with the DOM.  Learn by example, course is loaded with fun projects to help you learn and demonstrate what can be done with JavaScript

Source Code is included so that you can try the code, and build your own version of the web applications.

Please note that HTML and CSS are prerequisite to the course, as well fundamental JavaScript is required as we are covering JavaScript within web pages.

JavaScript Projects within the DOM - Document Object Model

Explore how to create Interactive Dynamic web pages

Introduction  to the DOM and how JavaScript can create page interactions - Explore how to write JavaScript code, select page elements and more.  Loaded with useful projects to help you learn more about creating interactive and dynamic web content with JavaScript.

Course covers everything you need to know in a step by step format so  that you can start coding JavaScript and creating amazing things with code.

Web Developer Setup use of Editor for JavaScript Code

JavaScript Projects DOM Interactive Dynamic web pages Introduction web development Course Resource Guide.

  • Getting started with JavaScript DOM coding and development

  • Web Developer Setup use of Editor for JavaScript Code

  • JavaScript Resources to explore more about JavaScript

  • JavaScript DOM Object Selecting Page elements and more

  • JavaScript querySelectorAll Get Page Elements Select ALL

  • Page Events Element Event Listener access page content with JavaScript

  • JavaScript and Page Input Values from Page Elements

  • How to use JavaScript Request Animation Frame

JavaScript Starter Projects DOM Simple Projects to Start Coding

  • How to make Interactive DOM list saving to localstorage

  • JavaScript Component Create a Star Rating Project

  • JavaScript Game within the DOM Coin Toss Game Project

  • JavaScript Typing Challenge Game with JavaScript DOM

  • JavaScript DOM fun with Page Elements Moving Storing Keypress

  • JavaScript Combo Guessing Game Exercise

  • JavaScript Shape Clicker Game Click the shape quickly to win

  • JavaScript Number Guessing Game with Game Logic

JavaScript DOM Interactive Components and Useful Projects

  • Pure JavaScript Accordion hide and show page elements

  • JavaScript Drag and Drop Simple Boxes Component

  • Dynamic Drag and Drop

  • JavaScript Email Extractor Mini Project

  • Create a Quiz with Javascript JSON quiz tracker

  • JavaScript Image Preview File Reader Example

  • JavaScript Interactive Dice Game with Page elements

  • JavaScript Dice Game Challenge Lesson

JavaScript DOM Fun Projects Interactive DOM Elements

  • JavaScript Tip Calculator Project

  • Tip Calculator Project Part 1

  • Tip Calculator Project Part 2

  • Pure JavaScript Calculator DOM page elements Project

  • JavaScript Calculator Part 1

  • JavaScript Calculator Part 2

  • JavaScript Calculator Part 3

  • JavaScript Bubble Popping DOM Game Coding project

  • How to move a Page Element With JavaScript DOM Mover Example

  • Collision Detection between Page elements with JavaScript DOM

  • JavaScript DOM Interactive Game

JavaScript in action - use of pure JavaScript to create amazing interactive content on your web pages.

Source code included

Build your own version of the projects

Learn more about JavaScript and DOM page element manipulation.

No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.

Step by step learning with all steps included.

Beginner JavaScript knowledge is required as the course covers only JavaScript relevant to the building of the game.  Also HTML and CSS knowledge is essential as scope of this course is all JavaScript focused.  

3a876748.png

Start building and creating with JavaScript today!!!!

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.

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.

Transcripts

1. 0 Intro Back to courses JavaScript Projects DOM Interactive Dynamic web pages: Hey there, my name is Lawrence and welcome to the course. I'm going to be your instructor for the course. I come to you with many years of web development experience. One of the most commonly asked questions I get from students help with creating fun interactive projects that they can learn from and that they can try out for themselves to get more familiar with what can be done with JavaScript. This course is focused on JavaScript and the DOM and creating DOM interactions. So making your webpages come to life with interaction and dynamic content, all done with JavaScript. I've got a lot of interesting fun projects lined up for you in the upcoming lessons to give you an opportunity to develop and practice your JavaScript skills included in the course is going to be a full resource guide that's going to cover all of the lessons, including the source code with links and more information to help you get started with the various projects that we're going to be presenting within the course. There's also going to be screenshots of the application and the final application and what the product is going to look like and provide you more resources to help you learn and go through the contents of this course. The first section of the course is designed to help you get started with interacting with the DOM, selecting page elements, making manipulation of page elements, and then following sections are all projects. So these are real-world projects, interactive projects that you can create yourself in order to become more familiar with what can be done with JavaScript. Source code is also included, and I do suggest one of the best ways to learn is to try the code out for yourself. Make some adjustments to the code, see what happens in order to get more familiar with what the code can do. Fundamental JavaScript, HTML and CSS are prerequisites to this course as the upcoming lessons are strictly focused on JavaScript and using JavaScript to manipulate elements, creating dynamic and interactions within the webpages. As this is a projects course, there's a number of projects that are going to be presented within the sections of the course. And you are welcome to select a project and select any of the projects. You don't have to take them in order. You can take them with which are relevant to the skills that you want to develop and the projects that are most interest to you. Which ones you want to learn first. Within each lesson of the course, we're going to start the lesson by presenting you the finished product. And then afterwards we're going to walk you through the steps in order to create the application that was just presented to you so that you can get a feel for what will be created within that lesson. And again, you are welcome to skip to the various lessons and more relevant to the content that you want to learn. All the lessons are going to be focused on updating webpages, manipulating the DOM, selecting page elements, creating Elliot Page Elements, and then also applying logic. And we do have some games as well that are going to be presented within the lessons of the course. So presenting and how to develop games using JavaScript. So this is all JavaScript, pure JavaScript. So there's no libraries and the focus is on selecting elements within the webpage and making updates to those elements. So know you're excited to get started. So let's get coding and writing some JavaScript. 2. 1 Web Developer Setup: Welcome. In this lesson we're going to be going through the developer environment. So for the code editor, we are using Visual Studio Code. So that's available at code dot Visual Studio.com. And of course, if you already haven't edited that you're comfortable with, you can go ahead and use that. If you want to use the same, whether I'm going to be using in the upcoming lessons, then that's going to be the Visual Studio Code. You can download the version for your system. So whether it's a Mac, Windows or Linux, they have all the downloads available there. So once you've downloaded Visual Studio code or your editor, go ahead and open up the editor for Visual Studio Code. It's going to start on the start page so you can uncheck the welcome page. This welcome page does have a lot of useful links and information on how to get started with Visual Studio Code. Learning the fundamentals of the Visual Studio Code. And then you've got your quick links here to start a new file open. Also clone a Git repository and you can also run a command. I am using a style theme which can be changed and updated, went the color theme. You can also use the shortcuts for that. The one that I'm using is going to be the high contrast. Since I find it's better to do the recordings with the high contrast theme. And of course, you can select any theme that you're comfortable with. So once you've opened up and set up your editor, then next thing to do is to create a folder with the file that you can use in order to run the JavaScript code. We are going to be running the code within a Chrome browser. So Chrome browser also gives us access to DevTools. And in order to access the DevTools and a Chrome browser, you can go to the three dots in the top right-hand corner of Chrome and select the more tools. And then under the developer tools that will open up the developer tools screen, you can also use the shortcut or on a Windows, you can right-click anywhere on the page. And that will give you an option to inspect, which will also open up the developer tools console. And you can also on a Mac, you can press Control anywhere on the screen and select Inspect. When the developer tools opens by default, it's going to be on, docked. On the right-hand side, you can click the three buttons and customize where the docking takes place. So usually in for most of the lessons are going to have a docked at the bottom like this. We're going to be focusing on JavaScript. So that's opening up the Console tab in the developer tools place where you can actually write JavaScript code directly within the terminal. So if you want to do the alert, say high, that will run this syntax, and that will run the alert pop-up window. You can go ahead and you can try that as well within your developer tools to get more familiar with what you can do with developer tools. So that's going to be the basic environment that we're using. Most of the lessons, I'm going to have the Chrome browser minimized on the right-hand side of the screen. And I'm going to have the file that we're working on with the code and the syntax on the left-hand side within the editor. So now that we're ready to begin, let's go and we're going to create a folder and an index.html file. So you can use the quickstart here, new file, or you can go up to the, under the file and you can select the new file. And that will open up a new tab and give you an option to type in the new file contents. This is going to be an HTML file. So we're just specifying the DOCTYPE HTML and that will let the browser know that we're using HTML5 syntax. We can close off the HTML tags. Also do the head tag, necessary HTML tags, and we'll just call it JavaScript. Close off the title tags, close off the head tags, and then also do the body tags and we'll close off the body tags. So I've just created a new folder on my computer because called it JS. And it's asked me what the filename is that I want to save it. So once I save it as an HTML file, what's going to happen is that the editor's going to pick up that this is now HTML code, that the syntax is HTML. So it's going to also color and allow us to do styling for the code that we're writing within the editor. So next up we want to create a JavaScript file. So let's go ahead and create another new file. And this is going to be where our project is going to be. So we're just going to call this x one dot js. So create that file and then we'll save it us. And I'm saving it within the same main root folder, JS as I do have my index file. So we're just calling it E X1 dot js. And then within here, we're going to just output into the console. And you can use single quotes or double quotes for the string values. For most of the lessons, I tried to use the single quotes because it's a lot easier to read on the screen. And then now within the JavaScript, we're going to, within the HTML, we're going to use the script tag and connect to the source, which is going to be that js file that we just created. So save that. And now to run and open the file, you can either drag it and drop it into the browser from your editor directly. And that's going to run the code. And we see we get the output there within the window. And also with the Visual Studio code, you can run a live server. So I already do have that extension installed. So this is an extension that you can install and lets you run within the Visual Studio Code using the local machine. And you can select the extensions under the code Preferences tab and then select extensions. Or you can use the shortcut for the extensions, the extension that you want to install, you can just search for it. And the one that I am using is going to be the live server. So go ahead and do an install if you want to set up your local machine. And that way you can run your local server as you run through your web development environment. So once you've added that, you can also configure it under the COG here. So going back to the index.html, now we want to run this with the live server. So if you do have your appearance and you do have your status bar at the bottom, it will tell you what file type you're using. Tell you what file type you're using. So if you list out the files that we currently have in the folder, we want to select that as our main folder. So that's going to be the JS folder that I've created. And now that will be our main folder where we've got the files in it. And we can close that start page. Whenever we've attached it to a main root folder, we can use the Goal live and launch this as i local machine within the web browser. And I'm just going to click that. It's going to open it up as the local machine with the port and forward slash index. And then it gives you a little pop-up window here that tells you that you've opened up, Up. Now it's running that index file and using the JS folder as the root folder. And let's open up the DevTools, just make sure that our console is logging out the hello. We'll do a quick refresh of it. The word hello there being sent out into the console log. And that's from the extension that JS EXE file where we've got the contents. So if we were to update this to say hello, world, save it. And as soon as we save it, the page will refresh. We see the word Hello World. So our JavaScript is running, our HTML file is running. We're able to access the contents within the browser and write the code within the editor. You can also now minimize the side screens because we don't need the side windows anymore. I'm going to change this for the upcoming lessons as we're going to just hide the activity part, hide the status bar at the bottom. So that will give us more screen space. I'll make it slightly larger so that the code is going to be easier to read. Animals are going to go and do the word wrap. So that will allow when I'm writing the code to wrap it to the next line. So now before the next lesson, go ahead and set up your editor, create your JavaScript file, create your HTML file open, ended up in the browser. And make sure that you're able to run the JavaScript, the browser. So you can do the same syntax that I did with the console log output a string value. So string values contained within the quotes. So this can be any message, can add in spaces there as well. So this is just a regular simple string value that we're outputting to the console. And the console log is going to give us her way to debug our application as we're building the application so we can see what's happening behind the scenes, see the different values that are contained within the script. So set that up and you're going to be ready to move on to the next lesson. 3. 2 JavaScript Resources: The upcoming lessons are going to be fast-paced with JavaScript. So if you do need more help or more information, and as well, we are going to be referencing the JavaScript documentation at the Mozilla Developer Network. So that's available at developer dot mozilla.org, forward slash English or whichever language that you want to use. And it's got a lot of different references, guides, as well as tutorials. There's different technologies that you can look at. So and of course we are going to be looking at JavaScript. So it gives you information about JavaScript. And what the syntax does gives you some basics of JavaScript, gives you a JavaScript guide, as well as how the different data structures and how you can reference all of the JavaScript methods and syntax that will help you write code. There's also a really excellent list of resources here, Stack Overflow. So you can look for questions tagged with javascripts is lot of help there, as well as JSFiddle, which allows you to write and edit JavaScript and get results live directly within your browser. There's also CodePen, which is another resource that I use quite a bit of JavaScript directly within the, within the application at CodePen dot io. And there's also a number of other resources that are excellent in order to learn more about JavaScript and as well, you can search out the different syntax. So if you want to find out more about what console log does, you can search it within the search, and then it will give you information about what console log does. And as we saw in the last lesson, it's a method that outputs a message in the web console. And this message is a single string with optional substitution values. So if you do need to go look up syntax, the Mozilla Developer Network is an excellent resource to find out more about JavaScript syntax and what it does, as well as see some examples of the code in action. 4. 3 JavaScript DOM: In this lesson, we're going to start interacting with the DOM. So that's the content that's being displayed on the webpage. So notice that the index.html file just has hello, but then we've got it being output as hello world. So this can be anything, I can update that to any word. And it's actually the JavaScript that's overriding what's being displayed within the browser. And that's being done with the JavaScript code where we're selecting the page element and then updating and reassigning a new value to the textContent. So that's what I'm going to be showing you how to do that in this lesson. Learnt that JavaScript DOM, as well as how we can interact with it. And then also a quick discussion about JavaScript objects and how it's going to relate to what we're going to be doing with the DOM. So go ahead and open up your editor. We can still have the JavaScript file linked to the index.html page. And we're just going to make an update to the JavaScript code. And instead of console log, we're going to use the console directory. And instead of hello world, we're going to reference an object called the Document Object. So once we output that into the page, we see that it gets shown within the console. And when we open that up, it's going to contain a lot of information as related to the page itself. And this is what's known as the document and the document object. It gets created by the browser for every single webpage and its representation of what all of the elements on the page. So you can get information like the base URI. So if you were to type in and type document within the editor and type base URI, you get this string value being returned. So with JavaScript, you can access all of these values via the properties that are contained within the DOM. As well as the DOM has a lot of methods that make that you can make use of to interact with the web page and the content within the page document is going to list out all of the elements of the page. And we can navigate through and traverse through those elements. So we see that within the document object, we've got children, within children, we've got HTML. And then within the HTML tag, we're going to also have all of the different properties, and that's going to have a list of children as well. So we're listed out the children, we get the head and the body. So when looking at the HTML structure, there's our HTML tag. Now we've got the children of HTML, our head and body. The children of head is going to be title. So when we go to head, we open that up. Go all the way down to children. We see that title is listed, so it only has the one child, which is the title. So if you have more page elements, you're going to have more content listed within the DOM. So if we were to add an H1 tag that said hello within the HTML. Now we want to navigate down to where this H1 tag is contained and we can go into the body and check what the children are within the HTML. So going into the HTML tag and then navigating down to the children of that main HTML tag. And that's going into the body, and then going into the body, then going down all the way down to the children. We see that we've got three children here. And the top one here is that H1. So if we want to just access all of this, we need to know the path and the location of where that H1 is located. There's more information, Mozilla Developer Network about the dawn. So they do have a visualization here, essentially how the window object works. So it wraps the document objects. So document object is actually nested within the window object. And then you've got a bunch of different page elements that could potentially be listed. As we've got the H1 listed, the script listed, we've got all of this listed and contained within that parent element. So going back into the JavaScript code, let's create a JavaScript object and minimize the browser window and within the JavaScript. So let's create a basic object. You can just call it my object. And then within this object we want to contain some information so similar to what we've got within the page structure. So you might want to start with the main HTML page element. So give it a name of HTML. And then the property can be an array within there. And then within the HTML, we've got head and body. So we can have a couple objects that are contained in there. So we're just gonna do it as an array. So we've got the head and then we've got the body as children within the HTML. And now let's list out the object into the console. So just as we can create JavaScript objects, we can get returned back properties that are contained within those objects. So now that we've got that my object within the code itself, we can go to the HTML object and then we can select the items that are contained within the HTML. So that's the first one with index value of 0, and that's the second one with an index value of One. So we can navigate and we can traverse through this object multi-level levels down in order to find the data that we want to output. And it's the same idea for the document object. So you can go into the document object and navigate down to locate the item that you want to look at. So let's say for instance, we want to select this page element. Now, we don't always want to have to traverse through the document and then go into the body and then go into the body contents so the body can have children. And then the first child there would be the H1. So we could potentially access that page element by using that path where we use the document and then the body, and then it's got children, children. So that gives us our HTMLCollection of the children. And if we use the index value of 0, that's going to select that first child element. Then we see it being returned back here once we make the query for it using the path that we saw within the document object. We change the H1 and we add in another tag. So this wouldn't be a good way to make that selection. And that's where we have different methods within the document object where we can make selections. We want to reference this particular location within the document object. And we want to just look for the first matching element that has an H1 tag. We'll select this element, we'll call it L1. And then using the document object, it also contains a bunch of different methods. The easiest one to make a selection is query selector. So just as we do with the CSS selector, we can make the same selector here where we can select the one, the first element that has an H1 tag, and then we'll return that back into the console. So when we refresh the page, we see Hello now is within the console. And if we type in L1 or variable named L1, we're referencing that same object. And once we can reference it within the variable, that means that we can output it, we can manipulate it, and we can make use of it. So now going back into the console, now that we're referencing that page element with L1 into JavaScript code. We can always type in the L1 and we reference that same object within the L1 itself. Just as we saw within the document object, there's a lot of different properties there. So if we were to list state directory of L1, we could open that object up and we can see all of the contents of there. And as you can see, there's a lot of different properties, values and as well, a lot of different methods that you can look make use of for that element. So each element will have its own event listeners as well. And then you can also access the contents. So the outer HTML, the outer text, you can also get the inner HTML, the text content. You can see what the tag name is. There's a lot of information and where it's located on the page. You can also go to its siblings, it's parents, and navigate through the entire DOM using this element as the starting point. So we see that we've got a value here of textContent. So let's update that property value of textContent for element one. Element one. We use this property name within the object of textContent. And now let's type hello world. And we see that we were able to update and manipulate the content directly on the page using the JavaScript. So when we look at the page element, it says Hello World. In now we go into where the elements are and we see we've got Hello World. But when we look at our source code, we only have hello because the JavaScript has updated the contents of that H1 as the page starts loading. So the same idea that if we had an object and then I'll just give this object value of each one. And then within the H1, we can another object here, and this can be the text content. So just as with JavaScript, if we wanted to update whatever the textContent is of this particular element, we can do that with the JavaScript code as well. So let's clear the terminal. Let's get my object. And we've got an element with the H1. And we'll set up a value for textContent. And just as with any JavaScript object, we can update its property value and reassign the new value. And then when we open up the object, that value has now changed to whatever the new value is that we've assigned to the textContent. So the same idea for the DOM as well. So just as we see with the JavaScript object, the DOM is essentially just one giant object and we can manipulate and we can update the property values. And those changes are only going to be within that particular instance. So it's not going to update any of the source code at all. So it doesn't actually change the HTML code. It just changes that particular instance of that HTML as it's being output within the browser. So let's remove out that line of code that changes it to Hello. World will just type the L one because that's still referencing that same element object. And then assigning the new value for textContent of hello world. And as we do that, that's going to update what we visually see within the page. Notice it hasn't updated any of the actual HTML code. It just within this particular instance. When I refresh the page, the page loads once again from the HTML file and it writes out the code as indicated within the HTML file, and then within the JavaScript as well. So it doesn't update or doesn't stay or doesn't save. So before the next lesson, what I want you to do is to update, create an H1 tag using JavaScript. Select the contents of that H1 tag and then update the contents of that H1 tag with JavaScript and you'll be ready to move on to the next lesson. 5. 4 Page Elements Select ALL: This lesson is going to be all about selecting the peach elements were used the query selector we saw in the last lesson, as well as query selector all. I'm going to also show you how you can select via the class, via ID or via tag. And you can select multiple items and update the content contained within those items, all done via JavaScript. So we've got 1, 2, 3 initially, but we're selecting these page elements and we're making updates to them using JavaScript code. And that's what we're going to be covering in this lesson. And then also how we can iterate through the entire list of divs and append it with the index value that we see with item on the page. So that means that even if we were to add more items, we would have them unique as we're updating and adding values to the end of the text content of the individual elements that are all of the divs on the page. This lesson, we're going to be doing more with the DOM, interacting with the DOM. So just as an example of what can be done. So similar to how whenever we've got a style sheet and we want to select a bunch of elements that are matching. So let's create some divs. And then for these divs, so I'm just going to have different values within the devs. And we'll just put them on the page. And when we refresh it, if we were to only select the div itself and assign a property value to that div. So let's say we wanted to do a background color value and sign it to red. It's going to assign to all of the matching elements. So that's not going to be the case when we use querySelector because it's only going to allow us to select the first matching element. So if we were to use the query selector and select the first div, and we'll just call it div 1. And then using the document and then query selector, selecting the element that matches this selection. And then we'll console log out the contents of DIV1 and that's going to be contained within the text content property. So we only see that we only get the one returned. Whereas when we're used in the styling, we're able to select all of the matching elements. So with JavaScript as well, you are able to make and select multiple elements. So I'll just call this dibs and we'll use the document. And this time it's to a query selector. We're using query selector all. So that will allow us to use that same selector in order to make a selection of all of the divs. And what's going to get output is not going to just be the one div. It's going to be what's known as a node list. And it's going to list out all of the depths. So if we want to select the text content from these divs, that means that we'd have to loop through that node list. So let's do that. That we've got this node list similar to an array. It's got a length, and it allows you to loop through each one of those entries. And then this can be referenced just as div. I'm using the arrow format. And then within the console, let's logout what we get returned back for the divs. So that allows us to select all the divs with the query selector. All we get them listed in the console with a console log. And then we use the forEach to loop through each one of those. And then we're outputting the element that is matching to the div. So we can also get the textContent as well. And we can see that and that will output the textContent of each one of those elements. So similar to where we make the selection, we can also select multiple items using the query selector. All now there's other ways to make selection of those elements. So let's say for instance, there was a few that had a class of red. And there's only two that have a class of red. If one maybe has an ID of I'll just give it an ID of two. And I'll just do a format of the code so it's a little bit easier to read. So with styling, we know that if want to select a particular element by a class, we use the dot. And that will select the elements that have the matching class. So we indicate the class with the prefix of a dot. And we can do the same thing with JavaScript, where we select the element. So I'm going to select multiple elements and using the document. So if I use query selector and I select the element with a class of red, so that's dark. Red, will output that element into the console. And the reason I pluralize that is because eventually we might want to use query selector all because it's a class and there's always a possibility of more than one. So we can select all of the matching elements. So right now we just see that this last one with a value of one, I'm going to comment out all these other console messages so that there's not too much going on within the console. And we can see that we selected the first one. So this was the first matching element. It had a class of red. It's the one with the context of one as the first one on the pH. So if we were to update this to query selector, all we would select and we would get that node list. And that way we can loop through and we can output each one individually. Now also, you might notice that we've selected a number of elements and there's been different ways that we've selected these elements. So when we do the div one or if we were to do, we'll just call it l one. And we're just going to use querySelector. And now we've got L1. And this is actually going to match to the same element within the node list. So it's going to match that same first element. So if we were to use the index value just as an array, we would still be pulling up and we're still getting that same page element. So what happens if we update one of those elements? So if we update L1 and we do the textContent and set the value of that text content as l one. What's going to happen is that, that content gets updated to L1. So what happens if we do the same, but we use the L's using the index value referencing that first item that's matching. And here we're gonna put an asset the end instead of one. So what do you think the value of that element is going to be? What do you think that text that's going to be within that element? If you said L's with an S, so ls, then you are correct because that's going to be the one that's matching. That was the one that was found. So the last statement is going to be the one that's going to propagate. So what happened here is that JavaScript, so first selected the div, then it's selected all of the divs into a node list. Then it selected that first element that match the class of red, selected all the elements that match the class of red, and it set them up within objects. And in javascript, objects are referencing a memory location. So even though we changed the object using this value, this selection, within this object, this is going to be the same path. So it's essentially going to just be updating and overriding that existing path of L1 textContent. So over here, if we were to log this out into the console, we would find that this now has that new updated content. And I shall just, all right, Hello World in there so that we can see that content now how it's been updated and it's been reassigned. So we're outputting it into the console. And we can see that L1 changed as it's referencing that same memory location. So here's gotta keep that in mind with objects that once you, you might have multiple paths to select that same location, but it's always going to be referencing just that one instance at that value. So that textContent will change even though that you're accessing it in a number of different ways. And the same idea for if you were to access it using the document object. So if you were to take the document and take the body and then update the text content of that element within the body. So you've got a number of deaths, there's a number of children. So that gives you all of the children. And let's just put it here. So we want to select the skin to be with an index value from it. It's going to be an index value of one, is going to be selecting that first div. So outputting it into the code if we do textContent via body. So again, referencing that same location and now it's updating within a numb. There's, now this is another path to get to that same textContent to one last selection. And this one is going to be selecting by the ID. So just as if we were to select it and use that ID within the style sheet. We can select the element using the ID. And with ideas, you should only have one per page. So this is a unique value. So most of the time you can use the query selector, and this is going to just be by elements and I'll give it a value of id. So using the ID, we prefix it with the hash and then the ID value that we're trying to make the selection from. And this will allow us to select that element ID. And we can get the text content and we can set it new ID and output it. And we can select it and make updates to that page element. So those are the three ways that you can make using selectors by using the ID, by using the class, or by using the page, the element tag. And you can select elements in a number of ways using either the query selector if you want to just return back the first matching result, or if you want to use the query selector all and return back all of the descendants of the node that match the selectors. And then you can loop through them and iterate through them. Getting the content tend, accessing the various properties of those elements. So let's move this line of code, the statement down to the bottom. And as we loop through, we're going to be selecting each div, getting the textContent. And I'm also going to pull out the index value as we're iterating through so that I can update the content using the index value. So just adding to it. And I'm going to use the back ticks there for the template literals and updating, adding the value of the index. Let's just do some brackets around there so it stands out. So as we loop through each one of the items there were outputting the index, we're appending the page element textContent with the index value of what we see within the JavaScript. So that's overriding. And of course, we also have all that overriding of the content within this lesson as well. 6. 5 Page Elements Event Listener: In this lesson, we're going to be adding event listeners to multiple elements. And we're going to be tracking how many times each one of the elements is clicked. So we start out with several divs. And we can't because this code is going to be dynamic, we can add multiple divs to the list. As long as they're divs, they're gonna get picked up by the JavaScript as we're doing the query selector all and looping through adding event listeners to each one of them. So as they get clicked, we're tracking each one individually to what the number and how many times it has been clicked to make the page elements interactive. So adding an event listener to them, we need to select the element first. So let's go ahead and we're going to select that first div. So that will be our first element that we want to make clickable and using the document and query selector, Let's select that first matching element. And we can just use the div. So this could be a first matching element. Save it, and let's refresh. And usually I like to type into the console just to make sure that I've selected the right element. So once that element has been selected, we can add an event listener to the element. And then that listener that we're going to listen for is going to be the click event. There's a number of other mouse events and there's a whole bunch of different events for each element that can be attached. And what happens whenever the event gets triggered. So for instance, that element gets clicked. We can run a function. So you can have an anonymous function directly within the event listener, or you can link to a function that will, I'll just call it button clicker, and that will pass over the event object as well. So we'll select the other divs to show you the different ways that you can attach the event listener. So whenever it gets clicked, and we're going to type into the console log clicked. And here we can tonsil log. Again, try out, refresh the page, see what happens. So whenever I click that first div, we get the clicked being fired off and show it in the console. So that means it's running this code that's attached here. I'm actually going to update this to all of the elements instead of query selector, Let's do a query selector all and attach the event listener to the first one. So refresh. And we've got the event listener on the first one. And I'll attach the other event listener to the second item. And this one we're just going to use the button clicker function. So it's going to fire off the button clicker function on two and on one, we've got this event being fired off. Now of course, if you wanted to, you could attach event listeners to all of the elements. So using the foreach. And as you loop through each one of the elements, you could select it and add an EventListener. So referencing the element itself, being an event listener, and add the click event. And then this can go to the button click or function. So now we've got two events on the first one to events on the second one, and we've got only one event on the third one firing off. So you can add multiple event listeners to the page elements. And these are just simple triggers that are going to run code whenever this event gets triggered. Now with the event listeners, you can also remove event listeners. So with ALS, one, you can use the remove and remove a listener. You would set it to click and button clicker is the event listener that we want to remove from that particular element. So let's refresh. And that actually should be l is one. So we throw an error there. So refresh. So now that's that one is only going to have the one event. Number 1 still has multiple events. And then once we loop through for each, we're attaching a new set of event listeners to it. And there's also a number of options and properties that you can add to the EventListener. But essentially we can use the event listeners to trigger, to run some of the code. And if you are attaching it to a bunch of elements that you can use the forEach to loop through each one of the elements. So what I'm gonna do is I'm actually going to comment out the part of the code and we still will need that one function, the button clicker function. I usually like to have my event listeners at the top of the page and top of the JavaScript, and then adding in the function there down at the bottom. So let's try it out and it should all be working. It loop through, we're passing in the event object. So what the event object is that's being referenced with the value of E. So this automatically gets passed in if you have a function here. And as we saw on the individual event listener, when we've got the anonymous function, we've got the value of e here as well. So with E, you get the element and we get the content that triggered that event. So we've got the screen location of the mouse event that this was a click. And we also get the target, and that's the element that actually initiated that particular event to fire off. So if we were to type II target that event to fire off within the function. And that's how we can actually distinguish between each one of them. Because now we're returning back each one of the elements on the page using the E target and get the content that's contained within each one variable reference that object. And now we can tie to that element object using ELE. So we can take ELE, can get the text content, assign a new value to it, just assign a value of 0 to it. So as I click them, each element gets output to the console. As we're looping through each one of the elements. We'll take the textContent and we'll just set a value of 0 to it. So now when we refresh, we get the value of the text content and output that into the console. So when we click it, we get the value of that element and I can get rid of this event target element. So what we can also do is we can set a value depending on what the textContent is for that element. And then we can take the value, turn it into a number, and then we can increment it. So what's going to happen now? It's just going to add one to that element. So even those, these are strings, you can force it into a number data type with JavaScript Number method. So now we're updating depending on what element we're clicking. We're just tracking that data and that value within the element textContent. Now because these are objects, you can also add in values within them so they don't have to be predefined property values we can create our own. So I'm going to set up L dot val, and I'm going to set this to 0. And it's still using the textContent. Type out, clicked as the textContent, and then we just need to update this current value. So instead of getting the textContent of the element, we want to get the value of Val eight this to Vout. Every time we update, we can update the value of Val to whatever we've got now as the new value of Val. So let's see what happens. So now within the console, we're getting how many times each one of these elements was clicked. So let's finish this up by updating the text content of that element with whatever the value of Val is so that the user can actually see something is changing and we don't have to just have one number there. So set the text content. And I'm going to use the back ticks for the template literals, then whatever we've got for the value of l. So that will output different values there as they get clicked. So keeping account, and this is a better way to keep the account in the background of the object so that visually the user just sees the data that you want output onto the page. So this is a really useful feature within objects that you can add additional new properties to them and then use those properties when you're referencing that object content in your code. Update this. I'm going to just set them all to 0 and test it out one more time just to make sure that everything is working properly. So the exercise for this lesson is to create some elements on the page, select them with your JavaScript code, and then add event listeners to them. You can add an event listener, a click event listener, and then update the textContent of that element. There's also a way to create a shorter version of this, where we're just getting the target and updating the value itself from the target. So we can also simplify this code. I know that if you've Val a couple times, but we can remove out the assignment and the creation of the val within the button clicker function. Clean up the code only using the element Val value and incrementing that the value. And then using the element of val object, we can increment the clicks like that. So it just simplifies some of the code. Whenever you are writing the code, try to simplify it and make it as readable as possible. So once you've finished this project, you're ready to move on to the next lesson. 7. 6 Input Values from Page Elements: So this is going to be exciting lesson because we're gonna be using JavaScript to create some page elements. So we see within the HTML code, all we have is the one element with a class of output. And on the page itself, we have a number of elements on the page. So we've got one, we've got a div up here that's got the content of the message. We've got an input element, and then we've got a button. And this button is actually interactive. So when the button gets clicked, it updates the contents of that message area to whatever was within that input field. So that's what we're going to be creating. And this is all done with JavaScript, where we're going to be creating the elements and we're going to be adding event listeners, updating the contents of those elements, appending it to the main container page. So all coming up in this lesson, let's get started. We need some input fields on the page, and we also need an area where we can output some content. So update the HTML code. And I'm just going to have one div and I'll call that output. And then within this div, this is where we can set up our page elements and add in the inputField a button that will have an event listener and then also an output message area. And we want to create all of these elements dynamically using JavaScript code. So first off, let's select our main container. Using the query selector. We're going to select the element with a class of output. So this is our only main page element on the page. And just make sure that we do have it properly. So within output, we're going to add some new elements to the page. And the elements that we want to create as an input field of message areas such as another div, where we can add some text and as well as a button. So with JavaScript, just as we can select the page elements, we can also create page elements. And what I'm gonna do is I'll just create a brand new page element. And this can be my input field. I'll just give it a name of my input. And so it using document. And the method is create element. So it allows us to create element. We have to specify what type of element we want to create. So you want to create an input field. And then what we wanna do is we want to add this newly created element to the page. So the element is created, it exists, but there's no context to it. It's not visible on the page yet. So that means that we need to use a separate function to append that input element to whatever contain we Rwanda use. And in this case we want to append it to output. So we can take output and using the append method. So there's actually two methods. There's append and append child, and I'll show you what the differences. So with append, that would just need to specify the object that we want to append to output. And now we see we've got that new input field added to the page and it's appended to output. So you can also get a callback value. So this is just going to be the we'll do Val one. And then we'll console log the value of Val one. And what we get is undefined because with append, There's no callback functions. So it's simply does that one action where it inserts the node after the specified child node. If you use append child, it's actually going to return back that appended element. So it's going to return it back as Val one. And of course we already have it, my input. So we're already referencing it within another format. So we don't necessarily need to use append a child unless we want to return back a value of the appended input. So I'm going to just turn this back into append comment-out, the append child, and we'll append the contents to the page. So we also want to do a little bit more where we want to add content into the input. So we also want to add some attributes and properties to the input. So we can do that as well. So if we want to select and add a value to input, so I'll just type hello there. So that's their value that gets added to the input. So we're always able to, just as we saw in the last lesson, using the variable name to reference that particular object on the page. So everything that we did before, we can update and we can add that. So let's add a few other page elements. So we also needed a message area. So let's call this my message and create element. And the element that we're creating is going to be a div. And once again, we're going to be appending and adding that element to that page to output. So it's adding it to the main container. So we don't have any content within the my message. So my message, and this is just a regular div, so we can have some textContent and for now output the contents of message. So we've got message there. And also notice that the order that it gets added to the page depends on when you make that statement within your JavaScript code. So if you want the my message first, then do that before the appending the input. You also have an option to prepend. And just as the name implies, that will add it above so that existing content. So when you open up your elements, an output, you're going to have the message above the input because we're using prepend. But my preference is always to just use, for consistency's sake, just use the append and makes sure that I'm sending the statements within the correct order that I want to use them. Now we also noticed that there is some repetition within the crate element. So that means that best practices would be just to create a function, to create the element. So creating the elements. And then we can, within the function, we can have the various arguments that we need for the element. So this can be elements type and this can be element parent. So that's the one that we want to append it to. And we'll just move that content and the create elements. And then we'll return back the element that we just created. So const L and create elements, and we're going to dynamically create the element type. So just update that code and then we're going to be appending it. So we're already passing in that object reference. So we're appending the newly-created element to that content. So now we can simplify some of our code. And instead of having to send it over, the element type is going to be an input and the element parent is going to be the output object. So you don't quote around it because it's not a string, we're referencing that mean object. And then for this one, we want to use the create element. And in this case we're going to create a div. And what this is gonna do is it's going to simplify some of our code. So we can actually comment this out and we can remove it if we don't need it. So what happened here is we actually did the exact same thing. We don't really see much of a change here. And the only thing that we need to change is the order that we're outputting the content. And so we've got the message area, we've got an input, and we needed one last item, and that's going to be the button. So I'll just give it a name of my button. And the type of element is going to be a button. And again, appending it to the output. And because we've got a return in the crate element function, it's returning that newly created object that we can then reference with the value fields here. So that means that we can also assign to my button some textContent to it. And that will just say click me. So there's our message area, There's our input, and there's our Click Me. So now we need to create the actions to make this project interactive. So for my button, we want to add an event listener. And the event that we're adding is going to be a click event. So whenever the element, the button gets clicked and we want to fire off this event. And what we wanna do is we want to get the contents of the input. So let's set it up as a temporary variable first. So my input and getting the value. So just as we set the value, we can get the value here. So that will now have that new value. And I want to actually clear out the existing value. So just set the value to be blank. And then we want to take whatever that input value is and update the my message. So my message and text content of my message will now be whatever's contained within the temp. So let's see what happens. So now we can update and we can add the new content, newly constructed content, into the message area. And we can see that it's also updating within the elements source there, that it's updating to whatever value we've added in there. And you can even simplify this even more, where you can just simply skip that one line of code. We're setting a variable value to temp. And we can just reassign whatever the value is to be clear. And actually once we clear it out, we have to do it after we assign the value of message to whatever the input value is within the message area. So once we've done that, we can easily add messages to the page content. And if it's blank, it will just go blank there. So the exercise for this lesson is to do and create your own version of this application and create the elements on the fly with the JavaScript code. So create one main container element that you can select with your JavaScript code. Create all the other elements using JavaScript create element function, and then update the values of those elements and add an event listener to the button. So make it interactive and update the message area within the webpage elements. 8. 7 RequestAnimationFrame: In this lesson, we're going to be exploring the animation frame. So we've created a quick little project where we've got a square within a main container. You can click it. That's going to start the animation. And we've got the square moving off the sides when it clicks it again, then we run the cancel up the animation frame. So this was, this lesson is designed to illustrate the request animation frame and how you can create some smooth animations by manipulating the DOM page elements. In this lesson, we're going to be looking at the request animation frame. So go ahead and set up your HTML file container with the HTML tags. So HTML head title, adding in some style there I've added in a div element with a class of outputs, we can select that. And then as the source for the file, I'm going to use the EX five dot dot js file. So we'll save that and then create that file within the same folder directory and save that. And the first thing we wanna do is we want to select the output area. So let's create an object. And using the document query selector, we're going to select the element with a class of output. So that will allow us to select that mean element. Let's also apply some styling to that element. So take the output class and set a position of absolute for it and left 0. Or actually we can do left ten picks, top 50 picks, and set a width of 50 pix, height of 50 pics. So let's sue for gutter element there on the page. And then also add in a background color for it so that it stands out. And it will just make it a red square on the page. So there's our red square. And we want to kick off an animation when we click the square. And then we want to remove the animation frame. And what they animation frame does is it allows us to create a smooth animation of repetitive tasks. So within the browser, so the animation and request the browser to call an update the animation before the next repeat. So we're going to set that up. So take the output out an event listener. The event that we're listening for is going to be a click. And once it gets clicked, then we're going to either stop or start the animation frame. So adding in a global object, I'll call it game. So this will give us a place where we can add in the animation frame. And in order to cancel the animation, then you need to reference it by the object name. So right now I'm just going to set it up as null. And then when we click it, we're going to start the animation. And I'm also going to have a value of in play. Right now we'll set that to false. So if it's clicked and a game and play is false, that means that we want the animation to start. And that's what we're going to request the animation frame and added into the game object. So under the game, any object and use the window, request animation frame. And the function that we're going to be animating would just be the mover function. So function mover. And this is where we're going to request the animation frame as well. So this will keep the animation going. As whenever we call the animation, we'll do all of the animations and then we're going to request the animation once again. So within the animation, what we're going to be doing is we'll just update the position of the element. So for the game position, we'll set it up as 0. And I'm actually also going to update this position to be left as 0. So once we start the animation, we're going to position the box, whatever we've got for the x value. So let's take that x value and we're going to update it by five. And we can also split serve a speed to be completely dynamic here. So take the value of game X and then we'll add to it whatever the game speed has. Let's reposition the mean output object. So updating its style. And the style property for left is going to set to gain x plus pick. So once we click it, the animation will start. So we also need a way to stop the animation. And that means that if we click it again, we want to cancel the animation. So the way to cancel the animation frame is we just need to reference it by the ID so we can do window cancel animation frame. And then this is where we need to reference the animation object that we want to cancel. So it goes within the perimeters there. We're going to also take the game in play. And we'll set the game in play to be false because it's not going to be moving. And here the game and players can be true. So let's see how that works. And let me double-check there what the value of game is. So right now, the game in play is true. So we should have been able to click it and cancel the animation frame. So let's try that one more time. So when we click it, that actually cancels the animation frame. So also let's make some updates to this, where we're going to check to see if the value of Xs off of the screen. So we want to select a main container so for the body object. And I'm going to add in another div there to wrap it. So we can use this as the main container. And we can get some properties from the container by default within JavaScript. So let me set the boundaries for, for this. And we'll position at relative. I'm gonna set a width of 80 percent to it border. And a black border will center the entire object using auto. And then overflow will be hidden. And also let's set a height for it. So there's our red object, we click it, it starts. So I don't actually want it to run off of the container. So we can check to see if the value of x is larger than. And in order to get the container, let's select that main container object. And I'll just call it container. And we'll select element with a class of container. And so for any element on the page, we can actually get some properties that are contained with them. So if we were to select the object and if we do dot, we can get some of the properties contained for it. So one of them is we can get the offset height, offset left. So that's the position where the containers located. Offset parent opposite top offset width. So we can get the offset width of the container. So it tells us how large the container is. The offset left will tell us where it's located on the page. And then if we were to adjust the size, it's actually going to change that value. So we know that this container is going to be the right side of the container, is going to be the 1, 0, 0, 0, 0, 104 plus the 145 for the original left side was, now it's going to be at 1, 0, 6. So the width of the container is also changing and fluctuating. So we need to always be able to recalculate where this endpoint, if so, we don't want the box traveling off the endpoint. So we can do a check to see if the game X is equal to the values of the offset container left plus offset container width. And if it is, then we want to reverse direction. So we're going to take the game speed and multiply it by negative one. So let's see what happens. So now, when it reaches the end, it should actually bounced back. And I get one a little bit too far there. So maybe some other calculations might be slightly off. We also have to take into account the size of the box as well. So also, let's account for some of the other properties. So we want it to, whenever it's to the left here, to bounce back. And there is actually a better way to get the container size and position is using the container. And we can get the bounding client rectangle of that container. So it's going to return back some dimensions. And then we can use these dimensions to calculate where we've got for the right position of the container. We've also got the left position of the containers. We can use these values. So what I'm gonna do is I'm just gonna do a block comment. And we'll get the dimensions using the bout get bounding client rectangle. And so now within that condition, we can use these dimensions and update the game itself. So change the game speed. And we're actually going to do this. We're going to reposition x with the game speed just before we do the conditions. And then if it does pass over the dimensions, so if it passes over DEM, left. So again, x is larger than Dim x. Then what we wanna do is we want to multiply it by the game speed. So let's see what happens. And here we'll logout the game X value because it looks like we need to do some quick debugging. So we've got to find out why it's bouncing back. So we'll get those two values and we'll see what happened there. So once it hit, so the game X was at 110 and the game dimension X was at 110. But we want to look for the dimension for rate site. So that was the wrong value there to be looking at. And this time it should bounce off of the right site. And the reason that it went too far is that we're using the right, which isn't accounting because the item is actually element is actually nested within the parent. So that's where we can use the actual width of the main container to bounce it. And then we're also going to account for bouncing it off the other site. So do the same thing, but we're going to check to see if x is less than 0. And if it is, then we're going to change directions for it. So let's see how that works. So now it should hit the end here, bounced back, and then hit that end and bounce back. So we need to still make one little adjustment here. And that's to account for the width of the element. So once we've added that in, then we should be able to bounce nice and neatly off the sides. And then when we click it, we're stopping the animation frame. When we click it again, it's starting the animation frame. So the animation frame, essentially what it does is it allows us to create these smooth looking animations with elements on the page and then applying different positions. We can have that within where we've got the animation running. So running calling to the mover function. And then the mover function is the one that's actually adjusting the position of the element on the page. And you can also use the offset position of the container and the offset width within the calculations as needed as well. So you could use the get bounding client rectangle if you need the left side, the right side. But if you don't need those, that you could just have gone with the offset of the width to determine where the end is of the main container. I'm going to get rid of these console logs as we don't need them. And so now it's up to you. Try out the animation frame, create a quick animation, move the element across the page and also have a way to cancel the animation by clicking. Or you can even add in a button to stop and start the animations. So go ahead and try it out. 9. 0 JavaScript Starter Projects DOM Simple Projects to Start Coding: This section is going to have some simple starter projects to start coding with JavaScript and interacting with the DOM. So we've got a list builder. So what the lists builder does is it allows you to add items to the list. The list actually gets stored within local storage. So what that means is that if you reload the page that lists is still there, you also have the ability to edit the list so you can edit items within the list, update them, save them. And then once again, if you refresh that list, gets state that list stays as is, because this is being stored to the local storage. You also have an option to delete items from the list, and then when you refresh it, those items are now gone as well from the storage list, there's another project where we just call it the staar reading project. So this is developing a component that will allow you to provide star rating components. So this component is presented within the HTML and it just going to be one simple element. And then the JavaScript is going to do everything else behind the scenes. So you can add as many of these components as you want, and they're all going to work independently of each other and providing you the ability to hover over to rank and provide a star rating. And then also the feedback on the reading that you've provided. Next up is the coin toss. So this is a simple game where you come in and you can start the game. It tells you to either select heads or tails. Then you make a selection of either heads or tails within the red or the blue buttons. So you click heads. So you picked heads, correct, it was heads. So currently my score is one and my streak is one. So let's try another round and got that one correct as well. And then now I've got that wrong. I picked heads again and it was tails. So I lost. So my streak started again. So that's just a simple way to provide scoring within a game that you are creating using JavaScript. Also have a typing game. So this game, you come in, you hit Start, and it asks you to type the content there. So once you type out the content, so you're supposed to type out exactly as you see it. So I made one mistake there with the different word when I hit done. It tells me the time that it took me to type the code, the words, as well as provides me a score. And how many they got right out of how many were available for us. So three out of four. And then you can start doing the typing. Again. You can load in various phrases and customize the game as needed. We also have an element path mover. So what this does is this is going to be a demonstration of how you can move an element on the page so it's registering all of the key presses. And then when you're ready to do the movement, you can then kickoff the movement by pressing the Enter key. So it will run through all of these commands and do all of the movement according to what we've already inputted using the arrow keys from the keyboard. So as pressing arrow keys and adding in different movements within the list. And once it's running and running through the motions, then it will add them in and apply them to the page element on the screen. Following that, we have a combo game. So we get into the game where we have the click button to start the game, guessed the combo, adjust the dials. The objective is to guess the secret number that's hidden behind the dials. We click Check answer. If we got it correct, We get a green background color. And if we got it incorrect, then we either get a red or a blue. So the blue means that we've guessed too high and we have to decrease the guess. And red means that we've guessed too low. So we have to find with the combination and with the feedback from the application what the correct value is going to be. And going through. It will also track how many guesses it took us to guess the combination. And then once we've made a guess on the combination, we can restart the game again. We also have another interactive application to build, and this one is going to be one where we actually have to click that page element as quickly as possible. So we click it to start. And it tells us how many seconds it took in between when we first see it and when we click the page element. So the lower the amount of seconds it takes, the quicker you can click it, the better the score is the game and we can kick off the game and it provides us the feedback there at the bottom. We also have a number guessing game. So we come in here, we've got press the button to start. It asks us to guess a number from 0 to 10, so we enter in our guests. So five was too high. No, we want to go lower. So I just guessed three and it turned out that that was correct. We can restart the game and this will vary. So right now we're doing 0 to 71 and you can update that within the coding, a try a number, and the objective is to try to guess it in as few numbers as possible. And using the feedback that we get from the application, then we're adjusting what our guesses are and the games that are presented within the section, you can take what you learn in this section and customize them to build out your own version of the games. 10. 1 List Maker DOM: Hey, in this lesson, I'm going to show you how you can create an input field at button, add an event listener to the button so that you can add items to the list. And all of the items within the list will have options to edit and delete. So whenever you click these buttons, the event listeners are going to be added. And then we're going to handle the editing and deleting coming up in the next lesson. So this lesson is all about creating this interactive dynamic list, all using JavaScript. So we just have the one page element that has output. And we're going to be constructing all of the new elements, all using JavaScript. So that's coming up in this lesson. Go ahead and open up a brand new file. I'm going to call it list.html. And then we're also going to create the corresponding JavaScript file, and we'll call that list JS. And we're going to link to that file from the list HTML document. So let's go ahead and create a list JS. And this is where our JavaScript code will go for the list HTML. I've also opened up the list HTML in the right-hand side within the browser, and opening up the developer tools so we can interact and see the console content. So what we wanna do in this lesson is to create a list of content. So let's do all of this with JavaScript. Create a mean holder and give this one a class of output. So we have an element to select, and this is where we can add all of the content into going over to the JavaScript code using the document and query selector, select the element with the class of output. And so this is where we're going to output all of that content into. And we want to create a few input fields so where we can actually add content into it. So let's go ahead and create that. And first off, we're gonna create also a function that's going to create my element. And it's going to take in a few parameters, so what the parent element is, and it's also going to get the type. So for the element type and then also the class that we want it to add. So those are the parameters that we're going to use. And this will allow us to create the elements a little bit easier. So let's start by creating the element. So element gets created using the document create element function. And the element that gets created is depending on whatever element type, which is a string value that we're passing into, create my element function. Next up we take the elements and we're going to append the element to the parent. And this should actually be the parent object. And then also for the class list, the elements is expecting a string value for class list. So this is actually class list. And then we're going to do adding whatever the value is for the class string. And then lastly, we just return the element back to the code that invoked the create my element function. So now let's go ahead and we're going to create some input fields as well as a button. So, so this is going to be where we can add to our list and input area to add to the list. So creating that element. And we can just launch it within the create my element function. And where we want to put the element that's going to be within the output object. The element type that we want to create is going to be an input. And the class that we want to add to it is going to be the main class. And then we'll apply some styling to the mean class afterwards. It's also set some attributes to the my input by using the set attribute Method. And the attribute that we want to set is going to be the type. And the type of input is going to be a text input. And let's refresh. So there's our input field. Let's do an inspect on it to make sure that we did add the right attribute. We added the class and it's been added to the output area. So next up, let's create a button using the same function that we have. We're going to add a button element. And this one can also have a class that we're going to create and that will be buttoned class. And then for the attributes. So we're just going to set a value or the text input textContent value for that. And that will add a new user to the list. And this actually should be my button as we've already set my input. So let's update that code. And then now we've got the button where we can. New user. So next up, we want to attach an event listener to the button so that we have an action that we can add to the list. And we also need to create a list as well. So creating another element on the page that we're going to add two output. And this can be our main list container. So appending it to output. The element is going to be an unordered list. And we'll just give it a class of waitlist. And I'll give it a name of my list as well. And we don't need to add any additional items into there, so we just need to be able to reference it as this is where we want to add items into. So let's add an event listener to the, my button. So my button listener that we're going to listen for is going to be a click. Once the element gets clicked, then right now within the console, log out the word click just to make sure our button is working. Let's go back over to console. Click the Add User. So that means that the button is working. So we're able to add items into the list. And we'll create a function, add new user. And so this can just take the username. And we're not going to add additional. You can have other fields as well. So just have the username. And so what this is gonna do is it's going to add to the myList. So it's going to create a new list item. And it's going to be adding it to the parent called MyList. Then the list item, the textContent will be whatever the user name is. And then we can also return back the list item as well. So let's create that brand new list item. And we'll create it within the my button. And as we're returning the new element that we're creating, then we can apply some styling to it if we want as well. So this gives us an option to continue to use that list item. So for the list item itself will pass in to that function, the add user. So all we need is a user name, and we'll get that username from the input content of my input. So whatever the value there is, and this is going to be the user name. So I'll just use the same variable name. And then for my input value, we'll do a condition just to make sure that there is actually a username listed. So make sure that the length is greater than three. And if it is, then we'll add to the list with the list item. So when I click the Add User, now let's add test. So that's going to add content into the list. And what we also want to do once we add the user into the list, we're just going to clear out the value of the input area. And I'll just do the single quotes here for consistency. So that's going to clear out whatever content I have within the current input area. So preventing a lot of duplicates from happening within the list. So this is how you can add new users into the list. So let's also add in some options within the list item. So currently we just have the list items. We can add event listeners to the list item. And then we can also add another container where we're going to hold the content within there. So that can just be a regular div. And we'll create an element which is going to link to the list item as the parent. So this is going to be a div and this is just going to be a main container. So give it a class of container. And then for the div itself, this we're going to add in the textContent of the user. So let's see what that looks like. So initially it doesn't look much different. But when we go into the source code, we've got all of the list items there. And then we've got this div container where we're adding the content. So within that content, then we can have a few different spans. And then these spans can contain the information. So the first span is going to be the one that's going to contain the main information. So this is going to be appended into the div. This is going to be a span element and this is going to be the user. And we'll just give it a class of info. We can easily select it. And so this text content is actually going to sit into span number one. And the reason I'm doing it this way is that this is also going to give us the options within the structure. So we've got the list item, we've got a div where we've got all of the contents contained within that list item. And then we're going to have a series of spans that are going to have different options. So we're going to have the mean span, one, which got the user information. And we'll create a few other spans as well. So we're nesting a few elements within the parent elements. And so this is going to be a span and this is going to have. Class of editor. And the content here is going to be at it. And then we'll do one more span and we'll make these clickable so that they're going to be interactive. And this one will be delete. And this will also be a span. And it'll give it a class of delete. So now whenever we add any new users, we're going to have these items being added. So let's go over to the HTML and apply a little bit of styling here. So once we add them, actually want to just add a user by default when we load for testing purposes. So this will just add in the user automatically. So whenever we refresh. So this way was we're doing the styling. We can see all of the different classes that we've applied. So we've got an editor class, which is going to be the delete. And then we've also got the delete class as well. And then the mean information is contained within the info class. So for infill, let's add in some padding. And the editor is going to have a background color of green and max width of 50 PECS. And delete will have a background color of red. Animals are going to add padding in each one of these. Also for all of the elements. We'll add in the box sizing and do the border-box so that we have the full widths that are available. So now we've got the edit to delete. Let's add in the colors for the text. So edit and delete. And I'm actually going to make the padding little bit bigger and make the font size slightly smaller. To just give them more of a button type effect. As I've added in quite a bit of padding for those. And maybe just shrink the padding down a little bit. So of course you can customize it as needed. So I just wanted to have an element that has this kind of button look and feel to it. We might also want to do a margin around it. And we don't need top and bottom margin, so we just need left and right margin. So applies a little bit of spacing between the buttons and make, it's actually slightly smaller stone. So there we go. So now we've got the edit and delete. And then I'm going to still shrink this down, make some final adjustments here. So next time, whenever we add any content. So it's going to have these buttons here. And I think they're a little bit over the end. So we'll resize the padding as well. Otherwise, we'd have to adjust the line heights. So now we've got the buttons with the edit and delete. We can add that listeners to the buttons as well. So let's do that, will make the buttons interactive. So for span two, which is the editor, it's going to add an event listener. The listener is going to listen for a click. Once it gets clicked, that will run the code here. And we'll add another event listener for span number 3 as well. And for now within the console, we'll just put at it. And within the console for span number three will PUT delete. So we're ready to add that functionality coming up in the next lesson. So all of the buttons seem to be working. We're able to add new users. So coming up next, we're going to apply some additional functionality to this list application. 11. 2 Interactive List Items Part 2: In this lesson, we are going to be finalizing the list project that we started in the previous lesson. So this list is a fully interactive list of applied, a little bit of styling. And of course you can customize the styling as needed. So essentially, what this page does is, and what this application's gonna do is it allows us to add new users. So we can add new users to the list. We're also storing them automatically within the local storage. So that's knew where if you refresh the page, the list is still there. You can edit the content of the list and save it and once again, refresh as it's being stored to local storage so that stuff propagates. You can also select the buttons to delete the content, edit the content. So it's a fully interactive list that stores within local storage. And you can add as much content as you want. And then also interact with the content in the list. You, where we left off from the last one, where we had a bunch of items that we could add to the list. And then these are interactive with the edit and the delete buttons. So we want to add in the ability to do the edit on that particular field. So let's go ahead and set up the ability to edit the field. So what we wanna do is we're going to transform this into an editable field. And then also have the ability, once it gets clicked off, that we're going to save that field with the new edit. So once we click at it, we want to add to span one, that editable field. So let's apply that styling. And for span one, we'll do the back ground or would apply some styling to it. Style and back ground color. So it will set the background color to yellow. So it will show that it's interactive. And also let's apply that attribute. So for span, one set attribute, and the attribute that we're going to be setting is going to be the content editable attribute. And we're going to set that to true. So that will allow us to interact with that element content like this. And we're also going to update the Edit button. So for span to the textContent will now say Save. So once we edit and once we're done with the editing, we want to click Save. So we want to check to see whenever this button is clicked, if it says edit or if it says Save. So we're do a check to see if the textContent of span two is equal to edit. And if it is, then we'll do the below. And if it's not, and that means it's going to be something else like Save. Then what we're gonna do is we'll do the opposite. So we'll update all of the same parameters, but we'll just turn this back to be white. Content editable will be false. And save, we'll turn back to edit. So that will simulate saving that updated content that we've just added it. And actually that should be uppercase. So now we can update it, hit Save, and now we can no longer edit and update it. So that gives us ability that any of the content that we have within the list we can save and we can do the edits on that element. And then we also have an option for delete. So let's update that functionality where we want to be able to delete those elements and set about putting to the console, we want to delete. We just want to simply select that mean parent element and then do the delete on that element. So what we wanna do is actually we want to select the parent element that we want to delete, which is going to be the list item. So let's select that object. So selecting the closest list item. So using span three, or actually we already have the main parent list item listed here. So all we need to do is we can select the list item. We can select the list item and then just do a remove of that element. So let's see what happens. So we're able to delete the elements. And I'm just adding in some random content there. Let's take a look at the list. So anyone that I select Delete on, it's going to remove it. I also have the option to edit it and save it. And actually that's overlapping. So let me adjust some of the styling here. So for the list items. So let's try 30. And so that looks a little bit better that we're not going to be overlapping that background colors on them. So we'll add a few other things that now whenever I refresh it, my list disappears. So I want to add in the local storage so that I can store the items of the list. So even if we refresh the browser, that list will still be there and it'll be saved as it is. So creating a object that we can save the list too. So this will be the current list, which will be an array. And that essentially we will mimic the content that we have on the peach. And then whenever we're adding a new user, we're going to add that item into the current list. And then eventually what we wanna do is we want to save that current lists whenever we do some updates to it and save that into the local storage so that we can always retrieve the contents of that list item. So let's create and get the local storage. We'll just call it Get Data. And using the local storage objects, we're going to get an item. And the item that we're going to get is going to be the current list. So right now there's not gonna be anything stored within the current list. But every time we're going to add a new item, we're going to add that user. So every time we add a new user, we're going to update that user information to the current list. So using the list, let's push the user name into the current list. And it looks like we're throwing an error. So let's check out what's going on here with the air. And I got to actually set up the variables before we try to use it. So that was the error there. So right now within the current list array, we've just got the one item there. So if we add any other items into the current list, they're gonna get listed there. So right now for the data, we don't have anything loading within the get data. But if we do have something stored within the local storage, then we want to be able to load that information. So let's create a window object and add an event listener to the window object. The event that we're going to be listening for is called a DOM content loaded. So this will fire off whenever the DOM content loads and whenever the page is ready to be interacted with the DOM. And so what we're doing here is we're going to check to see if the DOM content has loaded. And once it's loaded, we'll do a check to see if there's anything in the data. So this is going to be looking for the local data. So if we have within the get data, if we have a list or any content there, then we're going to generate an array from that. And that'll be just a temporary array. So it using the get data value. And that's only if there's something stored in there. You can use JSON parse as they get data's going to be stored at a string value attached to the property name of current list. So if we want to break it back into usable format, we're taking Get Data and we're using JSON parse. So that will allow us to create a array. And then we can loop through each one of the items within the array. And as we iterate through, we can add the users to the list. And maybe we can just call this users or user. So I will add the new item to the list automatically when the dom content loads. So next up, what we wanna do is every time we update the list, every time we update the new users, or every time we do a delete of it, we want to update the array value as well. So that's going to be a function as we're going to call that multiple times. Any updates to our visible list. We also have to make sure it's in sync with the current list array. So updater, I'll just call it updater. We don't have to pass any arguments into it. And so this is going to actually store it to local storage. So it's going to actually save to the local storage. So using the local storage method, we're going to set an item. And the item that we're setting needs to correspond to the current list. So it's using that same string value. So we're setting an item. And then JSON, stringify whatever we currently have for that array that we're using to hold the data. And that array is going to be the Current list array. So a string of firing the current list and receiving that information. So that's going to run whenever we update. So as we add new items, will run the updater for it. And actually we're going to need to do that on Save as well. So run the updater and also on the Delete. So we'll run the updater. And what we wanna do is actually we want to remove this particular value from the array. So we're going to still have to do that as well. So right now it's going to run the updater, but it's not actually going to remove it from the list of items as we're pushing this current username into the list. So we need a way to actually retrieve that user information from that array list if we want the current lists to match with what we visibly see. So there's a number of ways to do that. One of the ways is whenever we're doing the update, we can also select the item from the current list array, remove it with one of the problems there is that if we have a few list items that are going to have the same name, then we try to select it and we might run into some issues. So one of the best ways to do this where we're not gonna have any issues is to pull back all of the items within the list items. And we can do that using the document and query selector all selecting the elements with a class of info. And that will provide us a list of all the list items. And then what we'll do is we'll run through that list. Well, so create a temporary holder array. And then using the my list items object, we can loop through. For each one of those, take out the element object. And for holder, what we'll do is we'll push whatever the current value is of the element text content. And then over here, we'll output the console log the value of Holder and will also log out the, whatever the current list is. So when we click Edit, That's going to give us the full list. So right now they are matching. So what happens if we delete it? I'm going to clear the console. I'm going to add a new user and edit that one. So right now, within the holder list, we've actually got exactly what. We've got output on the page in the list items visible and any changes that we make. Tho those will get shown there. So if we do, do a full listing once again of the content, and we do need to run the updater at that point as well. Whenever we do the Save. So it's actually running when we're doing the update, which we need to do it when we'll do the Save. So that's a little bit of a change there. And now it looks like we're keeping all of these items in the list. So let's do another update of it and hit Save. So our lists are no longer in sync. So once we've saved it, that visible list for holder is the list that we should be using. So what we wanna do is we want to clear out the current list. So we can take the current list and set the length to 0. So that will remove out any items that are currently within the list. And then as we loop through, we can add it into the holder. So that way, it's going to be in sync with what we've got displayed on the page. So now if I do some deletes and if I refresh it, and we still need to run the updater on the Delete on as well. So when we do refresh it, we're still adding a new user. So let me get rid of that. And that's why the lists weren't in sync. So when I refresh it, we end up with the two. Let's edit the content. Save it, and edit this content. Save it. Let's refresh the page and we see that we still get the same list that we had. So we're able to see if the list contents. And even if we refresh the page, this content should be saving. So it looks like we still have an issue that right now when we're adding the new user, it's not running the updater, so we need to add and run the updater as well. So whenever we add the new user, we need to run the updater. And that will save the new user list into the list. I'm just testing it out to make sure that it's working. And then at anytime can update these. So you can click it whenever it's yellow. And then hit Save. And that should save the list with whatever order it's currently in. So that's how you can create an interactive list using JavaScript and the DOM. 12. 3 Star Rating Project: In this lesson, we're going to be setting up stars components for your webpage. So bringing in JavaScript library that gives you the ability to create these star components that you can use within your webpage. So they are dependent on some styling for some of the style for these stars. And the rest of it is done with JavaScript. So if you want to bring the component in, all you have to do is create a div class of stars and the JavaScript will take care of the rest. And they do all work independently. Whenever you click it, it tracks the star rating and keeps the stars as orange. Whenever you're hovering over it, the stars will go yellow. So you can always update any one of these readings as they're all working independently. So this is all going to be done with JavaScript. We're going to dynamically build these star containers, all using JavaScript and then create the interaction as well with JavaScript. So adding the ability to create the elements, adding the color out in the yellow color, adding the orange color as the user interacts with the star elements. So that's all coming up in this lesson. Go ahead and open up your editor is create a file, I'm calling mine star dot HTML and filled out the basics for the HTML page. So including having a div where we're going to output and then we're going to link to a JavaScript file. And we'll just call this start JS and then create a brand new file. See that within the same directory as start JS. So that gives us the JavaScript file to work with. And what we wanna do is we want to create a star area within the output. So we can just call this output, or we'll just call it stars with a class of stars. And then we can apply all of the styling to that element. And actually we're going to do it as an unordered list and will generate all of the interactive stars using JavaScript. So this is all you're going to have to include within your HTML code in order to create the star project. And then going over to the JavaScript code. Let's apply and create some elements. So this is going to be the main container using the document query selector. Let's select the element with a class of star. We'll select the main class there where we've got the stars class. And I'm actually going to do this as a div. And the reason is that will also create an output area. So this is just going to be the main holder for the stars. And we're selecting that using the main class. And then within there, I want to add in an output class. So using the document create element and the element that we want to create is going to be a div. And actually going to recreate the function that will just be called create elements. So it will take in the two parameters, element, type and parent. So this will also give us a way to easily add content and then also the class that we want to add into it. So create an elements using the document create element method. And the element that we're creating is whatever type has been passed in for the element class list, add. And we're adding the MyClass value to a string value. And then for the parents, append the element to the parent. And then lastly we return back the element. So that gives us a function that we can create elements. We pass in the parameters. So this is going into main. This is a div. And the class that we're going to be setting up, It's just going to be mean, or we'll just call it actually output. So this is where we can have the output message content and also want to create the unordered list. Stars. Do L for the unordered list, and we'll use the same function to create the unordered list. So being attached to main, it's going to be an unordered list and this is where we're going to generate our stars. So this one can have a class of stars for the parent. So let's see what we've got so far on the page. And we should generate those elements within the elements of stars. And I shall give it a different class there. How about we just do mean for that? So that will add in a class of main for the main unordered list container. So now we have to add in the stars elements, which are all list items. So we want to add in four stars and will loop while x is less than five, increment x by one. So we're gonna add all of the stars with a class of star. So give it a name of star and will create an element that we're going to append to the stars unordered list. And these are all going to be list items. And they'll all have a class of star. And then for the star, will set the text content as it should be innerHTML. And the inner HTML for the star is going to be the character code, the HTML character code for the star. So that gives us the stars there to interact with. And we've added a class of stars. So taking a look at the HTML, so there's our unordered list and star. So let's also apply some styling to it. So it looks more. We'll get rid of the list styling. And so this is going to be contained within stars. The element with a class of stars and unordered lists that are within there. So like setting the list style, type and set that to none. So that will get rid of the bullet points on the unordered list. So you can see we got rid of those and let's remove any default padding that it might have. So that will move it over to the left. The stars themselves will set a font size for those two to m. Let's add in a color for the star. So initially we want it to be a gray color until they're actually clicked. And then update the display to inline block so that the stacked horizontally. So that gives us the stars to interact with. And for the output area. So this is where we can have messaging to the user. So let's do a background color so we can distinguish it. Now, this can also be kind of a grayish color. I'll do the same color as the stars. And then we'll do a border. And of course you can update the styling to suit whatever purposes for the styling to whatever customized needs you need. Also, let's do a margin. So top and bottom. And 0 for left and right. And then some padding of 10 pixels. So we also want to have the option to add some color to the stars. So that will just be the font color of yellow. And then also let's do one for orange. So we can easily add colors to the stars simply by updating and adding and removing classes. So that gives us our output area are stars there. So everything is ready to go with the JavaScript. So we want to make these stars interactive. So depending on the mouse moves, we want to attract the star content. And as we're creating these star elements, this is where we can add the different values to the stars. So let's take the star object. And to the star will setup a value to that object. And that object value is going to be the rating for the star, which will be a value of x plus 1. So we're starting at 0. So that means that each one of these stars, the first one is going to be worth 1, 2, 3, 4, 5. So we know what kind of value for the star there is. So I want to add several event listeners to the star itself. So you can add multiple event listeners in an array type format. So when I have an EventListener for mouse over and mouse out, or we could just write each one of the event listeners. But this way we can capture three event listeners. And using for each, we'll loop through the elements and then apply that listeners accordingly to the element. So for the star, Let's add event listener. And that listener that we're adding is going to be whatever we've got for the element. So that's coming from this array where we've got mouseover, mouse out and mouse-click. And they're all going to trigger the same function, which is the star rate. And then we'll figure out what type of event got triggered, whether it's the click or the mouseover within the star rate function. So let's set that one up as well. So this is just another way to create multiple event listeners on the element. So within the star rate itself, we're passing over the event object. And we can console log the event type. So let's see what happens so far. So whenever we're over out, we're adding in the event type there. And then if we click on it, we're getting those event types. So we're tracking the event types. So all of those event listeners are added to each one of the stars. And then we're able to track those event types and for the star value as well. So E target. And then we can get the star value. So we can pass it that way as we set the start value over here. So we can get the star value so we know which star value is being passed through. So if the, if the elements is going to be a click, then we can update the star value and add a class to it. So we'll track the event type within the E-type value. And that's the same value that we are logging out there. So if the event type equals a click event, and just make sure that we're doing as it's case, sensitive. So clear that and click, so make sure that that's all lowercase there. So if the event type is a click, then that means that we've had a reading for the star. So we want to capture that and set the color for all of the stars within this container object and for the output element. So output and update the inner HTML of this elements. I'm using the back ticks, so the template literals. So you rated this. And then whatever the star value is that we're rating it. And that's going to be this value here. So you rated this whatever star value. So you read it three stars to read it for starters, you rate it five stars. And of course we can apply styling as needed as well. So let's wrap that. And so it now what we wanna do as well as we want to color the stars. So wherever it's been clicked, what we wanna do is we want to set the star value and select all of the star elements and update that value to those Start elements. So this means that we need to go back out to the parent, to the unordered list and select that parent element. So we've got the event target element and we want to get the parent of it. And this is in case we have more than one star, so that it works completely independently on each one of the parent elements. I'm actually going to shrink down the margin. They're a bit as well. And we do need to make one adjustment in order to pick up all of them. And then we'll have to select the output and the main area accordingly. So this is going to contain all of the stars containers. So all of the stars, star containers. And then take star containers. And we're going to loop through each one of the star containers. And for those, we're going to create the elements within them. So now we no longer have a parent for output or for the stars unordered list, but we're only using the stars unordered list there, but we're using the output outside of that. So we need to once again select the parent in order to define the output element. So let's comment this out for a second and select the parent. So this is going to be the E target and selecting the closest unordered list. And then we'll console log the current parent. And I'll get rid of some of these console messages. So we have a little bit less confusion in there. So it looks like we throw an error already that main is not being referenced properly. And that's because we need to attach it to the element and to the element, whatever that parent element is. And I need to update this as well. So using the same variable name. So it looks like we do have two star areas. And let's clear that. So it is selecting whatever the parent is for that element. And if I go over that one, it is selecting the parent properly. So that means that from that parent, we can do an event lists and do a query for output. So output and equal output to the parent element. So using a query selector, select the value of the element with a class of output. And when we look at the source code, the output is actually outside of the unordered list. So we have to go up to the closest parent that has a class of stars. So this will allow us to search within that parent for the output area and then output whatever we've rated the star. So now that's working and we can easily add some more stark components on the page as needed. We're just adding in that one. And they're all going to work independently. So we still need to apply some styling to the stars. And we can do that as well because we know which star has been rated, because we know the value that has been read it. So this is the star value for the rating. And we can loop through and we can update all of the star values with that same yellow class. So let's loop through all of the stars. And we'll select all of the stars. And I'll just call it current stars to avoid any confusion. And then for this one as well, the parent and the query selector, or selecting all of the relevant elements. So we want to select all of the elements with a class of star. So it's a class of star. And then we can loop through all of those relevant elements and apply the color to it. So current stars. And this is only if it's been clicked. So we want to run and do an update of that element for the clicked element. So let's create a function for that. And so whenever it gets clicked, We're update the star value for it. So we'll add a color which is adding the orange to whatever the current stars is. And this is going to require some parameters. So we want to get the current stars, pass that in to the object. So it's passing in the list of whatever the current stars is. We also want to get the E target start value. So we know how many stars we want to color from that list. And let's update those elements with that star color. So current stars for each weightless through each one of the stars and will also track the index value as we're looping through. And if the index value, so we have the value of Val. And let's do a quick one within the console. So that tells us what the current value is. And that's a number. So we can check to see if index is less than the start value. Then we're going to select the current element. That's the star class list. And we'll add the class of orange to it. Otherwise, we're going to remove the class of orange from it. I'll suit that looks like. So if we're hovering over, so we only want the class of orange to stay. We don't want it as we're hovering over. So on, apply some different styling of yellow if we're just hovering over it. So if we're mouse over and I'll move up the selection of all of the current stars. And we only want to add the color if we've got a click. So that will add the orange color if we have a click. And if we want to have that hovering effect where it's changing, we can create another function for that. So the yellow we'll add and remove as the element moves across, we'll pass in those same values and update. The function is going to be almost the same as the odd color. So whatever the current stars is for the value, and that can be yellow. So now as I'm hovering over, it's adding that yellow color to the star. It's only when I click it that the rating actually get supplied and it gets saved. So that's how you can set up a project that's going to track stars and star ratings within your webpage. 13. 4 Coin Toss Game: So in this lesson we're going to create a coin flipping game. So it's going to start by proving the message to the user what they need to do, and then a button to kickoff the start of the game. So this is a gameplay and this is actually the coin. So this is tails, which is blue, and then heads is going to be read with the happy face. So it tells us a message to either select heads or tails. So we make a selection of either heads or tails, whatever we think that coin is going to flip to. If we got it correct, We get the message you picked heads? Correct. Was heads as it went red. And we see that we've got the score of one streak of one. What do we think it's going to be next? So I'm picking heads. You picked heads wrong was tails. So let's try heads again. You picked heads wrong was tails. Here. We've got you picked heads, correct was heads. And we can click multiple times. That will increase our score there. So the objective is to score as high as you can within the game. So that's all coming up within this lesson. Go ahead and open up your editor, create a file called coin dot HTML. Setup the basic HTML structure. And let's link out to a source file. So that source file will also be named coin ab.js. So linking out to a script file. And then within the body of the page elements, given element, that can just be called main. And then we'll select that with the JavaScript and we'll build out the application that's going to be all contained within the element called main. So let's create the coin JS file. And I'm saving that within the same directory, will select the main objects using the document and query selector, selecting the element with a class of main. So this is where our mean gameObject will go. I'm going to open up the application. I'm opening up the application within the browser on the right-hand side. And I've also got the DevTools opened so that we can interact with the console content. So what we wanna do is we want to create a mean game objects. So this a global God object. So this will store the score, which currently would be a value of 0. And then we can comma, separated out. And we'll have another one that will just be called streak. So this will track how many we've gotten right in a row. And then the score will be the mean bedding mechanism for the game. So once the application opens up, what we want is we want to have a button to start the game. So let's create that object and it's going to be the first object that we're going to encounter. So using the document create element and the element that we're creating is going to be a button. And so this will automatically be added into main. So to an append. And we'll append the button object into main. And then for the button, Let's add some text content to the button. And so this will just say start game. So that's our first interactive item, and that's going to be the first item that the user encounters. So we're going to add an event listener to the button. And the event that we're going to be listening for is a click. So once the button gets clicked and we want to start the game, and we can create a function to handle and manage the start the game mechanism so that what this will do is this will take the game score, set it to equal 0. And this will also give us the ability to restart the game as well. So set the streak to 0. So we're setting the main global game object all to 0. And we can just simply add the start game function there within this function. So we get the button and we want to hide the interactive button. So doing this style, and we'll do the display, set the display to none so the buttons no longer visible. So we come into the game, would click Start Game heights the button, and this is where the game kicks off. So we need to still build some of the game content in the game board. So let's go ahead and we're going to create some other elements. So this could be where our main output and communication will be. So creating another element on the page, this element is going to be a div. And then we can use this to communicate with the player. So same thing where we append to the main output or the main container area. And then within output. And actually I'm going to put the output above the button and we'll reuse the button. So we don't necessarily need to have it starting the game, but we can have some other functionality for that button as well. And we'll pick up the event object and then console log out the event target. And whatever we've got for the text content for that target. So that way we can detect what we've got being displayed for the button. So if we're displaying the start game option on the button. We know that we want to start the game. And I'll update this to play a game. So every time that button gets the event gets triggered, we're going to run through that plate game option. So also let's track that mean elements as the event target. And then we'll have a condition for the element. If it's text, content is equal to start game, then that means that this is where we're going to be starting the gameplay. And we're also going to update the button with text content. And this will say flip a coin. And because this is a string, then we need to make sure that we're matching the case here. So it is case sensitive because we're looking for whatever the string value is. So I'm just updating them to capitalize them. And we don't need the hide the button. As this is going to be the next step where we're flipping the coin. So we'll check to see if the textContent is flipped coin. And if it is, this is where we've got the next action for the user. And for now we'll just log out into the console. Flip a coin so that we can make sure that we're tracking the action properly. So going back into the browser, Let's run through the gameplay so far. So we click Start Game and we get flipped coin being displayed there. So not a whole lot happening quite yet. So we can update some of the content within the output area. And let's add some more elements to the page. So this is going to be for the scoring. And this will also be a div. So we'll append that above the output. And so that gives us an area where we can update the score. So create a function to add score. And then this function will interact with the scoring and update the inner HTML. I'm using the back ticks. So those are the key to the left of the one on most keyboards. And so what we wanna do is just output the score values. And we're going to get that from the game objects. We've got the game score and streak score. And that's contained within the game score object. And the streak is going to include the game streak object. So that will track what the current scoring is. So we'll add the score when we start the game. So now we've added the score, and so we also want to add the coin itself, and we're going to append that into the output area. So this is going to be the mean coined object. And then we'll add in a couple of elements within that coin object. So creating the elements, and this can be a div. So this is our mean coin and we're appending it into the output coin. And the parent for the coin is going to be the output. And for the coin itself. Using classless, we're going to add a class of coin as we're going to do the styling for the coin with style sheets. And then for within the coin, we want the two sides of the coin as well. So let's do side a. And that's going to be the document create elements. And that element as well. It can be a div and that's going to be contained within the coin. And then we'll do another one for site B. So we're going to have side a, side B, and then we're going to hide one of the sides when we flip the coin with the button. So we've got a and B and then we want to append within the coin, side a and side B. So we've got the coin as the parent and appending those elements inside. So almost constructed the full HTML interface. So I'm going to be done with JavaScript. So start the game. Let's take a look and see what our element looks like. So we've got, within that output area, we've got a coin, and the coin has the two sides. And then for the sides of the coin, let's add in some text content. So for side a, we'll set the inner HTML of that element. And I'm going to be just using default icon. So we'll do a happy face for the one side and then a sad face for the other side. So using the HTML entity. So we've got a, list it as HTML. So side a is going to have that. And then side B is going to have the sad face. So we've got kind of a heads and tails scenario, and of course you can update the icons as needed. So there's our little icons there that we're going to be adding in. So you see them being displayed. So let's also add to the coin. So we've added a class of coin. So this is for the mean parent elements that we're going to select. The elements that has a class of coin. And we'll make the content inside so text. Or it's actually font size. So make it fairly large. So 3M for the font size. And then for the divs that are contained immediately within the coin. So we'll set a width of 100%, will set a height of 100% as well. So this is some styling to make it look more like a coin. So let's set a default background color. So this can be kind of a grayish color. And we'll update that for each one of the sites. So now they just both get a grayish color. We've got a width of 100%, a height of 100% for both of the divs that are contained within there. Let's also set the border radius to make it more of a coin like feel. So if we set that to 100, 50 percent, that will round that item. And then for the coin itself, will set a default width and a default height of 100 picks looser set widths and heights. Will do a line height of 100 picks such a center, some of the content, text align and we'll center align the text as well. So centering those items. And actually let's make it even bigger. So five AM. So now we've got the thesis on the coin. I think we could even go to six AM. So that gives us kind of that type, coin type feel and effect. Let's also position it relative. Position, relative. And save that. So that will give us the rounded coin effect that we want. And then for the coin divs as well, we'll pursue his position those two absolute. So we can actually set where we want them positioned. So right now it's just one on top of the other. And we can hide one and show one. So we can have the coin flipping and transitioning. So let's select each individual side. So the first div will be the first child of the elements and we can set a back ground color for this one. So, but we do red. So it really stands out. And then the last child can have a blue colors. So this will be the last child. So it will account for both sides. And we don't have to actually apply different styling individually to them. Also, let's set the color to be white of the icons. So now we've got the two sides, and whenever we flip the coin, we can change the coin flip option there. So going back into the JavaScript, a default, I want to hide the whole coin object. So apply style and display of none to the coin so that we don't actually see anything. We start the game and this is where we're going to actually display the coin object. So we start the game. We get a display of block so that we actually see the coin. So currently the score is 0 and the streak is one. So we want to flip the coin, but we want to be able, for the user to be able to guess heads or tails. So I wanted to add in a couple other buttons for the flipping of the coin. So we're going to create a second button and then we're going to hide that one. And this is actually going to be either heads or tails. So whenever the button gets clicked, then we're going to track that to be heads or tails on that event action, allowing the user to be able to apply their guess. So create a, another button. So I'm going to call this one button, one. And this is going to be another button. And the textContent for button one is going to be heads and Button 1, as well as going to track the, play the game. So we're going to be taking whatever value is for the button and it's going to launch that seem tracking. So for now what we're gonna do is we're going to hide. So do a display, none. So the style display none. Because we don't need the second button quite yet. So display that as none. And so instead of flip coin, this will say heads. And then we'll show the other button as well. So heads. And let's update button one. And that will say tails. And as well, we're going to show button one as well. And we'll display block that one to show that on the page. So we click the buttons. And now we've got button one and button two, and we still need to add the buttons to the pH. So let's append the buttons to main. So we'll have two buttons there. Start the game, heads or tails. Let's also add some styling to the buttons. So button. And we'll add a class list, btn. So we can add some styling to the button elements. And we'll add the same class to button one as well. It's apply some styling to the buttons. So within the style sheet, we'll apply some styling to the button. With there's going to be 200 picks. Actually, we're gonna do 50 pix display. It's going to be inline block, so they're right next to each other. So you're gonna have heads and tails. We'll do some margin to it. So there's some spacing between them. Also update the font size to 1.5 e m. So start game. And we'll make them slightly larger as well as the start game. So we've got the option for heads and tails. So they're both going to be triggering the same function. And we're just tracking whatever that function name is. So right now it's tracking as heads and this one's tracking as tails. So it's outputting the textContent there. And then we'll also do a check to see if it's writing tails. So start game heads, tails. So we're tracking both of those events into the JavaScript. And both of these will trigger the flipping of the coin. So let's initiate that action. And this will be another function, coin flipper. And create a function called coin flipper. In order to handle the flipping of the coin, we want to get a random value here. So that will be our random value. And using the math floor. And then math random method and multiply this by two so we get a max value of either 0 or one. So the case is either going to be heads or tails as we're flipping it. And then we'll apply the condition to check to see which one it's landed on. So if it's going to be heads, so if ran value is equal to one, then we're going to have this result. Otherwise, we'll have that result. So it can be either or. And all we need to do is just apply the right styling to the elements. So we've got the two sides of the element. So we can hide one and show one. And we've got side a and side B here tract as a global object. So this one will seek side a and do a display. Or it should be styled display. Display and set that to block. And then for side B will display it as none. So only show one of the sides. And then for this, we'll do a reverse. So just update this to be B, and I'll update that to be a. And here it's just going to have a result. So the result value will just be blank. And then we'll update result. And actually this should be let as we want to reassign the value for result and then return back the result. So here, result is going to be heads. And here a result is going to be tails. And whenever we flip the coin, we're going to return the result back to the user. We can also pass in within the coin flipper, either heads or tails. And this way we can do the actual check to see if it's a match. So I'll do the add scoring. And this is the wind condition. So you could do another function for this if you want as well. So if result is equal to Whatever the value is that we're passing in as an argument, then that means that it's correct. And we want to output to the message area that the user did get this correct and update the score. So taking the game score and applying, adding one to it. And we'll take the games streak and we'll add one to it. And we'll update and add the score before we return it. So we'll just add the score there. And if it's not correct, then we're going to just set the streak to 0. So let's see what happens. So we'll want to bet heads or tails. So we got it correct. Got it correct. And that time it was incorrect. So we want to also apply some message there for the user to know so that they know what actually happened if they got it correct or incorrect. So going into our main area, so we had the div there for the score. We can add in another area here that will provide some messaging to the user. So how about we add that in just underneath where we've got the score to the scoring div. And this will be our message diff. And creating an elements. And this can appear either above or below. It would do it above. And for now, let's apply some content to the message area. And this will just say press button to start game. So there's our messaging. And then this message content can be also updated here. And I'm using the template literals again. Correct? It was. And then whatever we've got for the value for the result. And here I'll just do wrong. Was and then whatever we've actually selected here. You picked val? Correct? Okay, let's see our games. So we've got press button to start game. So that message actually should disappear when we start the game. So let's have that in the start game area as well. So start the game. So select either heads or tails. So heads, you picked heads. Wrong was tails. You picked heads? Correct was heads. And I'm also going to update the background color for heads and tails. So that's more in line with what we've got for the coin itself. So for button one. And as I've created the buttons here, I'm just going to apply the styling. You could also have a clause as well. Style, and this is going to be the background color. So set the background color to red. And the button one style. Let's set it to blue. So it's actually going to be aligned with the buttons. And let's set the color for this block. Actually just going to be white. And then the background can be blocked by default. So start the game. So right now it's on tails. So let's select heads. You picked heads. Ron was tails. You picked heads, correct? Was tails. So either we're doing a blue or the red. So if we keep clicking, if we get them correct, we get a streak. We get a score here that's going to track how many times we've got it right or wrong. Let's also apply some styling to the scoreboard. So within the scoring itself. And we'll do a class list. And this could just be a class of score. So for the font of score. So let's select a nice font family. I'm going to do some impact there. And that was just one that was picked up. And we can do the font size. So there's a number of default fonts there. So just picked one of the random ones there. So the score streak 0. So heads. Let's also update the message area. So I'll add a class to the message as well. So once we create it, take a message and add a class of message to it. So let's take a message and we'll update. The font size, will set the background to be slightly greed. We can also take the full main container and set a margin of auto for it, and then a width of 200 pixels. And actually let's make this slightly larger to 300. And for the message will do a text align, center, align the text content there. So that looks like. And for the buttons, I'm actually gonna do the, whatever the full width is. So it looks a little bit better there. And also for the score will do a text align of center for the scoring as well. And also for the content within the coin. So text-align center for that as well. So that the content gets centered. Margin of auto. So that's centers the whole application. Let's also add a background color. And then so whatever we want as the background color, I'll do it slightly kind of agreed color. And so now we have our message. Select either heads or tails. You picked heads wrong was tails. And actually I'm going to make the font for the message area little bit smaller. So it's not forcing it into go to the next line. What I'm going to add some padding to it. And so there we go. So now we've got the fully functional application. We can pick heads or tails, and then we can track the score and within the streak as well as we get the score being output there. And actually I'm going to do one quick adjustment here that as we're, as we get it wrong, we're going to decrease the score. And you can add additional customizations to the code as needed to improve the gameplay. So go ahead and take what you've learned in this lesson and apply it to your own version of the game. 14. 5 Typing Game Project: E for you in this lesson, it's a typing game. So the objective is to type the word set are going to be displayed here at the top as quickly as possible and as well accurately to the words that are being presented. So you hit Start, you get presented with a phrase. You've got a text area here where you can type into sub, Do you like Java? And if I misspell it, I get a score of 9.793 seconds, score of two out of four. So let's try that one more time. And this is also case sensitive as well. So now we've got a three out of four. And do you like JavaScript and hit Done? And that's going to return back a four out of four. And of course you can update the styling as needed as well. So we'll start by creating a blank HTML file. We'll call it type or dot HTML. And then we're going to link to a JavaScript file by the same name. So saving it as typer JS, and that's going to be the thin, the same folder. And we'll create a few elements on the page. So we do need a text area. So let's select dot. We can give it a name. So this can be called words. And we'll set some styling to it as well. And I'll just call it typer. And then just below it, Let's add a button. So this could be a clickable button. And we'll just have start for now. So we want to select these elements from the page. I'm going to add in some styling to it. So with 100% heights of 200 picks. And then you can adjust these as needed. And for the button, I'll give it a class of button. And of course you can do all of this with JavaScript as well. So just to save some time. So I'm doing a width 100%. And I'll do a font size for the button to be fairly large and add some padding. So there's our start button. And you can also do a background color if you want, and a color of white. So start. And that's going to trigger started the game. So let's select these elements. So first off, the main container. So using the documents and query selector, selecting the element with the class of main. And then we'll select all of the type area. So that's going to be the main text area. So we can select it by its class of typer. So using the documents and querySelector, again, select the element with a class of typer. And there's always various ways to make the selection. And also for the button using querySelector, selecting the element with a class of button. So that will select all of those elements into JavaScript objects. So what we want is we want the game to start with when we click the start. And we also want to have some content to load. So the wording that we want people to be able to type, and this can just be an array. You can have different wording here. Do you like JavaScript? So it can be the first phrase that gets typed. The second phrase that we can type. Fun with, code, and so on. So you could add as many items there within the wording as needed. Also, we want to apply an event listener to the button. So add an event listener. So whenever the button gets clicked, we invoke the function. And for to start out. So this is going to start the game, so it set the inner text. And we're going to check to see if the button text is start. So just as we've done in earlier lessons, so see if the text content is start. And if it, if it is, then that means that we want to start the gameplay. And we'll run a function called plaguing. Else and else will check to see if the button text content is done. And that means that we're wrapping up the game. So if it's done that we want to run this code. So by default, we want to take the type area. So by default we want to take the type area and set the disabled to be true. And when we click start. We want to set the disabled to be false so that we're ready to start typing into it. And once we're done, then we'll take the disabled to be true. So right now we can't type into the text area. So only when we start, then that's when we start the gameplay. So let's create a function to handle the playing of the game. And whenever we start the gameplay that we want to output into the main area, the texts that needs to be typed. So we need to select a random item from the array. So let's get our random text. And using the math floor. And then math random, we multiply by the wording length. So that will give us a random index value from the array. And then we can use that and update the text area with it. And that's the area that we've got four main. So let's add and setup the text content to be equal to. And we've got the value from wording. And then also within the Random, we've got the index value that we can use for it. So it will automatically put the textContent to this value. So we hit Start, and that's showing the textContent. Let's apply bit of styling to main. So main. And we'll do a text align, center align the text, add some padding to the text. Ten picks font size. So make it relatively large for the font size. So that's the words that need to be typed were able to do the typing. I'm going to actually shrink the text area size. And we can actually do it even smaller. So the objective is to type the content just as it's being displayed in the main area. I'll also put a border around it. And I'll update the border color. So take main style border color and set that to be equal to red. So give us a red border when we're octave. And then if the user presses done, then we're going to go back to a white border. And let's update this to be white as well. So just so that it aligns with what we've got for the current colors. So it can be white. So do you like JavaScript and actually make the border a little bit wider there. So right now it's going to go read while we're ready to type. We need to track the start time and we need to also update the button. Instead of seeing that the content is to start, we want to update the button text content to be equal to done, so that we have a way to finish the game. So just equal it to Done. And then that's going to stop the gameplay and we need to do the tracking. So let's pick up the current date and we need to set some object values here for the game. So within the game object, we're going to have a start time. And then also will have an end time as well. Truck the start and end times. And then we'll also have the dot information tract directly within the game. So whenever the play game starts, then let's grab the date, get the current date value. So this is coming from the browser value of the current date. And then for game start, we'll track whatever the date and get time is. So it's going to return back a Unix timestamp. And as we're playing the game, so it's going to have a clock ticker running in the background there. So we also want to have a auction for end game. So whenever we click Done, then we want to end the gameplay. So let's create a function for that. And this is going to calculate the speed that the content was typed up. And we need to also grab the date here as well. And instead of game, start will have game and we'll get the current end time. And we'll calculate our total time. So that's going to be what the values of the game. And subtracting the game start. And that will give us the time in-between. We're going to divide it by a 1000 so we get a value within seconds. Because by default, get time is milliseconds. Let's get the content of the main type area. And then we can compare it to the content of the selected message area. So type area value. And this is actually going to go into user content that they typed. And then we'll have another one for, for the array text that the user has to type. Sorry, now they're just going to be blank strings. So once we start the game, just to go back to here, where we're gonna get the textContent. And we can add in to the game object the array text value. And this is what the user needs to type. Let me just fix the spacing there. And over here where we're ending the play. This is what the user actually typed. So we've got the typed value here from the user as the text area. So what we wanna do is we want to actually do a comparison. We're going to compare the two values and see if the user got them correct. So we'll create a variable value for correct check result. And that can be a function that will check the result. And then we'll output to the user. So let's create a placeholder for that. So check result function. And then also when we end the play that we want to do is we want to provide a message to the user. So we can use that main area as well for the message to the user. And let's update the border of mean first. So set it back to white. And then main inner HTML, and then use the back ticks there you typed at. And here we can include the total time. So the time is whatever the total seconds are. And then we're going to also update the button text content to be start once again. So we can kick off the start process. And the user can have another opportunity to type. And we'll do the checking of the result as well. So do you like JavaScript? And it looks like we threw an error there. So end game is not defined and that actually should be end play. So let's update that. Start again. You typed, and that's how many milliseconds I typed the content in. So next we need to also do a comparison of the two results. So we've got the content within the game user, and then we've also got the content within the game array. And we need to find what the differences between the two. So that's what we can do within the game result. So let's have the value one. And what we're gonna do is we're going to split that content by spaces. And so that will give us the two different words that we have. And value 2. So this is what was supposed to be typed. And then the game user content is what the user actually typed. And we'll check to see which words are correct. So let's create a value for score. Set that to 0. And let's loop through the words. So for each and this is going to be value of the word. And we're taking the content from what was supposed to be typed. And we're going to compare to see if the value of word is equal to the value of Val 2 and then whatever the index value is. So we need to track the index value as well. And this will check to see if the words are correct and will increase the score if the words are correct. And what we'll do is we'll just return back whatever the value of score is. And we'll do that within an object format. Score will return back whatever the value of score is. And we'll also have a value for total. And total will be whatever we've got for Val one length. So it's going to return back an object into correct. And for now we'll just log it, the results of correct. And then we can output that in the message to the user. So let's see how things go. Do you like? We got a score of three, correct? Out of four. So we can add that into the inner HTML as well. So that's the time score is going to be correct. Score out of, and then this is going to be correct total. Let's set the word drop so that we can see all of the syntax on one line. And try that again. Do you like? And let's see what happens if I do like JavaScript. So it took 5.7 to nine seconds, score of three out of four. Let's start it again. And whenever we start it, we need to clear out the existing content that's within the text area. So type area value equals blank. So that way we can replay it. Actually, this should be just done whenever we have start so that the user can actually see what they've typed. And once they get the score for that, I'm going to make the mean score area slightly smaller, so it fits into one line. And so this is how you can create a quick typing game that will check to see the accuracy as well as the time it takes in order to complete the typing. 15. 6 Element Mover Path: So in this lesson, we're setting up a programmable cube where we can move it on the page depending on what the arrow keys are. So the objective is that we've got this red square and we can enter in. So I'm just pressing the keyboard right now. You can see which keys I'm pressing. So I've got the right key of press six times, arrow down once. Let's go down a few more times, right, right, and go up and go left. So these are all of the movements that we want to apply to the cube. So whenever we've written all of the actions that we want it to take, we're ready to start the action process. We just have to print it. Click on the document, press Enter, and now it's going through each one of those actions from the left side and it's applying them to the cube. So it's making the movement of the cube according to what the actions are that we set. So let's bring it back up. Press Enter. So that will bring the cube backup into play. And to the visible objective of this lesson is to create a fun interactive element that you can set the actions to and watch the element move with the element and manipulation, updating the style properties of that main element. In this lesson, we are going to be moving an element within the page. So we're setting up blank HTML file. Got it opened on the right-hand side within the browser, as well as I've got the DevTools opened and the blow for the console. So creating a file, and then we're just going to create a corresponding JavaScript file, which is going to sit within the folder directory. And you can call that mover JS. So this will give us the place where we can interact with the code. So first off, we'll select the main container and then we'll add an element that's gonna move within that main container. So looking for the element with a class of main, and then for the actual elements, I'll just give it a name of L and then using to document. And actually this should be query selector. And this one is actually create element. And the element that we're creating is going to be a div. This div is going to get moved in the page. I'm also going to apply some styling to the element. So let's first append it to main. So append element to main. And then for the elements cross-list, we're going to add a class of element. So going back into the styling for the elements with a class of L, we're going to set the position to be absolute. And then a height and a width. So just do a 100 picks for the box. Well, set up a back ground color and set that to be red. Text. Align, center align the text. And then we'll position it top at 0 pick and left at 0 pick. So there's our red box. And we're going to position that within main. I'm going to add one more elements with a class of output. So this will output some messaging to the user. And I'll also select that within our JavaScript so that we can interact with that object. So output, selecting the element with a class of output. So that could give us an interaction area there. So we want to add an event listener. The event that we're listening for is going to be on the any of the document object. So as long as the document is selected, we're adding an event listener. And the event that we're listening for is the key down. And if Keats, any of the keys get pressed on the keyboard that we want to track that action. So also we want to prevent any default actions, so we don't want the keys to actually get written. And we want to pick up whatever the event element object is. So within the console log, for now, we'll track the keys. And if we are pressing the arrow keys, then we want to track it under the key object. So there's a few ways to track it. You can track it under the key. You can also track it under the code. There's also key code which isn't really used anymore. So we're looking for whatever the key value is. And that's actually what we want to be tracking. So refresh. And we want to track only those available key objects. So we're going to check to see if the key code and if the E. Ke is equal to arrow left. Then we have an auction for it. And then there's also else-if and will have an action for that one. So we'll have arrow, right? And this is also case-sensitive. So make sure that you're typing the cases properly. The other option and then the last option. So we'll check to see for key down and key up. So we're going to add these actions within the Tracking Area. So all we need to do is just add this list. What we're going to be adding the actual movement. And then with the Enter key, this is where we're going to trigger the movement happening. So if the key, if the key is equal to enter there, we're going to run all of the code and create the movement for the key, for the element on the page. And I'll make the elements. So resize the page to a 100 percent. And I'm actually going to make it slightly smaller. And let's set for main. Well positioned relative will have a border, one pick solid block, and a width of 100%. And let's also set a height of 500 pixels. So that will give us a area that we can move the element within. So now next up, we want to track all of the movements. So whenever, depending on which direction we're moving, we want to add the movement to the list. So let's create a global game object that we can use. And I'll just call it auctions. So this can right now just be a blank array and then we can load the actions within the array. So what we wanna do is we want to check to see if it's one of these key actions. And if it is, then we're going to track it and we're going to add it into our list. So let's go ahead and we're going to create a function that can handle the ADH action. And it's got taken whatever that actual value is. And it's going to add that action value into the game actions array by pushing the value into it. So that will give us an array with a whole bunch of actions. And then when we press Enter, then we're going to actually do the movement across the page. So we also want to track the actions within the mover area. So we're going to list those out as well. And then for now, what we'll do is console log the game actions value within the array. So we'll take a string value and track it as left. This one will track as write. The down will just track as down. The key up will track us up. So now we're tracking all of these actions, some pressing a bunch of keys. And it's, it's only tracking the arrow keys. So it's not tracking anything else other than the arrow keys within the array. So now we've got a full array. So what I wanna do is I want to actually list out all of these actions within the output area. And so that way we can loop through and we can remove those items once we take the action of that element. So instead of actually adding the value, I'm going to add the elements on the screen. So that means that we need to create an element. And this is actually just going to be a span that we're going to add to the action area. And the span is going to contain the content of what action we want to take. So using the document, create elements, we're going to create a span, the contents of the span. So the text content is going to be equal to Val. And we're actually going to push the spans into the array. So that way when we loop through them, we can actually remove the elements from the pH as well when we do the actions. So that will save us a few steps of tracking the elements as we've got the text content is going to be the same there and speech output. So span. And I want to update to the class list. So adding a class, and we'll call the class box. And then within the styling, let's output some content to pics border. And I'll do a really light border on the element. And we'll do a small font size. And I'll set that looks like. So it's not actually outputting it to the page yet because we need to add to the output area. So that's going to be adding those actions into the output area. So output append. And we're going to be appending the span element that we just created. So that's giving all of the actions. They're a little bit small, hard to read, but it's listing out all of the actions there. So what we wanna do is be able to press the Enter key and we're going to run through all of these actions and then move the block accordingly. So once enter is pressed that we wanted to run through the actions of the element. And because we have all the action elements contained within game actions, we can use that and check for the length of game actions as we remove items from the game actions. So while it game actions has a length, then we'll continue the while loop. And then within the while loop will remove out each one of the elements within the block. And that's going to be done with the game actions. So if we want to take the first item from the game actions, that would be with the shift. And shift is going to return that active element. So we're automatically removing it from the array. So first off, let's take Shift and we can remove the corresponding element with the remove function. But we also need to get whatever the current value is from the element. So that can be held within the text content. So that will tell us what action we need to take and then we can remove the element as well from the screen. So let's see how that works. So now we've got a bunch of actions. We press Enter, and they're all going to be removing from the screen. And I'm actually going to do this within a function. And then we can call the function itself. So we can do it recursively. And that will allow us to do a set timeout because we saw that they disappeared rather quickly. So we want to have a timeout where we can see the actual actions and the movements. So I'm going to actually comment out this block of code. And we're going to invoke the mover function, which is going to set the timeout on mover 300. And it's only going to continue through while the actions list length is greater than 0. So set that timeout and it'll call mover again. And if it's not equal to 0, then what we're gonna do is we're just going to clear that and do a return of the mover function. So that will allow us to have a timeout on the removal of those elements. So as we're going through, this is going to be the same content here. And let's try that again. So I'm pressing Enter and we can see that now the actions are moving and disappearing slightly slower. I'll make them a little bit bigger so they're easier to read. So these are the actions that we want to take. Let's press Enter and we can see that we're going through each one of the actions. So what we wanna do actually is we want to have the option to update the position so we can get the textContent here. And this can determine what the textContent is and how we have to move the current block. So let's do that as well, where we'll check to see if the value of Val is equal to up. And if it is that we want to do a movement of the current block item. And that's going to be the main element that we have. And actually I'm going to update this so that we're not referencing that same mean element from the parent. So using the elements, we want to update the style value. And because we're moving up, we want to set the top value and we need to get whatever the current position values are. So one of the easiest ways is to use the get bounding client rectangle. So it's going to return back the full size of the element. So if we get the current rectangle of elements, and I'll just do that quickly here within the console and give you an idea of what gets returned back. So this is a quick and easy way to get the bottom height left, right, top with X and Y position of the element. So that's going to give us those default positions. And then we can use that object information using the current left value. And then what we can do is subtract the current width of the element, so that will move it up. And actually this should be current top, since we're updating the top position and updating the current height. So that will update. So else, if It's down. Then we're going to update the top position that we're going to add the current height. If the value is going to be left, then we're going to update the left position of the element with whatever the current width this. And then we'll show you this in action so you can see and get a feel for what's going to happen. So what we're going to be doing is setting up a set of instructions. And actually the left is going to be subtracting and the right is going to be adding it. So let's try all of the sites. And also for output, I'm going to set a width of 100%. And we'll do an overflow hidden of that content. So let's try to. So now whenever we enter in what we want it to move. So first it's going to move left down, right, left, right, left, down. So let's try it out. Press the Enter key. And we're not getting any action on the element. So let's check why that is. And what I'm going to do to troubleshoot this is a console log out the value of Val to see if we're getting that actually properly. And I'm going to remove out some of the console messages to avoid any of the clutter that we have currently within the interface. So we don't have to log out what the actions are. So let's try that. And we're adding in a bunch of actions here and press enter. And it still doesn't look like we're able to move that element. So let's see if we can actually move it. And so that's coming in through properly. But the only thing is that we're not actually adding in the pics. So this needs to be a string value with picks. So once we update and we add the picks, it will actually do the movement to where the new position is. So add that in again. And so now it's following the directions that we've laid out for it. And if we can try that again. So we're able to list out all of the directions and then we press Enter. It does the actions that we've specified for it. It's also apply a little bit more styling. We'll add in a class for up. So set some background colors for this. And maybe this is red. And they'll have different colors for each one of the directions. And the reason I'm using these as the classes is that we're already using these string values. So it's going to be a lot easier to set them in as the classes where we can just use that one word in order to set the classes. So green and the last one would be left. So we can set that out as well. Let's set the font color within the box as white. And then as we construct the action items. So we want to also add in a span class list. And we're adding the span class of whatever val comes out to be. So press Enter and that we see that we're running through all of the instructions and making the movements of the element on the page. So you can extend on this as needed. So whatever actions you want to copy in, it's going to run through them and move the page elements accordingly. And it's only tracking the arrow keys, the up and down arrow keys. I'm going to actually make this slightly larger the font size. And I'll also add in some additional padding. And then how about we add in a margin as well? So five picks on right and left. And for the main box. So let's change the overflow and we'll just change it to scroll. So to make a smoother interaction, we can remove out the get the bounding rectangle and also going to comment it out over here. And instead we can also use the offset. So let's get the current offset position of the element and we'll put it in within an array. So taking the main core element and off set left value. So that will return back a numeric value of where that element is offset from the left. And we'll also do an offset top position. So that will give us an x a