Games with JavaScript DOM Projects InterActive Dynamic WebPages JS DOM | Laurence Svekis | Skillshare

Playback Speed


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

Games with JavaScript DOM Projects InterActive Dynamic WebPages JS DOM

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

45 Lessons (8h 55m)
    • 1. DOM 0 Introduction

      4:38
    • 2. 1 DOM course Introduction

      14:16
    • 3. 2 Selection Options JavaScript

      14:09
    • 4. 3 Element Style Update JavaScript

      10:30
    • 5. 4 Add Remove Classes Attributes

      15:16
    • 6. 5 Add HTML to Page

      15:34
    • 7. 6 Add Remove Elements Append

      19:50
    • 8. 7 Traversing the DOM JavaScript

      15:23
    • 9. 8 Event Listeners JavaScript DOM

      24:40
    • 10. 9 More Event Listeners DOM

      14:59
    • 11. 10 Keyboard Events JavaScript

      15:05
    • 12. 11 Element Mover with Keyboard

      13:29
    • 13. 12 Add Animation Frame

      12:27
    • 14. 0 Game Clickers Introduction

      2:30
    • 15. 1 Page Setup HTML JS

      4:02
    • 16. 2 Create Game Grid CSS JSFix

      17:25
    • 17. 3 Page Elements Into Array

      12:55
    • 18. 4 Make Elements Interactive

      18:56
    • 19. 5 Smooth Timer Code Tweaks

      9:40
    • 20. 6 Game Scoring and GamePlay

      18:21
    • 21. 7 1 Game Clickers Review

      8:28
    • 22. 0 JavaScript Slot Machine Introduction

      3:18
    • 23. 1 Project Setup index js

      3:07
    • 24. 2 Game Setup JavaScript

      8:30
    • 25. 3 Setup Visual Elements Dynamically

      17:07
    • 26. 4 Apply Styling to Design Slot Area

      8:56
    • 27. 5 Animation Frames movement

      4:48
    • 28. 6 Moving Page Elements JS

      14:13
    • 29. 7 Movement debugging and Fixes

      11:15
    • 30. 8 Movement debugging and Fixes 2

      15:01
    • 31. 9 v2 Movement debugging and Fixes 3

      14:51
    • 32. 10 JavaScript Slot Machine

      18:12
    • 33. 11 JavaScript Slot Machine Review

      9:05
    • 34. 0 JavaScript Frogger Game Introduction

      2:02
    • 35. 1 Frogger GameBoard Setup

      5:19
    • 36. 2 Create Game Grid with JavaScript

      14:47
    • 37. 3 Move with Arrow Keys

      12:06
    • 38. 4 Update conditions for Move

      5:21
    • 39. 5 Game Background Objects

      13:58
    • 40. 6 Game Objects Setup 2

      8:47
    • 41. 7 Object Movement JavaScript

      14:15
    • 42. 8 GamePlay Fixes Updates

      14:43
    • 43. 9 Fix Gameplay Debugging

      14:47
    • 44. 10 Improve Game VisualsV2

      11:13
    • 45. 11 JavaScript Frogger Game Code

      6:26
  • --
  • 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

JavaScript DOM makes your web pages interactive and dynamic update page elements add event listeners create Games JS DOM

Learn JavaScript DOM - This JavaScript Course will provide Java Script Essentials so that you can explore and learn more about JS JavaScript. Complete JavaScript course covers ES6 and modern JavaScript coding.

Bring your web pages to life with JavaScript - access the browser document object - select and update the elements on the page!

Learn more about how to create dynamic web pages - connect with the DOM -> Update and manipulate page elements

Covering the common methods and properties that JavaScript uses to select elements from the web page and apply changes with code. Fine tune your JavaScript Skills while creating fun interactive projects.

- Challenges at the end of each lesson.

- Modern JavaScript coding and examples

- PDF resource and code guides in every section

- Examples and how to apply logic to create the interactions you want

- practice and learn more about the DOM while creating fun games

- Unique projects to grow your skills - you won't find these anywhere else!!!

- Content professionally designed to help focus your learning improve your skills

- Add and expand your portfolio

Source code is included - step by step learning on how to apply JavaScript to make thing happen

JavaScript and the DOM - learning objectives to get you coding!!!

Professional instructor with over 20 years of JavaScript experience ready to help you learn and answer any questions you have.

Covering the core code examples to interact with the DOM +++++ 3 AWESOME JAVASCRIPT DOM PROJECTS

  1. Build an interactive game - generate a responsive grid with JavaScript and CSS Grid.

  2. JavaScript Slot machine with real element movement and tracking of element values.  Build with dynamic global game object that you can adjust to change the game dynamics

  3. JavaScript DOM Frogger game - Classes and how to track classes, update and check if element contain classes.  Logic for gameplay and how to create complete game from start to finish.  Game Grid and design.

The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory.

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.

Complete Introduction to the DOM and how to access page elements with JavaScript Code

  • How to write JavaScript editor used in the course and resources for lessons. Resources for writing code and for the upcoming lessons. Code editor used in the course

  • How to select all matching page elements with JavaScript QuerySelectorAll. DOM examples and how the DOM relates to JavaScript Code.  Mini JavaScript Object with nested objects to illustrate a simple example  of  the DOM element tree.  Update and selection of page elements using querySelector and querySelectorAll to select web page elements and update the value of  the object.  Select the element and manipulate the contents  with textContent property value.

  • Web Page Element Style Attribute Update with JavaScript. Page element style values within style property of the element.  Select an element and update the style values, get and set Attributes of the page element.

  • Attributes ClassList Add Remove Toggle Contains within class of page element. Explore how to select and update the element attributes, add new attributes and get contents of existing attributes.  Useful classlist methods to toggle existing class, add and remove classes and check if the class exists on an element returning boolean value.

  • Add HTML to Page with JavaScript Code innerHTML property of web page elements.  Select a page element with JavaScript - create page elements with loop from JavaScript to create multiple elements on the page.  Add HTML to the page elements with innerHTML property value.  Setting hyperlink attribute to have target blank, selecting all hyperlinks on page.   Creating images with img elements as html code for page.  Generate a random color with JavaScript string method.  Lesson also includes a challenge to add html to a parent element and then select the new elements with JavaScript.

  • JavaScript to Create new page elements and Remove Elements. Use of createElement method to generate new page elements with JavaScript Code.  Append Prepend AppendChild to parent Element methods of adding page elements to page.  JavaScript insertBefore to add  within an element and get the callback value.  Coding Challenge to create multiple image elements adding images and properties with JavaScript Code.

  • JavaScript Traversing the DOM parents siblings children of elements.  Navigate the DOM tree, select a starting element and move to its related elements with JavaScript Code. Select element parent object, get list of elements children and child nodes. Select an element get the first last and siblings related to the current element. Move to the next element and update the element.

  • Click Events and Event Listeners with JavaScript. Create interactive page elements that can be clicked to run blocks of code.  User actions to trigger code blocks with JavaScript.   How to setup click only once, addEventListeners and removeEventListeners.  Create custom object property values.  Update elements dynamically with code.

  • How to add Mouse Event Listeners with JavaScript code.  Common mouse events to page elements, on mouse over movement and other actions. Create events with mouse actions and how to track the events, what the difference is between mouse over and mouse out.

  • Events Listeners Keyboard Events with JavaScript Code. Track keyboard events, get key values and how events can be attached to input fields. Focus and Blur on input fields running events and JavaScript Code. Keyup and KeyDown events tracking arrow presses on keyboard.

  • How to Move an Element with Arrow presses on Keyboard using JavaScript. Coding exercise with JavaScript and keyboard events. Track arrow key presses and update the element position on the page. Key press to move element on screen using JavaScript.

JavaScript Element Clicker Game CSS grid JavaScript Dynamic Grid

  • Objective of this section is to create a dynamic fully responsive Game Grid - that can be interacted with and updated using javaScript. Game with dynamic Fully responsive Grid using JavaScript and CSS Grid.

  • JavaScript Game Clicker Project Introduction. Introduce the JavaScript Game created in the upcoming lessons. Set the game and demo the final game project.

  • Setup of HTML Web Page and JavaScript Code. Setup of page structure for the JavaScript Game. Using HTML and setup CSS to prep for Dynamic Elements with JavaScript.

  • Create a Responsive Dynamic Grid using JavaScript.  Use JavaScript to generate a grid that is fully responsive and ready for gameplay elements. Create main container element and grid items.

  • WebPage Elements into Array with JavaScript. As you create the elements with JavaScript track them into a Global Array that can be used to easily select the elements and create interactions. This can be used to select elements by index value.

  • Add Event Listeners make Elements Clickable. Create interactions with page elements and user. Click elements and track click events on elements with JavaScript.

  • JavaScript Code updates tweaks for counters. Update the element counters removing the timeout function call and adding counters on each element object. Add variables to elements using JavaScript.

  • JavaScript Game Scoring and GamePlay Updates improvements. Adding more gameplay - with scoring and better visuals for the player. Use JavaScript to update hits and misses counter and display to the player. Add game difficulty option to increase play dynamically adjusting the game with changes in the main global parameters.

  • JavaScript Game Clickers Code Review. High level overview of game code and the functions used to create the JavaScript game. Updated and options for gameplay. Full code review of JavaScript Game.

JavaScript Slot Machine coding project Dynamic Interactive JavaScript DOM project

  • Explore how you can create elements have user interactions and trigger visual events making your web pages come to life.

  • Project Setup create HTML and JavaScript files. Setup html file prep to add JavaScript coding. Create HTML game container element, link to JavaScript source files. Select main output element using JavaScript.

  • Project Setup create HTML and JavaScript files. Setup html file prep to add JavaScript coding. Create HTML game container element, link to JavaScript source files. Select main output element using JavaScript.

  • JavaScript SlotMachine create interactive Button. Setup of HTML Web Page and JavaScript Code. Select main container element, add button for interaction. Allow user to toggle button content and select and invoke function on button click action. Setup of core Global Game properties to make the application dynamically adjust with new game object values. Append elements to the page with JavaScript. Create elements with JavaScript. Add event listeners to elements with JavaScript.

  • Create Game Elements JavaScript Apply CSS. Add and update the toggle of the clickable button element. Invoke a JavaScript function on click. Use of DOMContentLoaded event to build game board once the DOM is loaded and ready to use. Get document body properties to use values within the JavaScript code document.body.clientWidth. Create element maker function to generate elements within the JavaScript code, add and append new element to the parent, add a class, element tag, and html content within the element.

  • Update CSS styling to set dynamically created elements on page. Adding CSS to position elements, set widths and heights to set the content on the page by applying classes with JavaScript to the newly created page elements.

  • JavaScript adding animation frame to create smooth movement of elements. The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint. Add animation frames that can be added and removed with a global object.

  • Movement of Slot Wheels with JavaScript Page element style updates. Update the position of the element on the page, move the elements restack the order of elements within a parent element. Getting element property values to use within the code to update position. offsetTop with JavaScript. Conditions and calculations to manipulate element style positions top and left to create animation of elements with JavaScript code.

  • JavaScript Game Movement debugging and Fixes. JavaScript Game movement and debugging. How to troubleshoot your JavaScript game application and how to create and optimize gameplay. Update the game area styling with CSS. Adding and removing classes from JavaScript objects. Game playthrough and updates in element positions, style properties done with JavaScript.

  • Movement and Game Results Setting Conditions for win JavaScript. Final spin results and retrieving the values of the output results. Comparison functions and setting up win conditions for JavaScript Game Object. JavaScript

  • JavaScript Slot Machine Win Conditions and payout for matches. How to create a final tally object that can be used to calculate the final results for the player. Track matches and number of occurrences to be able to apply calculations on win.

  • JavaScript Slot Machine Final Code Tweaks and Updates. Improvement of visuals, testing of game play to ensure proper functionality. Update to the global game object values to test dynamic content and game play. Adding of icons for more appealing game visuals, use fo colors to add more appeal to game play.

JavaScript DOM frogger game Project

  • Practice updating and manipulating web page elements while creating a fun interactive game using JavaScript and the DOM. All gameplay is DOM based and can be used and reused to get more familiar with how the DOM works and how you can create interactive and dynamic Web Pages.

  • JavaScript Game Setup Add Elements and create core files. Info setup index and files. Prepare and plan main elements for gameplay. Setup CSS and use of querySelector to select Game Play Area element.

  • How to Create a Dynamic Element Grid JavaScript CSS Game Grid. Using JavaScript to generate elements grid using CSS grid. Add Rows and Columns to the dynamic fully responsive game grid. Setup of game board and game play area.

  • How to move element class with Keyboard events Arrow Keys move element JavaScript Example. Add movement to the game character with event listeners. Listen for arrow key presses and track user actions to player element on the screen. Move class of main character across board.

  • Player Movement with JavaScript Smooth movement animations. Adding smooth movement and animation frame in JavaScript. Animation frames to call functions creating animations of elements on the web page. User keyboard clicks to element page movement.

  • JavaScript Game Objects Background Design adding colors. Update and build JavaScript Frogger gameboard. Add roads and water classes to elements. Check if the frogger is on the safe final block. Use of classList to check which element contains specific classes needed for JavaScript Game

  • JavaScript Game Obstacles added logs and cars. Add interactive items on JavaScript Gameboard. Create elements with classes added to represent the obstacles that will be moving. Create visuals for game play add elements that the player can interact with.

  • JavaScript Game Object Movement of Classes motion and interaction. Selecting and updating classes in Game Animation. Creating gameplay and interactive obstacles that can move automatically on the screen. Update element classes and create motion of elements for the player within the JavaScript Frogger Game. Update game to have option for speed values to increase and decrease game speed.

  • JavaScript Frogger GamePlay Fixes Updates. Play the game and test to debug. Create and catch areas to improve the gameplay and increase game functionality. Use of classlist to detect classes on elements. Setup to start and stop gameplay for game debugging and help with game calculations.

  • Frogger Game Debugging with JavaScript and game updates. Play and check of game conditions, apply game logic to help move player through game. Add movement of frogger on log update of key presses for more responsive key actions and tracking of key events.

  • JavaScript Game Play Design and Improvements add images and graphics. Adding images to increase game play appeal. Update with CSS and JavaScript code. Game testing and debugging methods. Adding visual to game, adjustment of global game values to dynamically change gameplay.

  • Complete JavaScript Frogger Game Code Review. Overview of coding and game design points.

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. DOM 0 Introduction: Welcome to the JavaScript DOM interactive dynamic webpages course. My name is Lawrence, I'm going to be your instructor for this course. I come to with many years of web development experience and I'm ready to help you learn more about JavaScript and interacting with webpages, connecting to the document object model, which allows you to manipulate select elements, manipulate elements, update elements, and do some really pretty amazing things, essentially bringing your webpages to life, all done with JavaScript. I can say the browser document object, selecting, updating those elements, you're going to learn how to create dynamic web pages. One of the most commonly asked questions I get by students is how to make the webpages more interesting, more interactive, more dynamic. And the answer is one word, DOM. So that's the Document Object Model. It's a representation of your webpage within an object structure. So it's a tree-like format for the object structure. And you can access all of the webpage elements that the user sees visually and make updates to them all with JavaScript code. So this course is going to be a unique course that's going to be showing you how to interact with the DOM. Javascript experience is a prerequisite to the course, as well as HTML and CSS, so that we can focus all of our attention and all of the core learning in the upcoming lessons on JavaScript DOM. So challenges at the end of each lesson. And one of the best ways to learn is to try the code out for yourself. So try out the different challenges. Try out the source code within your own editor, see what it does, get a feel for it. This is modern JavaScript coding loaded with examples and a lot of different learning objectives to really fine tune your learning so you can get more familiar with what you can do with JavaScript. There's PDF resources. There's four PDF resource guides that are included within the sections to help you learn and help to guide you through the lessons. They come with some resources as well as the source code for each lesson, examples and how to apply the logic and create the interactions that you want to happen within your webpages. Practice and learn more about the DOM while creating fun interactive games. These are unique projects that will help you grow your skills, expand your knowledge, and best of all, you won't find these anywhere else. These unique projects are specially designed to help you learn more and get lots of practice with using and interacting with the DOM. Content is professionally designed to help you focus and improve your learning and improve your skills. Source code is included and step-by-step learning on how to apply JavaScript and really make things happen. The course is divided into several sections. The first section is going to include the core examples of how to create interactive and connect to the DOM. So some of the most common methods and properties that you're accessing with JavaScript code in order to make things happen within your webpages. The first project that we're going to have is going to be an interactive game experience where we're going to generate a grid using CSS grid and JavaScript and have an interactive grid that creates a whole bunch of elements on the page, applying classes, removing classes, creating interaction, event listeners on those elements. Next up we have a slot machine. So this is a JavaScript slot machine where we actually have the elements moving and rotating within the wheels of the slot machine. And this is going to be a unique JavaScript project so that you can get more familiar with how you can manipulate elements, how you can create elements, how you can move elements within your webpages. And best of all, all of the games included within this course are going to be dynamically adjusting. They're also going to be fully responsive. So when you update some of the global values and variables, if you want more rule is if you want more columns that can be adjusted, which is updating the variable values. And then we also have a JavaScript frog or a game. This is a unique gaming experience where we're going to be using classes in order to create the gameplay. So constructing a game board using the CSS grid and then allowing the user to have event listeners. So keyboard presses, listening for keyboard presses, and allowing the user to move their frog across the board, avoiding hazards such as moving cars, moving logs, also being able to jump on the logs, which will allow the fraud to move alongside the log, avoiding hazards as the water. So it all using JavaScript within the DOM and using classes and class manipulation. So next up, open up your editors and let's get coding and create some amazing things with JavaScript. 2. 1 DOM course Introduction: So in this lesson, we are going to be connecting to the HTML content and returning back the content into a JavaScript object. And within the JavaScript object, we can update some of the content that's contained within that object. So we're going to be in the manipulating the original hello to, to say hello world within the element. And introducing you to that query selector method that's available within the document object. And this allows you to select elements from the webpage. And then the JavaScript allows you to update the properties once the element has been selected. This lesson's going to be an overview of what you can expect in the upcoming lessons. So we are going to be writing JavaScript code and we're going to be creating an HTML file. The editor that I'm using is called Visual Studio Code. So you can use Visual Studio code or you can use any editor that you're familiar with that you can write code and create HTML files as well as JS files, JavaScript files that you can try out as you go through the lessons of the upcoming course. So the Visual Studio Code, it's a free open source editor, and I do have it opened here on the left-hand side. And for most of the course in the upcoming lessons, I am going to have the editor opened on the left-hand side and the screen opened on the right-hand side within the browser, the browser that I am using is going to be a Chrome browser. And I'm making use of DevTools within the Chrome browser. So you can open up Chrome and there's three dots in the top right-hand side. So selecting those and selecting the more tools tab go down to Developer Tools. Or you can use the shortcut to open up the developer tools. Or on a Windows machine or on a Mac, you can do a control click anywhere on the screen, select, Inspect. And that is, well, we'll open up the developer tools. I've got the developer tools dock to the bottom. There's several options of where you can dock it. By default, the docking is over to the right-hand side. So if you'd see here developer tools pop up this way, you can select and you can change where the docking location is. And for most of the course as well, we are going to be docking it to the bottom and looking at the two tabs that predominantly be making use of, and that's the Elements tab in the console tab. So what can you do within the developer tools console? So you can write some JavaScript code and have that render out. So go in and type alert and not pops up the alert window. You can also inspect the code that you have within the page and go through the various elements. And as we are going to be writing JavaScript, that's going to be updating the DOM content. We're going to see that that also gets updated in the elements tab. So go into your editor and let's create our basic HTML page. So the HTML page, and then this is going to serve as our template for the upcoming lessons. So start out by specifying the doctype as HTML. So this will indicate to the browser that this is an HTML5 file. Then open up the HTML tabs and nested within the HTML tags, set the head tag, and then also create a title tag. And within the title tag, I'll just call it JavaScript DOM. And all of the lessons will have the same template we're going to be updating and changing the JavaScript. You can also create style tags. I'm just gonna do it on page. You can also link out to CSS file. So we're not going to be doing a whole lot of styling. There are going to be some classes that we're going to be creating, attaching them to the elements on the page and so on. So there is going to be very minimal styling just in order to present the content in a better format. Create the body tag. And then within the body, let's add in a div. And for the div, Let's give it a class of my element. And then we're going to select this element from the page. And right now it will just say hello on the screen. I am also using within the Visual Studio Code, I'm going to be using an add-on, and this is going to allow me to run the file within the HTTP protocol. So I'm going to have a local web address that's going to allow me to render out the contents of the file. And the nice thing about this add-on is that whatever updates I make to the HTML file, it's going to immediately show within the display area. So upon Save, I'm going to be able to see the changes being displayed within the browser in order to end. Now you don't need to have this add-on. You could just be running an HTML file directly within your browser. So open it up wherever it's locally located. And that way you can as well drag it and open it up within the browser window. And I am on a Mac, I'm running Mac operating system. So you can navigate to where the HTML file is located and you can drag it and drop it within the browser. And that's going to open up the HTML file as well. It will run the code, but it won't update automatically, like the live server out on does. So there's a definitely a benefit to it. And as I'm creating the lessons of the course, we're going to see the updates happening in real-time. So in order to add the add-on, you can go under the code tab at the top of your Visual Studio. And then under the code go to Extensions. And within the extensions, the one that I am using is called Live Server. So there's a little bit more information about it when you click it, if you don't see it and if you haven't installed it yet, you can search for live server and it's going to return back the different available live servers. And the one that I'm going to be using is the one that's by day. So Live Server, there's approximately almost 10 million downloads. And it allows you to launch and develop local server with reload feature for static files. So, and that's what we're going to be making use of. So already do have it installed. If you don't have it installed and you can search it within the extensions and then just hit the install. And you can always uninstall and disable it if you don't want to use it anymore. So now that we've got everything out of the way, we're ready to create a JavaScript file and select an element from the page and open up the browser window again. And I'll make the code slightly larger so it's easier to read for the recording. So what the DOM is, this is a programming interface, so it's short for Document Object Model, and it's a programming interface for HTML. It represents the webpage so that applications programs can change the document structure, style, and content. So essentially select elements from the page, manipulate them, and update them, also adding in events. So giving you the option to with JavaScript and connecting to JavaScript, making a fully interactive web application. Let's create the JavaScript file, and I'll just call it DOM one, JS. Save that, and then now go to Create New File and save this as Dawn one js. I'm saving it to the same root directory as the index.html file. So now we've linked over to the JavaScript file and with the DOM, the selection to select the element. We're going to attempt to select this element and update the textContent of that element. And when we are using styling and we're using the CSS, we can select the element. And if it's a class, we prefix it with a dot. If it's an ID, then we prefix it with the hash. And if it's just a tag name that we're selecting, we just select the tag name. So the same is true when you are making a selection using JavaScript. So if we were to select this particular element, the first thing that you need to do in order to manipulate the element is to identify it and select it. So we have the one element, it has a class of my L. We're selecting it with styling. And if we want to update the color to be red, we'd select it with styling and we'd update the color to be red. So let's take that same idea and same concept and bring it over to JavaScript, where we want to select an element from the page. So using the document object, and that's just indicated with the document. And we got a number of different methods that are available. So the method most commonly used for making a selection for selecting one element is query selector for selecting multiple elements as query selector all. So we are going to be looking at both of those. So we're using querySelector now we need to select the element from the page. So just as we did with styling where we indicated the class name that we want to select. We're going to do the same thing here for querySelector, and don't forget to prefix it with a dot. And so what do we want to do with this selection of this element? So right now, we're not really doing anything with it. We've selected it. And with JavaScript, we can put elements and objects into variables. So let's create a variable and assign the value of the variable to match whatever the path is and whatever that element object is. So now whenever we retrieve back the element object that we're referring to in the code as my L. We're going to see that that particular element gets output within the console. And when we hover over it, the dev tools within the console also going to highlight the element within the visible area within the display area of the browser. So next, what do we want to do with it? We've made the selection, we've associated with the variable name. And this document element is going to be an object. Just like any other object in JavaScript, it references a memory location. So there are actually a number of ways that you can make the selection. So this is a div as well, and also give it an ID. And give it an ID of my ID, It's a div as well. So we'll make a selection of the same element in multiple ways. So do this one as L1, this can be element two. And this time we're going to use the my ID in order to select the element by ID. So notice that we're using the hash same format as if we're using styling. And then also that elements can be identified as a div. We only have the one div. So it will select all of that same element. So any one of those are going to be referencing that same element location. So doesn't matter which way we go where referencing that same element object. And you can see that as well whenever you hover over them within the console, it's going to get highlighted. So all three are referencing and referencing within the document object that same element. So what can we do with the element? And we can get property information. So if you want to get the text content that's contained within the element, we return back whatever the current textContent is. And just as we can return the textContent with when we get the property value of textContent, we can also take the element and we can say textContent and assign a value to textContent. So we can update that to say Hello World. And now the content within the element got updated to say hello world. And because once again it is referencing that same memory location. If I get element three and I get helloworld from there, or the textContent from there, it's going to return back hello world. So let's add that into the code. And of course normally you would only need two. Reference it within one variable, and then you can use that variable and make your manipulations and updates with that variable. So selecting them I L one and getting the textContent property. Let's update that to Hello World. Now when the page loads and we check out the output that's contained within the HTML that's updated from hello to, to say Hello world. If you go into the elements and the live version of the current document object is going to say Hello world. So within that element, and that's why still referencing that same element by the ID or the div with the class, it's all going to return back that same property value. Challenge for this lesson is to open up the editor, write some code, try out query selector to select an element on the page to add some elements within the HTML, make a selection of the element you can try via the class, via the ID and also the tag. There's also going to be an overview of the editor in the browser dev tools. So if you're not familiar with the DevTools, you can check out more information available from Google Dev tools as well as checkout. If your first time using the Visual Studio Code, check out the editor at in the life. Can try out the Live Server extension. Select an element from the page, get the textContent of that element, and then also update the text content of the element. Create the index file, create the JavaScript file, write some JavaScript code, select, manipulate the elements. You'll be ready to move on to the next lesson. 3. 2 Selection Options JavaScript: In this lesson, we are going to be selecting multiple notching elements and updating the content of all of them. So we start out with a bunch of divs. So that's just all say hello three, and there's one that says hello to from one of our original ones. You're going to use JavaScript code and select all of the matching elements that have the class of my L. We're going to loop through them and update the HelloWorld and count the index values of them. So having incrementing count, that's going to also update on the page. In addition, we're going to be looking at more of what's available within the document object, how we can get different property values and the overall structure of the DOM, and how it relates to JavaScript objects, and how we can recreate a simple JavaScript object that can illustrate how we can use the document object in order to select and manipulate content. So this is going to be the JavaScript object that we're creating. And it has a bunch of nested properties and HTML, body and a div. So simulating very similar to what we have on a very basic website. And of course, not including anywhere nearly all of the information that you have within the document object. But this is a good way to start to visualize how the DOM works with the nested objects that are within the parents. This lesson, we're going to pick up where we left off with the last lesson when we introduce what the document object was and how we can select elements from the page. So the document object itself is a collection of all of the page elements and this is constructed by the browser. And with JavaScript, we're able to interact with it. So just as we saw within the example, where we can select the text content from the page and then also update and manipulate that text content. This is only referencing that current version of it. So it actually hasn't changed the source code to Hello World, but it changes the live version of the DOM which contains that source code. So this element is within the object and we're selecting that element and updating the properties of it. So it's the same idea as if we had an object, a regular JavaScript object, and we had a bunch of nested properties. So if we had tag one and then the value of tag one was another object. And then within that object, we had tag two and the value of that was another object. And let's do one more, tag three. And the value of tag three was Hello. So if we output the object into the console, we get this stack object with tags that are nested within the other tags. So the DOM works the same way. So one of the tags might be HTML, one might be body, and then one might be a div. So let's make a quick update to that. So we've got the parent is HTML, and then this one is going to be body, and then this is going to be the div. And when we look at the structure of the HTML document, if you were to lay that out within an object, the natural order would be to have the parent, which is HTML, the body which is nested within the HTML and the div then that's nested within the body. And then we can output all of that content. So now going back and listening, we see all of the elements that are nested in our visualization using a JavaScript object of what the DOM is. And the DOM is actually has a lot of information contained within it. There's a lot of properties. And then you can also have different event listeners. So there's a number of different methods that are pre-built within these properties. So there's quite a bit that's going on within the DOM. If you do want to see the DOM construct, you can use the console directory and list out the document object. And this is by default the way to reference the DOM just using the document object. And that's the same reason that we were using it here to indicate what the property was. So the same idea here that if we wanted to list out the, my object, and then we had HTML, then we had body than we had div. So we can list out all of the property names using the dot notation. Or of course with JavaScript, you can use the bracket notation. And then in order to get the value, and that's going to be the end value. So the same idea here with the document object. We've got the body that's contained within it. And then within the body, it's got a full listing of all of the HTML within the body. If we use the directory that allows us to open up the directory of the document contents so we can see we can get the document URL. So that's one of the properties that we can get. So doing a document and URL that's going to return back the URL value of the document. And every single webpage. And I do encourage you to try that out if you haven't already, go over to your favorite web page and open up the inspector, the of developer tools inspector. And from there you can list out it's document. And URL. So same thing that we've got within our example. And of course this is going to be a lot more complex of a document. So if we list out the document itself, we don't have to do the console directory. We just listed the document referencing the object and then open up the object contents. And this is going to be presented with an HTML format. So if we do want to present it within the directory format, we can select the document this way. And that will list out the options just the same way as we have in our example when we can open up the different properties and dive into the nested property values that are within that document. And these are all the event listeners that we have. So every single element will have event listeners on it all the way down. So from the parent, you can also see the body objects. So every document is going to have a body object. So that's a default property name. We can reference the body. There's also the different child nodes. So we start out the HTML. So the HTML is the main node. So within HTML, we can open that up and we can go down to its children and the HTML children, our head and body. So we can open up the body and then going down into the body. And it does get fairly complex. So within this body, we've got script tags, we've got the footer and we've got the div. And then within the div, if we go down to the div, we can go all the way down to text content. And we see that we get the textContent of the div. And because this is within the Visual Studio Code, we've got a number of values there within the div. So it's not going to be the same across all of them. And just as what we saw with in the last lesson where we select the element. We can select elements from the page and we know that everyone has the body. So we can take the text content and we can just equal that to say hello. And what that did is, notice we're still on the Code visual Studio.com website. But the content just says hello. If you go over two elements, it's just going to say hello, the class stayed. But we were able to select all of the content and not to worry that you haven't overwritten your favorite website. You can just refresh it and it's just going to reload and rebuild the DOM once again from the source code. So the same idea here, where we can select elements and we can manipulate the elements. Let's do a quick refresh will go down into the DOM. And this one is a lot simpler of a page structure. So when you are starting out, it is advised to start out with a very simple page structure. So this one just has children of HTML and it's not nearly as complex as the Visual Studio site. And then these children, we've got head and body. And then within this body, we only have the one div. So within the children, we've got the div there and then Script, script. So within the div, if we go down to our textContent, we should see that it's equal to Hello World. And there's our text content and it's equal to Hello World. So same idea that we have with when we created the object. We can break down into the DOM and select the particular property object that we want to look out. So also with the selection process, with styling, if you select the class, you can have multiple classes that reference that same elements. So this one might be something different, and this might say hello, three. So what do you think is going to happen here we've selected, so with styling, when we select the element, we apply a color of red. They both turn red. But with JavaScript, we're selecting the element by class and we're updating helloworld, but we've only got the one that we're referencing with Hello world. And the way that the query selector will work is that if we have multiple elements with the same class, it's just going to reference the first one it finds. So if we were to change the order and it comes across this 1 first as Class of my L. It will then update that value. And it's not going to update the second one. So we need a way to be able to go through them and select both of them and update it. And that's where we can use the query selector all. So this is going to return back in node list of all of the elements. So make the selection the same way with query selector. Instead of query selector, we do query selector all. And we're going to use the same format and then log out the elements into the console. So we've got what's known as a node list. So this is a list of all of the elements that returned back and matched. So now we've got a list and they've got index values. So if we were to look at L's 0, that's going to refer to that first element that was found. And then also if we look at L is one with an index value of one, that's going to reference the second element that was. Found and if we tried to do a third one, we don't have any on the page and will throw an error because it's not going to be an associated value with that element. So that's why this isn't really the best way to do that. If you do are creating and getting a node list and you might have various elements. One of the best ways to do that is just to do a loop through them and then return back each element individually. And that way, you can work with the elements and make updates to them. So let's output that element object so that outputs both elements within the loop. And just as we saw before, if we want to update the textContent, we can update and associate the textContent. So I'm going to just add and update it to Hello World. So now they've both been updated and changed. Let's make this dynamic. So within the for loop, we can also pick up the index value. So adding in the index, I'm going to switch this to the template literals. So those are the backticks. And that way you don't have to worry about any of the quotes. You just use the back ticks and to bring in the value, you can do that with the dollar sign in the curly brackets. So now we're going to have the helloworld 0, helloworld one according to the index. I'm going to add one to those. So we end up with helloworld one, helloworld to, as we loop through an iterate the elements. So that means that even if we were to add a whole bunch more, our code would fully be dynamic. And I think I missed one of the actually let me try that one more time. So if you were to add a whole bunch more divs, then it would still pick up all of them within the node list, iterate through them, and update the content accordingly. And we can also list out the current textContent before we change it. So that will just list out whatever the values were before we changed it. And then we see that the new world, new values have been assigned to it. Challenge for this lesson is to visualize the way that the DOM object contains and has all of the nested elements. So we're going to create an object. So just a regular JavaScript object that has objects nested within the parent, you can go down three levels to simulate what you might expect to find within the DOM. And then just have some textContent that you can simulate the output of the element. Also try the console directory with the document object and look through the document object in order to find the textContent output is on the page, go down through that children, see all the different children that are nested within the parent and go down several levels. Also go to any web page, update the document body textContent to say hello world, and of course refresh the page. So bring it back to the original. Select and return multiple elements into a node list. So you can just query selector all select multiple matching results, and also make sure that you do have the matching results within the HTML. And select the textContent of all of those elements. And then also update the textContent of those elements as you loop through them with the for each loop. 4. 3 Element Style Update JavaScript: In this lesson is we are going to be updating their typical basic HTML element and applying styling. And the styling is actually going to be applied with JavaScript. So it's not within the source code. The JavaScript is selecting the element and then updating the attributes, that style attributes with the various styling properties that we're indicating within the code. So we're making updates to it. We're selecting it, making updates to it. And this is just a listing of all of the different styling properties that are available for the element. This, Let's create a brand new JavaScript file and just create a new file, and we'll call it DOM two dot js. And the first thing that we wanna do is select that element from the page. So we've got a number of ways that we can do it. We can do with the ID, we can do it with the class. Let's try the ID this time and selecting the element. So this is going to be our main output element. So I'm going to reference it as a variable name of output and then document query selector. And we just want to use querySelector since we just want to select the one element and using the my ID and don't forget to prefix it with the hash if you are selecting it by ID, that we make sure that we do select the proper element. And then always, whenever you select it, you can always check within the console to make sure that you select the element properly. So we already saw within the previous lesson, we can take that text content and we can update it to say, whatever we want content. And what if want to update it with HTML? So if we do update and there's another property called innerHTML. And this will allow us to update and out HTML tagging. So if for instance we do have some HTML code that we want to add in some setting now because H1 and then hello world. And closing off the H1 tags. If we were to update the textContent with HTML, we're going to see that that's actually not going to work. That it's just going to output the textContent as textContent and it's not going to render out any of the HTML code. But if we use the property inner HTML, and we can see that it does return back to current HTML content that's within this element. And these are all just the HTML character indicators for the brackets for the H1. So let's update this and take output and inner HTML and just equal that to HTML. And now when we open up the elements, we can see that that particular first element has had HTML content applied to it, and that's equal to one and Hello world. So that way we can update the HTML. We can also get the HTML. So depending on what type of content you want to output, you can update and have different properties. So the textContent, even though if it just has text, it's going to look the same as the inner HTML. If you want to use HTML code that you need to update the HTML property. And that will also in turn update the text content. So now if I do output textContent, It's only going to pull back the hello world. It's not going to pull back the H1. If I take the output and select to see the inner HTML, it's going to return back the HTML of the content that's contained within the output. So textContent strips out HTML tags and innerHTML keeps the HTML tags in and assigning the value to it is the same as selecting the value in getting the value from that property. So now we want to select output area and apply, update the styling. We saw that we can, with the class, we can select and apply styling, but we can also apply styling directly into the attribute by selecting the element style property. And then within the style property, if we want to update the color. So let's say we want to update the color to be red. That's going to update the color to be red. You can also go over to the elements and check out the element, the updated style attribute color red. We can also set the background, so style and back ground color. So let's set the background color to be blue. So that will update and set the background color to be blue. So anything that you could do within the typical style attribute, then you can do that within the elements style properties, and update the content accordingly. And you'll always see that it adds it directly into the style attribute. So just as when we are getting the textContent, we can also get the value of it. So if for instance, we won't take the within the console and get the output. Style. So it gets returned back for the output style. So this gives you a listing of the tire elements, style properties. So we have set within the attributes, the color and the background color. So that's why they're listed out there. We have added it in US attributes, but we have all of these property values directly on the element. So these are just the default ones. We see the background color has changed. We can update the position. And this is also another way that you can list out all of your options that you can do. So you can do the align content and going down to the border. So let's try that one where we output style and let's update the border. So just the same way that you would do it within the style attributes, it's expecting a string value. So we select the string one, pick solid block to add a border around it. So now we're going to have a border around it. And I'll make this a lighter color. So let's update this to yellow. So there we've got our border. Let's update that to five pix, so it's more prevalent. There's our border style. And again, going back into here, Let's select some other properties to update. Can update the porter radius. So just saw that one over there. So border-radius, same way. And because you're not able to have a space within the property names, it does a CamelCase. So border, radius would be border, and then the second word would be capitalised, such as in this case. So let's once again select the border style border radius. So if you want to have a more rounded border effect that will provide that rounded border effect for the element. You can also update and select an element and do the output style. And because it's going to reference an object location. From there, we can take the element and we can make updates to that element. So let's do another one going into what we've got for all of the different properties. And I'm actually going to do the text aligned. So let's down here at the bottom. So now we can say text align. And we can center align the text. So saving that will center the text. And then always within the properties, it's continuously updating the style attributes of that element. And because we added border, so it added all of these to the list of ones that have been manipulated within the JavaScript code. So it creates that property list every time you make an update to it. And that gives it the option to select the right property, make an update to it. And notice as well that it's being updated here. So even though that the property name is background camelCase color, when we go into here, It's updating those background color. So whatever the actual property name is that we would expect within styling attributes, that's what actually gets listed out here. So let's do one more where we'll take the elements and text trans form. So if we wanted to have it all as uppercase, that will transform it to uppercase. So that's the same thing as if we have an element. And we take text transform, and then we do uppercase on the transformation. So you can also use because it's not going to be case-sensitive. So just with the CSS, so not case-sensitive. So uppercase, lowercase is the same as uppercase and camel case. So depending on whatever format and you can keep consistent with what you would see within the CSS. Or you can style it and create the string values the way that you'd expect it within the JavaScript that's up to you. So anything that you would typically do with styling, if you want to add margin all the way around 25 pixels of margin to the box element. Coding challenge for this lesson is to select the element, update the element, the HTML of that selective element using the innerHTML property. So updating that innerHTML property value, don't forget to include some HTML code tried out against the textContent property, update the color and background of the selected element. So I setting the color value and also the background color value. Properties for the elements within the style attribute apply various styling values to the style attribute, all using JavaScript listed out into the console, and then make some selections, make some updates to them, and see the changes that get applied to the selected element. 5. 4 Add Remove Classes Attributes: In this lesson, we are going to be updating the attributes of the elements set and also toggling the classes that are as attributes within the elements. So we've got a number of other elements to the page and notice that they don't have the target value. But when we listed out with JavaScript, we're going to be adding in the target of blank. We're also going to be checking to see if the element contains a class. And if it does, then we're going to be writing a red. So adding the word read to the textContent, also updating the element in our HTML to add in a line break toggling the red class, toggling the blue class. All done with JavaScript and also adding, disabling the button as well. This lesson we are going to be adding and removing classes to an element. So let's go ahead and update our source file, setting up to next source file. And then we can just create a brand new source file so we don't have to use the DOM to, we're going to create a brand new one and just call it DOM 3 dot js, again within the same root directory so that we can link our index page to it. And we are going to be adding and removing classes. So let's set up an ad, a class. We'll create a few classes here. So this one will be red. It'll add and update the color property to be red. And next one we can do for blue. And this one will update the color property to be blue. We've already got our element on the page. So under hello to, so that's being shown here on the screen. So first, what we wanna do is make a selection of the element that we want to manipulate. So we do have a number of ways of selecting this element. And let's make a selection by class. So we'll just call this L1. And then using the documents and query selector, select the element and select it by the class. And then apply the manipulations to it. And you can always log it out into the console to make sure that you've selected the correct element that you want to use. And then if you highlight it within the dev tools, that will also highlight within the visible area of the browser window. So now we've selected the elements and we can manipulate some of the content on the element. So if we want to select the elements and the class, we have content within the class list. So if we were to output the class list into the console of that element, it will give us a list of the available classes. So right now it only just has the one class. And with classes, we can select the elements and we can use cross-list to add a class. And we did have a couple of classes there. So if want to add the class of red, turns it red. And when we open up the class list, we get the list of both my L and red. We also have an option to take the element and class list and we can toggle existing classes. So if we wanted to remove out any of the classes that were within the element. So if it has it, it will remove it. If it doesn't have it, it will add it in with the toggle, so it does the opposite. And when we go into the elements, the source code can see that that class has now been removed. So the original class that we were actually making the selection by has been removed. But because we've already pointed to that element and we're referencing that element within the L1 property. Even if we've removed it, we're not making another query select are looking for that element because obviously it's not there anymore. So we do still have that referenced to that object location with the variable name of l one. So we can continue to make manipulations on it as needed. So let's take the L and class list and we can remove read from it. So we need to just specify the class that we want to remove. And that will remove out the Select a class list. And we can also add in a class. So let's do a toggle of blue. So blue doesn't exist. So if it does exist, it will remove it. But if it doesn't exist, then it will add it in. So now when we go back into the classes, we have the class of blue sitting within the element. Also within the elements, we can set attributes, so we can get attributes, we can set attributes. So let me do a toggling of this block of code. And preferably when you are updating classes, if you just have the one class that you want to add, remove, or toggle, then you can use the class list. You also have the option to add multiple classes. So if for instance, we want to make a selection and I'll get rid of the text transform and upper. And that will do the text transform. So if we want to, for instance, odd multiple classes to the element and just save that and double-check, make sure that we only just have the one class that we're using as a selector. We can select and set the attribute. So just as we saw earlier, when we can get a value. So if we want to get the attributes, so L1 and get attribute, and we just need to specify the attribute that we want to get. So if we wanna get the style value, and actually it should be class value. So that's going to return back the element value that's within the class. So we can also, just as we can get, we can set. So if we do L1 and set attribute, and if we want to set the attribute of class, and keep in mind that this is going to overwrite whatever we have existing. If we want it to set two classes, read and upper. We can do that. And in the end, when we go back to the body and check the element, we've got both of the classes. So what's happened is it's essentially it's overwritten that original class that we were able to pick up and it's updated the class attribute. So we can do all kinds of updates to it. So even if we want to update the ID, we can update the ID as well. So we select the attribute that we want to update, and let's say we want to call it new ID. We can go back out and we'll see that the ID now husband updated to new ID. Any of the attributes that are sitting within the element. You can update those and you can get them with the get attribute, and you can set them with the set attribute. So let's say for instance we have a button and it'll just create, add a button to the page. So within the HTML, and this button can just say click me and select the button from the page. So using the document and query selector, we only have one element that has the tag of button. So let's select that. And if we want to take the button and we want to update the button attribute. So let's get attribute and the attribute of the button to see if it's disabled. And let's log that information into the console. So that's just another attribute that you might want to pick up and into the console. So right now the disabled is null. So if we want to set it as disabled, we can updates and set the attribute as disabled. So to disable the button, do a set attribute and set the disabled and set that to Boolean value of true. So what that does is that disables the button on the screen and it just sets the attribute value. Let's also try one more where if we had a hyperlink, so it's rough and that was not going anywhere. And we want to add in a target. And that can also say click me. So let's take the anchor tag and I'll just call it myelin. So document and the query selector select the anchor tag. And now we can take the my link and we can update the attribute for the target. So if we want to set an attribute and set the target attribute to be target blank. So do an underscore. So now if I go into the element, now we've applied the target blank, so it's going to open it up into a new tab. And if we have a number of hyperlinks, Let's update all of their targets to be blank. So in this case we're only just selecting the one. So let's make an update to this, call it my links, select all of them. And then as we loop through. So we've got the my links. And then using for each, we can loop through each one. I'll just give it a name of my link and set all of the attributes to be target blank. So let's say for instance, you do have a webpage and you want to make sure that all of the hyperlinks have an attribute of target blank, so they go to new pages. You can do this block of code that will run through all of the links and update them all to target to blank. So in addition, when you're setting the ID, you can also use the ID property value as ID. So there's a number of other ways that you can select the object information, and this is how it actually gets contained within the DOM element. So proper way to do it is to set attribute. But you'll also find that with just like with any other object, you can get the property values and by doing the L1 dot ID. So using the dot notation, you can output the ID of the element at the time. And if you can get it, then you can also assign a value to it. So this can also be another value to it. And then at the end, when you go back into the elements. Tab and take a look at that element that you've selected, the element with the ID. Now it has the id value of another value. So that's just referencing that same element. We can make updates to the ID and we can also use the dot notation. We can produce a bracket notation. And we can also set the attributes using the set attribute method. And the toggle one is actually a really interesting one because this allows you to add or remove depending on if it exists. And there's one more that I wanted to cover off before we conclude. So let's loop through and update to this. So adding in a class of red, so randomly add red to a few of them. And as we loop through the links, we can take that my link elements and use class list. And there's a number of other options within the class list. So we can do Contains and contains allows you to check to see if it actually contains the class. So this is a really useful method because it checks to see if it contains it returns back a Boolean value. So in this case, you wanted to, you could select that element. So use a condition so that contains red. It's going to come back true. And then you can have the link and set the textContent of the link and equal dot t2. And if we want to get the original text content. So you get the original text content of the link and then just add to it, so space and red. So that gives you that type of effect where the ones that have red are going to be written out the word red. This is just applying it to the text content. And you can also shorten this statement by just doing a plus there. So it will take the existing content and just add to it. So it'll have the same effect, just a shorter way of doing that. And also if you want to set them up on new lines, you could do that as well for you could add in the line breaks for the elements. And we can update the inner HTML with a line break. So let's say you could use the inner HTML and if you want to have a library before it, and you can have a line break before it as well. And actually let's just remove that one out. 6. 5 Add HTML to Page: This lesson is going to be a challenge lesson where we're going to show you how you can generate a bunch of links and then also challenge you to use the images from dummy image.com and generate a bunch of images on your page so we can update how many images we want. If we want 40 images, it will generate 40 colorful images on our page. And this is all coming from the dummy image.com, and this isn't within our HTML source code. All we have is the main div and we're generating images and adding them, generating the HTML and adding it within the div using JavaScript. In the previous lesson, we added a bunch of HTML content to the index.html. So this one, we're going to generate some content on a loop. So create a new JavaScript final ends just create a new file, save it as a DOM for JS. And we're going to reproduce what we did. Except we're gonna do this with JavaScript code, where we're going to loop through. So create a loop. So first what we wanna do is of course, select the main element. So it's going to be our main container element. And using the document and then query selector, selecting the element from the page. Good number of ways to select it. Let's select it by ID. So my ID, so using the hash and then my ID, save that, go into the console to make sure that you've selected the element properly, type in the variable name of Maine, and that should output the element object onto the page. So now we can create a loop. So creating a loop and starting out at 0 and then looping while x is less than ten. And then incrementing x by one. We're going to add and append to Maine some more content. And that's going to be the hyperlinks that we're going to be adding in. So just as we had before, all of these hyperlinks with the click me. Let's construct this as we loop through. So take Maine and we saw earlier as well in the last lesson how we can concatenate content together. I'm going to use the template literal solutes are the backticks to the left of the one on the keyboard and add in the hyperlink. So adding it in and we're appending it to the inner HTML. So that will allow us to create a line break as well, add that into the code. So creates a bunch of links there for us. And initially, I don't want it to be sitting right next to the hello to. So we have a few options here. And what we can do is if we want to clear out the content entirely, we could just leave it blank. And that will create a nice neat list of the Click. Nice. So let's add to it. So making them unique. So using the bracket notation with the curly brackets and the dollar sign to indicate that this is a variable. So taking the value of x and add one to it. So now we got to click me 1, 2, all the way down. So once we've created the elements, we can then select the elements and manipulate them. So once we've run this function, then we've got a number of anchor tags that we can select from the page. So let's do that with JavaScript as well. And I'll just call it L's. And using the document. And then query selector, do the query selector all, selecting all of the elements. So the anchor tags. And we can be more specific just as we do with CSS, that we can select the ones with the H ref that's equal to hash. So if for instance we have some other hyperlinks, we might not want to select those ones within the node list. And then the console log output the node list and make sure that we do have all of the elements listed. So now that we've added them into the page, they're available within the DOM. And that means that we can use query selector to select them. So let's make a selection of them and then we're going to be updating the values of them. So using the foreach, which we saw last time as well. So getting each one of the elements and returning it back. So we're using the arrow format for the function. And we can console log out each individual element as we iterate through. So that lists them out onto the page. And if we want to add classes to them, Let's add a class to it. So do a check to see if the value of index. So for the, for each we can pick up an index value as well. So index is divisible by three. And if it is equal to 0, if the remainder is 0, then we can take the elements. And using class list. Let's add the class of blue to it. So that makes every third one blue. Also, let's do another condition here. And then using conditions, you can apply different styling to the elements like once you've selected them in the list. Some, maybe every other one can be red. And that's going to overwrite the ones that are blue. So every other one set to read for the class. And then for all of them, we're going to add the attribute. So using set attribute and the attribute that we want to set is the target. And the value that we want to place on the target is going to be blank. So opening up the elements console, so that created a bunch of elements on the page, all with the target blank. And we've applied some styling to solve them depending on the condition. Let's also create a bunch of images. So I'm willing over to dummy image.com. So this is an excellent resource if you're ever looking to have Placeholder images. So in this case, we're just going to be grabbing some placeholder images and adding them to the page so similar that we did the hyperlinks. But this case we're going to be adding images and we're going to be updating the image source as we iterate through. So selecting default image, you can update the colors of the image. You can also update the formats you can add in text to the image. So let's make a selection of this value. So this is just going to be adding in the text to the image. And instead of anchor tags, we're going to be applying images to it. So just going to paste the image format that we're going to use and do a word drop for it. And then also let's update the colors of the images as well. So this indicates the size. And if we want colors than we could do a slash and the hexadecimal value for the image colors. So that's going to be coming under hexadecimal value. And if you were to take this and paste it into the browser, just double-check that it works. So it generates an image with a white background and black text. The white, the background is first and then the text color is lost. Or next. So background and the color values. So that's the image that we're producing. If you want to make a smaller image, then you can update the height of the image. So right now it's 200 by 300. So if want to 100 by 100, that we can generate images this way. So let's go ahead and add some images to the page. So you can pause the video here and run through, just as we did with hyperlinks, add the images, and I'll walk you through how to do that as well. So you can pause the video here. And I'll provide you the solution how to add the images to the page. So we do have the basic format. I'm going to just do a block comment of all of this that we just did earlier. And just to comment out that. And let's start adding in the images. So we're going to do it within the same main container. So just as we did with the hyperlinks, and let's set up a loop for that. So loop through and then how many images we want to add. So doing i and incrementing I by one, and updating the main inner HTML. And let's just add in the image tags to it. And we're not going to add any source to it yet. Solute through, create a bunch of blank image tags. And also double-check within the DevTools just to make sure that we are adding in the images. So just a bunch of blank images. There's no properties yet added to them. So as we select them, Let's make a selection from the page. So getting all of the images and you can use the document query selector. I'll do query selector all sort of selecting all of the images from the page. And now we want to select those images and loop through using for each. So getting the elements and then also getting the index value. So that we can use this when we're generating the images for the page. And as we loop through, we're going to append the image source. So let's console log out the elements and get attribute. So get the source value of the image. And we know we don't have anything yet that's posted. So it's all null. We don't have any values there yet. So if it's null, so if the image source is equal to null, which it is, then we can log out the values. So right now we'll just look at the values into the console. So it's still get all of the nulls there. And now we can take the image source and we can set the attributes. So we'll set the value of source and as we iterate through, will generate the path. So const image, so the path to the image. So using the same template we have up here, we're going to add into the source, and we're going to set the source as the my image variable. So let's add in the base URL that we're going to be using and set that up as a global variable. So that way we can update the image source, take the variable name there, and add to it. So append to the URL. So right now that generated a bunch of images for us. So these are all separate images. If we want to update the text. So do new image. And I'll update this to be back ticks. So that way we can use the dollar sign and get the index value and add one to it. So now we get the text on it, that new image. Let's check what that looks like in the console. So under the elements that we've generated all these images. So that's all done dynamically with JavaScript. So also let's update the images and it will update the path of it. So just do the two slashes so that we're not looking for the HTTP. It'll just do whatever we've got for our protocol. So for using HTTP, it'll use HTTP. If we use HTTPS, then it'll automatically default HTTPS. So you can do that when you just do the two slashes and remove out the HTTP or HTTPS from the path. So let's also do one more where will generate some random colors and create a function to generate random colors. So my random colors, and what this will do is this will return back a random color value. So using JavaScript math, we can generate our random value. So if we do a math random that's going to generate value from 0 decimal all the way down on, all the way up to one. So never hitting one, it's just generate a random value. So we want to turn this random math value to a string with a base of 16. So that will turn and return back a hexadecimal random hexadecimal value. And with now that it's within a string format, we can use the string methods to strip out a part of the string. So starting at index value of two, and we want to return back six characters from that point. So this is essentially generating a random value for us, and we can use this as a random color value. So what this will just return back is the calculation to generate a random color. So we can use the random colors now within the path to the image. So just generate a random color and also generate another random color. So now we've got some colorful images all coming in, random foreground color and background color. And this of course, is only with the dummy image.com. So you wouldn't be able to do this with your normal images. But this is a really neat way that you could generate some nice random images that you can use within your web projects. Challenges for this lesson are to select the element that you want to update. Create a loop, adding a bunch of HTML hyperlinks into the main element using query selector, all select the page elements that are hyperlinks and add the target attribute to go into blank target. Then create images same tags with JavaScript. So just blank image tags. Select all the images on the page, check the source of the images as you iterate through them. And if the value is null, then add an image path to that source going over to dummy image.com. And then also as an added challenge, go ahead and generate random colors for the background and the foreground of those images that you're getting from dummy image.com. 7. 6 Add Remove Elements Append: In this lesson, we are going to be using JavaScript to create element objects and also append them, prepend them, append children, insert before. So using some of the various methods available within the DOM in order to manipulate the content. And then we've got a mini challenge for you within the lesson to use what we did within the last one where we created the dummy images and apply it within this new method, we're creating elements and adding them to the page. In this lesson, we are going to be adding and removing elements. In the last, we saw that we can loop through and use innerHTML to append HTML content. And this lesson we're going to be adding in elements seen the document method in order to add them onto the page. So let's update this source to be DOM five, and we'll create a brand new page and save that as DOM five GS. Linking it over to our HTML file and selecting the main HTML. I'm going to update this and just call this. The output will get rid of the text content in there and also get rid of the ID. So do a quick update to the HTML. And now let's select our put element. So using the document and query selector, this is going to serve as our mean selection element and that's when we're going to output content too. So give it a variable name of output. Could try it out within the console to make sure that it's connecting properly to that element. And now it's a blank elements. We're not actually going to see it on the page. And now we want to create some elements. So when we're adding it with the HTML, we couldn't apply different styling to the elements. Of course, we could add in classes within the HTML. So it's not always the best way to go if you're just doing is kinda one chunk of HTML code. So this method will show you how you can do it, separate it out from the HTML code, and you can separate the elements as objects separately. So you have another option to create elements that way. So just create an element and then using the document method. And the method is create element. And then it requires one parameter and that's going to be a string value of the type of element that you want to create. So if you want to create a div, you just specify a div. If I logged this out into the console, we're going to see that we have an element, but this element actually doesn't exist on the page yet. So even with the elements, you can update the inner HTML of the element. And let's add some HTML that says Hello World and close off the H1 tag. So again, we don't see it on the page yet, and that's because we haven't added it to the page. So we've updated the innerHTML and we've added the Hello World, but we need to append it to the page. In order to append it to the page. There's two ways that you can do that. So one, you could do a selection of the parent. And then using append method, select the element that you want to append to the parent. So that will add it to the page. If we open up the elements within the div there we've got the Hello World, and we can also go as far as to create the element, the div, create an H1, and then add the textContent into the H1. So we've kinda done, skipped a step here where we've got the parent element, but we also want to add in some HTML tags in there as well. So let's create the element two. And then using the same format, document, create elements. Creating the element type that we want to create is an H2. And then within L2, we update the textContent. And this would just say whatever text content that we want within the element. And now just as we did the append element, we want to append the using the element one as the parent. We want to append element to the element one. And so this way, we don't need this anymore. I'll leave it in the code and just comment it out. But we're going to have the same effect where we've created the H1, added some textContent into one, nested that one into the div, and then nested that div into that selected element that we had on our page. So that way we've got the full structure of the HTML elements. And this way we're referencing that H1 in an object format already. Same idea as when we're making a selection of that element. We've got that element referring to the global object of L2. So that means that we can take L2 and we can apply styling to it. So if we want to update the background color and set that to read, that's already working independently. And we've already got what this within an object format. Whereas if want to select the property of background color in the other format, we could only select it to the div, or we would have to add the style attribute with the background color afterwards. And that makes it a little bit more difficult to. Interact with, because we don't already have it selected as separate object. So it all really depends on how much interaction you want with the elements that are inside of your other elements that are nested in. So if you do need to select the L2, then the easiest way is just to create a new element with it. There are different ways to append the element. So we saw the basic way of append. We can also do a prepend. So let me create another elements and I'll just call this one element three. And this can be an H2. And element three, we'll just say new elements. And that 12, add it to the page. This time what we'll do is we'll do a prepend. So we'll still use the same parent of element one. And instead of append, we're going to prepend the element 3 to the content, so that just puts it before. And the difference between append, append drops it in the last available slot, whereas prepend it drops it in the first available slot before the content. So one more example here that this will be this will be pre penned element, and let's update this to be text for element 4 and this will be append elements. So just as the names imply, append and prepend. So appendices afterwards, prepend is before. So it actually doesn't matter which order you're doing it. It's still gonna do the append and prepend the same way. So going into the elements, we've got append and I didn't update the prepend. So let's update the append two element for Save. And that was also, if you notice that because I use that same element and I appended it and then a prepended it. It just kept the prepend. So once you've created the element, it's not going to actually create a new element. It just gets you to have the option to move the element. So if I was to take that existing element, which is element two, and I want to completely remove it out of that object. I can do something like selecting the document body, and that's the body object that we saw before and doing an append of element two. So that will actually shifted out of that container element and append it to the body. So that just puts it here right at the bottom where we've added in that elements two. And then the prepend and append are still staying there. So we've effectively taken the one that says the helloworld, which is referring to L2. And then we've appended it or appended to the body on to after all of the other content on the body. So what happens is you get to move the element around and reposition it. So once it exists, it always exists and the append and prepend will just move to where the new location of where you're specifying. There's also append child. And the difference between append child and just regular append is that these are the append child is going to have a callback. So if we have the value one and we do and elements, and I'm going to create a couple more elements here. So take element five, textContent. And those could just say five. And I'll make one more. And then we'll do an append. And one will do as an append child so that we can indicate what the difference between the two is. So doing us a call back and let's select the parent, the output parent. So this is the parent. And we're going to append the element five to it. And for value 2, we're going to append child of element six that we created. So what happened here is when we look at the source code, we don't see anything different between 56. The reason that five is above six is because we append it at first. So if we append five afterwards, since going to be after six. And there are appended into the parent, which is output, the element with the class of output. So if we were to prepend, it would put it above this div. So it put it above all the other content. And when we are appending the child, if I check out what I've got for value 1, I get undefined. For value 2, it's going to reference the element that we appended. So if you do need to use the element, and I know it's already indicated with L six. So this is going to be actually referring to the same element. They'll L6. So again, there's two different ways that we're referencing it. If you do need to use the callback, then use the append child. If you don't need to call back, you can use the append or prepend values. And if you want to insert it before, you can use the insert before value. So if we have val three and we take the output and use the insert before method, that will allow us to insert the element before. So if you've got, let's say element five. So that's the element that we're inserting. And where do we want to insert it before? So before which element we want to insert it. So let's insert it before the element 6. So that will insert the five before element six. So a little bit more complicated, but you still get the callback. So if you need to insert before, then there is no append prepend child. You'd have to use the insert before and in order to accomplish the prepend child. So there's also to create text nodes. So let's create a text node. So my text and using the document create. So we've got an option to create element. And there's a few different properties that we can create. Four, I create just a text node. We can do create text node, and it requires the one parameter. And that's going to be what's contained within the text of the note. So that would be hello world. If we console log the value of my text1 into the console, Let's going to show you the text node. So it's so thin string format. And now if we want to add the text node into an element, and we can do that as well. So let's select an element that we want to add the text node into. Let's just take one of these that we've got here. That's doing Val two. And we can append child and select the text node that we're inserting and appending. So there's the helloworld inserted. So notice it doesn't add in any elements. So if you want to just insert some text with the elements, then you could do it that way with the text node. And this is the element, so it inserts it into the H2 where we originally had six. It added the string value of Hello World as an insert into the element. And so this way if you want to create a bunch of elements. So let's comment this out. And I do have a challenge for you, for mid lesson challenge. So you can pause the video here and create a bunch of images. So just says we did in the last lesson and output them to the page. But using the create element method. And a walk you through how to do that as well. So just pause the video here. And now for the solution. So the same format, same idea where we want to create a bunch of image tags. And this way is actually going to be more flexible because if want to add any classes or make a selection of them, we can do that as well as we loop through. So first let's create the loop. And this is going to be how many images we want to create. So starting out with I equals 0, and let's do 20 images. It doesn't actually matter. And increment I by one. So as we loop through, we want to create an image. So this image using the document create element and the element tag that we want to create is going to be an image. And what we wanna do is we want to append to the image, to the output content. So that adds a bunch of images to the HTML. So we've got a bunch of blank images. And then as we create the image, we can specify the source of the image. Or also we can do a set attribute. And my personal preference is to set the attribute of the source. But you can do it either way as well. So we want to use dummy image. So let's copy some of the stuff that we had in the previous lessons. We've got the path to the dummy image. And I'm also going to duplicate my color generator. And also we can duplicate the image. So before creating the source, There's the image path URL. And I'll just toggle that. So we're doing the same thing here where we're generating random colors and getting the textbox. And in this case we don't actually have index. We have the value for I need to set my image. So that's the URL to where the image is located. So that added in all of the images. So 20 images generated with random colors. And the nice thing about this is that we can also add different styling to it as well. So let's, for instance, that we want to take the image and we want to apply the style, and we want to do a border. Let's set the string value for the border. So if we wanted one pixel, solid red borders on all of them, that would create the red borders. If you open up the element properties so you can see that the style property is applied. So let's make this dynamic where we'll take the value of I and we'll add one to it. The borders are increasing. So for whatever reason, if you want to have this type of effect, then you can add in and update the borders. So as you're iterating through, you could add those borders. You can also apply the styling. So let's say you had a class of red and that would be border red, solid. And five picks. And otherwise it's just regular box class. And border. And the border is just black. So we could loop through and update the border properties by, we can add in a style to it. So doing the same thing that we had before, where we can select i and get the remainder of I. So it's divisible by two and it equals 0. Then here we can select the image using class list and add a class of red to the element as we're looping through. So that will add the red borders to every other one. Or we can do it to every third image if you want. And then just by default to just going to have the regular white border. So let's take the image class list and add the image of blocks. So they all have the same size borders, so they stock nicely. And then here we can add the border of red and we can also remove the border for box so that we only have just the one class there. And that should actually be remove. So adding the red borders for moving the red porters. And then of course, you can manipulate any of the properties as these are separate element objects that you can separate and select individually as needed. Challenge for this lesson is to get more familiar with the CRE element methods. So the document create element, create various types of elements using different types of tags and then append, prepend, try to append child as well for the callback to the parent element. And also try to insert before to add an element within another element nested within the element. And you get the callback value of that element that you just added. And then there's a challenge as well. So go through that challenge of this lesson's create multiple images, added them to the page, select the image objects and updates saw their properties. You can add classes, you can update the styles, you can append attributes and get more familiar with how you can select the objects that you've just created and added to the HTML page, and then make some manipulations on them. 8. 7 Traversing the DOM JavaScript: This lesson we're going to be traversing through an elements. So make a selection of an element and then moving through the different, either the node list, the collections, the related elements to the one that was selected. You can also see the different property values within the console when you listed out within the element directory. So these are all the different properties. And within the properties, we do have the child nodes, the children, and you can select these and then that can move you through the children of that selected parent and so on. So and then they also have their children, their lists to children. There's the list of the first element, the first element, child within that element. There's the last child, last element child, there's the next element sibling. So you can make use and you can select any one of these properties that you want to use within your code. And I'm gonna be showing you some of these coming up in this lesson. The DOM elements have a number of properties that we can access and get those values back. So let's create a brand new JavaScript file. Create a new one within the same folder. And I'm going to save this as John 6 dot js. So we can navigate through the DOM content, especially if we have some content that's nested. Let's say for instance, let's add in an unordered list and then a bunch of list items and just do 1, 2, and 3. And of course we can create this with JavaScript as well. From what we learned in the last lesson, we can append to the list items. So if you want to do this with JavaScript, again, we're selecting the parent using the document and query selector, selecting the element with a class of output. And then using a for-loop. So I equals 0 and then loop through while I is less than 10. And let's increment I plus 1. And in this case, what we can do is we can get the unordered list. So the main parent for the unordered list and using the query selector. And we only do have the 10 unordered list element on the page. So selecting that one and we can create a list item and document create elements. And the element that we're creating is going to be a list item. So we want to append these list items to the current existing list. So list item and add textContent to it. And you use the back ticks there. So let's update that and setup the value of I plus three, since there's already three and existence. And that's actually be I plus four. So that's the text contents. And then take the unordered list object and append the freshly created list item to the list. So that will add all of those to the list. And that's just done dynamically. So if we want to navigate through the list items, Let's say for instance, we want to select one of the list items and we want to get all of the children that are contained within the main parent. So do a console log and take the unordered list. And we can select the child nodes. And there is a difference between the child nodes value and the children. So let's output both of them to the console, will open in the console, take a closer look. So just save and make this a little bit bigger, get to the console. So one is going to be the child nodes is going to be the node list. And the other one, the children is just going to be an HTMLCollection. So notice that there is, first of all, there's a difference in length. So if the node list, there's all of these and they've got these extra text spaces. So these are if you have any space within your HTML, such as I do here, That's what's being captured with that extra text. So that's where we're getting that listing of the test text list items. So now when I removed those, we moved a couple of them. So we went down to 15 and we have some texts in front here between the unordered list and then we have some other texts there between the list item. So if we were to strip out all of the whitespace in the HTML that they're going to be matching. But it is important to indicate and to know that there is a difference. So if you're after just HTML elements, most of the time you are going to be looking for the HTMLCollection. You would just use children. But just be aware that in case you do come across child nodes, it's going to also include any of the texts nodes. So any of that blank text that's sitting within the source code. So if we want to loop through them for the child nodes, since this is going to be a node list, we can do the for each loop through all of the contents and just get back whatever the value is for the element. And we can console, log out those elements so we can take a closer look if the need be there. So loop through. Save that. So that lists out all of the nodes. And notice the ones that are text. So these are just the blank once again that we were using for the spacing within the source code for the children, That's going to work a little bit differently. So in order to do the children, even though that we do have a length there, it's not going to allow us to loop through it the same way. So effectively, we can't loop through an HTMLCollection. Even though it does look like an array, it's not actually an array. So we're not able to use the forEach to loop through it. So if you want to loop through the children, and children, again, is more commonly used and the child nodes, but again depends on what you're after. You can always use a for loop because you do have a length for the children. And these do have index values that indicate all of the different children. So in order to get the actual children, we can loop through it. So arrays are 0 base or the node lists. So it loop through them while we are less than the unordered list children and length property. And then increment I by one. And this way, if we want to actually list all of them out. And again, this is just going through the children. We can use the I value as the index value to list out the children. So that will work and that will list the children. And the other way the forEach is the way that he can list through the node list. So because we have the children, we can also move through the different siblings of the children as well. So if we want to list those out, I'm going to just comment these, since we've got quite a lot of stuff already happening within the console. So if we wanted to get the next sibling or the previous sibling, we want to apply different values to that. We can do that as well. So if as we're looping through and we want to get for the actual let's choose the children and stuff. So usually what I'll do is I'll set up an element like this. So that just using the main element object. And then I'm looping through an ICANN. Lot easier. It's a little bit easier to read the code when you do it this way. So assign a variable to it and it's going to have the same effect where you're going to be able to list out all of the list items. So we can also see the previous element sibling. And there's a bunch of different properties that we can actually output. So this is actually just getting whatever the previous one is. So if we wanted to, we could update and to another variable there for that. And then we can take previous and update the style and color and let's set it to right? And one of the problems there is that the first one doesn't have a previous one. So previous would be null. So if previous is not equal to null, then we'll update the one that's before. So keeping in mind when you are creating these that some of them, if you do have a condition like that, they might not have the previous. The last one wouldn't have the next. So that's what the last one state block because it didn't have it didn't have a previous one that moved onto. So it's not Previous to any other one, It's the last one. If we want to select the next sibling, or if one I just get the parent node for these children. You can also get the parent. So you can get the parent element, parent node. So let's add that into the previous and the text content. So we'll add to it and write out what the parent is for this element. And I use the back ticks there. So we can get the parent of the elements by using the elements and then getting the parent element. And there is also a parent node as well. So let's, how about we add both of those in their parent node and select instead of parent element, we can select the parent node. So I will just show you the parent node. The other one will show you the parent element. It's going to update it to that current element. And let's add in line breaks for those. So a little bit easier to read. So it's being returned back as an object. So this is just indicating the object. So we need to be more specific if want to update and get the object information. So if want to get the type And in order to get more property information, you can always do a console directory and get the parent element. So that will allow you to navigate through the parent element. And then you can check out all the different properties that you can return back. So you can ISO says if it's got a class within a class name, the inner HTML of it, the last child. And so these are also properties that you can select from it. So it's got the first-child, first element. So list item, so you can select all of these and there's the children, there's the child nodes that we're using. So node list, HTMLCollection that we're using. Let's go all the way down and there should be a tag name. So we can get so that's going to be just getting whatever the parent tag name as parent elements and tag me. So that lists out the parent element tag name. And I think for the parent node, we can also get the tag name. So both of them obviously have the same parent. But this is just one way to access those property values. You have there. You can also move to the next sibling. You can do to previous sibling. So all of that, all of those property values that you see when you list out the DOM directory you can have access to. And then you can pull those, that information back in. If you want to get the textContent or make use of the textContent. There's the previous sibling, so that one's a text node. There's a parent element that we just looked at. Parent node, There's previous element, sibling selects, the other one that we were using there, where we've got the previous elements sibling property value there. And you can navigate through your DOM structure, the DOM tree by selecting the different properties, and these are how they relate to each other. So you can move up within the tree, you can move down within the tree, and you can also move horizontally within the tree to the siblings, selecting the various elements that you want to manipulate using your JavaScript code. And what I mean by traversing through is selecting either the parents or the children, child nodes and children. And how we can navigate through to the different elements from one, using one as kind of a starting place, and then navigate through the DOM tree, selecting the related elements so you can get the ones that are children and the child of the element that you've selected. You can get the parent information of the element that you've selected. So that parent information that you can get parent element, parent node. You can also move through the siblings so you can get the previous sibling, you can get the previous sibling text. You can also move to the next siblings as well. So navigating through and selecting the various elements that you want to interact with. And then there's also the last element, last child, swell. You can use those properties as well to navigate through and traverse through the element, the DOM. So this lesson's challenge is to select the element that you want to start with and then get the parent element of that selected element. Move through, select some of the children, some of the siblings, and make some updates to them. So the related elements that are to the selected one, update, select those elements, make some updates to the properties that content and just get more familiar with how you can navigate through to the related elements from the selection. 9. 8 Event Listeners JavaScript DOM: So this lesson, we are going to be adding list items dynamically solutes every time we click the button, it Dodson a new list item in each list item as well as going to have its own counter. So when you click on it, first, it's going to add a class of red to the L element. It's going to remove it, the class of red out of class of blocks. And then it'll add the class of red back in as you toggle it. So keeping a separate count of how many times you've clicked on it, on each individual list item. And then you can dynamically add more list items. And they're all going to have the same functionality. So they're all running the same blocks of code, is going to be adding event listeners. So create a brand new JavaScript file that we can use and just create a new file, same directory. And this one I'm going to call Tom seven ab.js. So the JavaScript file and first thing we wanna do is select the content of the output element. So let's make a selection of output using the document and query selector. Select the element with a class of output. And just double-check within the console to make sure that we've selected a properly before try to manipulate and update it. So now that we've got this element with a class of output, we want to add event listeners and possibly want to add event listeners to all the list items. So let's do that where we select and get the unordered list. And we can use the document and query selector as well, selecting the unordered list element. And again, double-check, make sure that we do have the proper elements selected. So let's add an event listener to the unordered lists. So addEventListener. So it has a, so each element has a method and that allows you to add event listeners. So selecting the type of event that we're listening for. So most commonly there's clicks, but there's also several others, like different mouse events that we can listen for. So I'll be going over those as well. So adding in the capturing of the event object and creating the function of the block of code that you want to run whenever the vent is hip hop, when that forever the event occurs. So now whenever we click on the unordered list, it's going to capture the event and output the event object into the console. And if we want to select the element that triggered the, that, we can get the element from the event target. And this is going to be the one that triggered the event to happen. And so these are the list items because the unordered list only has list items within it. So there's only elements that can actually trigger the event. So all of these list items, they're all tracked us the one event that triggers it. So let's put the element and get the E target. And then in the console, we'll output the elements and text content. So see what we capture there. So we're able to get the textContent from the element. And that means that we can also have a condition that if the element textContent is equal to one, then what we can do is we can take the elements. And let's toggle a class. Would you have the red class there from the previous lesson? So using class list and toggle the class read. And this is only going to be applied to one. So it doesn't get applied to the other ones because we're looking for specific textContent from the element. Let's also do another one for two. So you can see if the textContent is equal to 2, then we'll apply the other and we'll toggle the other class. So it's only for two. And so we can do an else if statement. And then just lost one. So if none of those match, then let's just toggle the blocks. So that allows us to apply the event listeners to each one of the list items. Now, this isn't the best way to select the list items. So ideally, you'd want to loop through all of the list items. So select the list items from the unordered list. And we can do that by creating our elements array and using the unordered list and then query selector. So if we want to select all of the list items, particularly only within this list, and add to the list items individually. So as we loop through the elements and we can use for each to loop through and get them out as list items. And then for the list item, we can add an event listener. And the event that we're going to be adding four is going to be the click event. And whenever the event gets clicked, we're going to fire a function that's going to toggle the contents of the element. So this will be update event function. And that way we can create a function that's going to update the element. And it's going to take in the element object. So the target, once again, so we can list out the target just as we did with the unordered list. And I'm going to actually block off this earlier example. So to block comment of that. And now we can click out the list items and we're still picking up the list items, but we're using and applying the update element to each one of those list items were out in the EventListener. And because we're picking up the event target, we also have an option to remove event listeners. So if want to remove the event listener from the target, we can do our remove event listener. And we need to specify what event we want to remove. And the events that we want to remove is the update of the element. And we also have to specify what type of event that we're removing. So now when we click it, we're removing the event listener for each individual one. So if we do want to remove event listener XHR have specific properties for those events, then we need to target the elements individually. There's also some additional information when we're adding the event listener. So essentially what the addEventListener does is it sets up a function that gets called whenever the specific specified event is delivered to the target. And there are some options that we can do on that, where we can also, even if we only want it to be clicked once. So let's remove that and within the options. So if you only want it to have it an option for it to be clicked once. Targets. And let's update the class list and do a toggle of the class of Fred to the element. And then we'll add the option for only once. So we can toggle each one of the elements separately. So let's add in the options. So for the click and for the options within the options object. So set the once to be true. So now we can only click the element one time. So this is actually more effective if you want to remove out that luster. So only have the one click. You can set up that option to just have the One-click. Let's select the button that we have on the page already. So using the document and the query selector, select the element button that we have on the page. And we'll add an event listener to the button. And what this event will do is this will add to the list items. So selecting through the button, add an event listener. And we're going to add a click event to the button and creating a function, add list item function. So it's going to run that function whenever the button is clicked. Let's create the function. So I usually like to keep all the functions together. So odd list, item function. And we want to append to the unordered list. So let's create our list item is in the document create elements method. And we're creating a list item for the page. And then that list item, let's add in some text content for the list item. And we'll just get whatever current number of list items that we have and we'll increment it or we can just set up a counter. So let's create a variable and I'll call it counter. And that's going to take whatever the length is of the current list items. And then we can use the counter value and the back ticks. And I'll just write some text into here and just say new list item. So now when we click it, and of course we still need to append it to the page. So take the unordered list, append and append the list item to the page. So that will add new list items. And we should also increment the counter so that we have different values for each list item. So notice that with the existing list items, we still have that event listener that we loop through and we added. But the new list items, they don't have an event listener on them because these are newly added to the page and they didn't exist when we selected all the elements and we loop through them and then we added the list items. So there are a number of ways to do that. And if we add an EventListener, such as the one that we had earlier when we had the unordered list event. We can add that event listener to it. And that will fire off still on the unordered list. So save and let's add some new items. So these ones will still get the event firing off because we did add the event listener to the parent, the unordered list. So that's still available and that's still going to work as well as the existing ones are going to work as well. The other way to do that. So that's the parent that existed at the time when we set the event listener. So it doesn't matter how many list items we add into the parent. It's still referencing that same element object. The other option you have is to add the event listener. So the same thing that we did here where we update it, we can do the same statement where we're calling that function and then still the same option parameters for that function. So now when I add the list items, they're all still going to run that same function. Also, when you do create elements, you can have values to those elements. So taking the list item and if I want to create one called counter and set it at 0. And also as I loop through them, let me set this value that's going to be in the back ground so we can have individual counters to each one of them. I'll get rid of the only clickable once option. And we're going to be allowing to have multiple clicks to it. So when we, whenever we click it, we can update the value. So we get the element object and we can add in the counter there. So now when I click it, they're all going to be 0. So what we wanna do is we want to update the counter. So let's, let's try that where we're updating the counter. And we'll also toggle through a few different list items as well. So if the value already has red, so we'll do condition. So if the target class list contains the value of red, that means it's already there. We're going to add to the class list the value of box. So see what happens is now it's switching over to box if it already has read. And I'll just stay black like that. Also, let's track out the contents of it and update the value of the counter. So counter increments by one. So every time we're counting it, we get an incrementing count. And we can also use this and output it to the element Targets inner HTML. And let's just assign the value of the inner HTML. So we'll get whatever the existing HTML is. Or we could just append to whatever the inner HTML is and we can get whatever that counter value is. So adding in the new counter. So we can track it as a visual. So it's going to continuously keep adding to the counter value. And that's only if it contains the red that's outing to the counter value. So actually, let's update it. So it's appending to the counter on every click. So this is actually not ideal. So ideally what we wanna do is we want to add a span to it. So let's make some quick updates to this and put our element targets as l within the update. And that way we can simplify some of the code that we've got here. So we're checking to see if it's red. If it's red, then we add in the box and we're going to separate some of the logic here that we have, that we're toggling the value of red to it. And let's get the value of the element children. So Console and element children. So see what children's current element house when we click it. So it's gotten nothing within the HTMLCollection. So if we were to add in a span with the counter, so as we select the element, Let's also create an element so it's going to be a span. So using document create element and the element that we're going to create is going to be a span. And the span text content is going to contain whatever the counter value is. And then also, let's take the list item append and we'll append the span to it. So it's going to give us that value that gets appended to it. So this way, we can select the span and update the value of it. And we want to add the span actually to all the other elements as well. So let's create a function. And I'll just call it adder. And this is going to be whatever the main list item is. And this way we can just simply add to the list item. And also we can do everything. We're, we're adding the update of the element function to them all as well. So this just simplifies some of the coding so that we don't have to constantly redo. As we create new elements. We're adding it to the existing element. And as we add and create new elements. And actually let's also update the textContent within the outer function. And let's move the counter up to the top. And it needs to be after the element list and before we try to use it. So that gives us the counter. So now we're just adding a bunch of items in there. And let's also set this to 0. And then we'll take counter and we're going to add one to it. So this will give us a consecutive list item. We have all the element properties added to it. And now we want to select the span within the document and just update the value in there whenever it gets clicked. So last part is that we want within the element that we've selected, we want to get the span and then just update the contents of the span. So let's select the element and we already have the element object. You can use the query selector to select any span that's contained within the element that you could use children. But using the children is not as preferred because this means that you need to have the exact same structure for each element. And in this case, if we have a span or if we added in a particular class, even better yet, if we add in the class, then that's more specific to the element that we want to update. So we're updating the element counter, and let's set the inner HTML of the spam. And we can just use the text content of the span to be whatever the element counter is. So this way it will constantly update that particular element. And the error that we're seeing there means that there's actually no span within the list item. And when you go into the source code, you can see there's no span in the list item. So let's make a quick update to the code. And the reason is that we're updating the textContent, but then we're adding in the span afterwards, so that append needs to be after word sin. Let's double-check within the list items that we do have the span. So that means that we can actually update the contents of the span item. And we don't actually need to list out the counter value as this is going to be contained within the span. So every time we click, It's going to update the list item value and only the item within the span. And this will work the same no matter how many items we add to the list. And of course she can get rid of the adding of the classes as well. So that slot more clear to what we're adding onto the page. And then this span can as well. You can add in to the span, you can add in a class. So using class list and odd. Now let's add in a class of counter to it. And we can also select it by the class of counter. So that can be more specific that this is the actual counter that we're selecting and that also you can apply some styling to that. So padding and a background color. So now when I click the list items there, they do update. Let's add some new ones to the list, so get them to update as well. I'll also going to select and for the list items, Let's add some padding to them. And also margin. So I can space out the content a little bit better on this section on class list items, that's just list items in general. So notice that there's also an error that just appeared there. And that's the error that if I click on the span, then it's attaching the EventListener to the span. So the span actually becomes the target element. And that target element doesn't have a span within it with the class of counter. So that's where we're throwing the error there when we click on only that element part, that counterpart of it. So if we want to remove that option, we can be more specific to where we're adding the EventListener. And instead of updating the element, we can pass in that update elements and be specific with the list item because we have the list item as an object. So this will allow us to be more specific with that particular list item. And I'll just remove it that extra bracket. And that's where we're throwing the error and try that one more time. Still looks like we have an error and we're trying to apply to an undefined element. So let's go down here where we're updating the element and debug that, update the element, I guess getting that full element being passed in. So I can remove out some of this content here and I don't have to worry about the target anymore. And that way even if I click on the span, it's still going to apply that one event listener not actually good, is going to know which element on targeting the event click on. So that's one way that you can get around having those types of errors where you've applied the click event to the parent and the child within the parent is also getting the event handled. But you're relying on a particular value and you're relying on the parent to have a class or a span or a particular element that you're selecting and manipulating. And that's also one of the benefits when you're creating the element. And you've got a separation of all the elements on the page. This lesson, we are, the challenge for this lesson is to add event listeners for clicks on the elements, also add event listeners on a list of elements. So the entire parent of the element, and then each individual element and customize the clicks so that you can only click, the user can only click the element once. Also, add, remove the event listeners. Depending on the click, set a custom value like the counter that we used in the example that can add to the element object. And then we can use that value and pick that up and customize it some of the output for the element that was clicked and interacted with. So update and customize the properties of the element that was that was clicked. Also dynamically add elements to the page that also behave the same way as the original elements and that are fully clickable and interactive. 10. 9 More Event Listeners DOM: In this lesson, we're going to be looking at mouse movements. So there's mouseover, mouse, enter, mouse out and now smooth. So how they're going to be functioning and sewer going to be tracking it into the application and counting every time that event is triggered. Within this lesson, we're gonna make some updates to the JavaScript code. So create new JS file and link that to the HTML file. So I'm just going to call that DOM 8 dot js. And we're going to be trying out some other event listeners. So we saw that we can have a keyboard event. So there's also mouseover events that we can do. So once again, we'll select the elements so the output elements, and I'm actually going to apply a class to it, some a border and then also a width to that element so that we can see the boundaries of the element. So we can actually see if the mouse is over the current element objects and set up a width set up at 200 and pix height of 200 pixels as well. And save that. So that gives us the boundaries of the output element. So let's make a selection of it and add it into the JavaScript. So assign a variable value to it, and that's going to be the object with a class of output. Save that, go into the console. And just make sure that we've selected the element properly with output. So now we want to apply an event listener to that element. So specify the element first that you want to apply the EventListener to and then add the event lister function. So we saw that we can add in different types of event listeners. So let's try the mouse over event. So that's mouse over event and will fire off the event object whenever the mouse is over. And then we can console log the event object into the console. So whenever we're on top of the output, we're adding the, we're triggering the event to happen. And we can also update and update its background color of the element. So take output and then set the style and the background color. So background color of the element to be red. So whenever we're mouse over, we'll set the background color to be red. And that should actually be an equal sign. So whenever hover over it, it's goes red. Also, let's add another event listener. So this is going to be on the mouse out. And we'll update the background color to a different color. So whenever we're mouse out, then we'll update the background color and how we set it back to white. So now whenever we're on top that you get the background color to be red. And whenever we move out of the element that goes back to white. And that's updating the style attribute. So let's add to the console and we're going to track in the element type. So within the element there we do see what type of element it is. So we have the option to specify the type of event that occurred. So if we do the event type and event type, this will help us determine in the console what exactly were happening. So mouse over, mouseover, mouseover, mouseover, mouse over and mouse out. There's also a few other ones that we can track in. And we're not going to update the background color, but we can just console log what's happening. So there's also a mouse move. And this is going to occur if the mouse is moving on that particular element, that's particular selected element. So we can do that on a particular elements. So I'm going to select the elements in, I'll give this one a class of test. And we'll select the element using the document query selector. Select the elements with a class of test. And we'll add the mouse of atlas or onto that element. So whenever we're moving, we'll grab the mouse movement, that element. So it's only while we're on that particular element where we're doing the movement. And for this one, let's do the background color to white. So all we're on top of it and moving, we're updating the background color and selecting that particular element. So we can see it clearly which one is the mouse move? There's also one that's similar to the mouse over, and that's the mouse enter. So this only fires off one time as we enter in the element. And then it's going to fire off again when we leave. So when we first come in, it goes blue. But as we move around, we're still going into the mouse over. And as soon as we leave then we get the mouse out event. So that's the difference between mouse enter and mouse over. That mouseover will fire off multiple times while we're over the particular selected element, whereas the mouse enter, we'll just do that the onetime. Let's also add in some counts to the element that we can see what the differences and we'll truck values for over. We'll track values for Enter. We'll track value for out. And we can also track one for move. This way we can see the difference between how many times it's going to be updating. So let's create some content within the output area. So looping through the object. And we can do that with a for loop. So picking up the property of the object and then looking through the object contents for the game object. And as we loop through, we can console log that information out. So we can take a closer look at the object information. So if you want to get the actual property, we can get the property, but we can also get the value. So just comma separate that and using the game and then specifying using the bracket notation, the property value. So that's going to show us the score plus the value. So we want to actually put this on the page. So create an elements using the document. Create elements. And the elements that we're going to create are going to be DIFS. And then within these elements, we're also going to create a span for the score. So let's set that up where we've got the span object that's going to be contained within the main parent element. And using document create elements will create a span for there. And then for the output, let's append the element. And then to the elements append the newly created span. And before we update the span within the element, update the textContent to equal to whatever the value of the property is. So this is where we want to output what it is that we're looking for. So whatever the value of the property is. And then within the span will set up that text content of the span to be equal to whatever the game property is. So we know that that's 0. But let's set that up in case we dynamically want to change that. So that gives us a listing of all of those values. And let's get rid of some of the were actually will make the height of that element larger. And we'll also get rid of some of the padding there for the list items, the margins, and minimize some of the padding for the list items. So we've got all of those being tracked there. Let's also add in some spacing there between the property value and the property, the property name and the property value. So we've got all of those and we want to track to them as we do the movement to them. So ideally, we need a way to track into what needs to be updated, what element value needs to be updated, do actually need a way to associate element with within the game object. So we're going to make an update to the game object. So selecting out whatever the game property is and updating the game property, and we'll set a new value to that game property. So right now it's just 0, but we're going to put an object within an object, so the value will be 0. So just using the JavaScript value and set that to 0. But then we'll also going to select the element and associate that new element that we just created into that property. So that way when we list out the game object, we can select and we can track the updated values. And we also have access to the element div that we need to update and output. So right now we'll just set them all to 0. And then as we want to make updates to it, we have the mouseover mouse out and all of that information there. So let's update these to be consistent to the event types. So it's most over Mao center, mouse out and then also the mouse move. So tracking all of those back to 0. And that way we can select from the gameObject using the event type. And we'll do the same thing for each one of these. So as we go over it, we're outputting the div that's related to that particular object. And we can also get the value type. So getting the or we can just do that within the object itself and we can add to it. So incremented by one. So wherever the property type is, just do an increment by one. And because we're doing a lot of repetition, best is to just do a function. So update the property. So we just need to get whatever the event is. So I'll just call it EV. And what we'll do is we'll log out that EV content and we can increment it by one and have the same function call over to the event type. So we're just passing in the event type. And from there the function will access the global game object and make an update to that value. So it'll actually have to output into the console. And this going to save us quite a bit of coding lines of code. So we pick up the game object. And then we can take the value of that game object to an increment at when it fires off. And we can also take the game EV and select the element that's associated with it. Textcontent to whatever we've got for the value. So now as we go over, we can see the incrementing values there. And we also want to output whatever the EV is. So let's do a refresh and I'll update this as well to track into the output element. So not just val element, and we can get rid of the style updates. So we're just simply just tracking out the content within the output. And we're not going to be updating any of the styling for the elements. So as we move the mouse around, we've got one mouse center that was triggered. The mouse out, triggers whenever we're out of any of the elements that are inside as well. And also of course, whenever we leave the main element and the mouse move triggers whenever we're moving the mouse over as well, triggers whenever we're over top of the element. So there's a slight difference there. And it depends on what you want to track that you could set up the different event properties. The mouseover will trigger the event when the element and its children elements. So whenever the mouse pointer enters any of the elements or the child elements, the mouse enter is only triggered when the mouse enters the main div element. So that's what we've just got. The one mouse enter. The mouse move is triggered every time the most pointers moved over the div elements. So every time we're moving, it's getting triggered. So when we're moving between the different elements, then we're counting into the mouse over. But if we're just moving it around with inside of the element, that's where you'd be using the mouse move. So again, depending on what you want to capture, you can select and update the different event listeners for the mouse. And of course, you can capture a number of other op values as well. So there's the wheel event. So when you're moving the mouse wheel, you can capture the wheel movement. And this is going to be another different type of event objects. Let me add that into our list, into the main game object. So we'll, and that way we can track the mouse wheel. So this is me actually moving the most. We'll, whenever I'm on top of that element. And because we're specifying that listener only within the output element, if I'm outside here, I can move the mouse wheel and it's not tracking into our counter. So it's only whenever the mouse is on top of the main element that you've attached the event to. Challenges for this lesson are to add the mouse event. So you can add it to an element or you can add it to the entire document. Capture the mouse, move the mouse out the most enter mouse over events, run some code upon triggering of those events by the user and update some of the element properties of the element depending on which event gets fired off. 11. 10 Keyboard Events JavaScript: So in this lesson, we're going to create some input fields. When the focus is on the input field, it's going to go red. Cells are going to track the text. So whenever we've got some key presses that's going to automatically add it into the H1 element on the page. And that's key presses anywhere on the screen. And updating the H1 element with the key presses also for the inputs. So whatever the content has been changed, the box will be read. If it stays the same, it will be block. So you can select those and unselect them. If we make a selection and if we press enter on the input, it will send the contents of that input field. So this lesson, it's going to be some more event listeners. So keyboard event listeners and event listeners for inputs such as blur, change and focus. Event listeners. In this lesson, create a brand new JavaScript file that we can work with for the keyboard events. And just remove that one. And we'll create a brand new file. Call that DOM 9 JS. And save that and attach it to the HTML. Man, save that as well. So this lesson, we're going to start by making a selection of the element, just as we've done in the previous lessons using the query selector, selecting our main element that we want to use. And that's the one with the class of output. Also, just double checking just to make sure that I've selected it properly for our try to use it. So I do have it within the console there. So I want to add in some input fields. And then we're going to apply some event listeners to the input fields that we have. So let's create those and using a for-loop. So let I equals 0, while I is less than five, will create five input fields. And this will just be creating the elements. And using the document create elements. And the type of element that we're creating is going to be an input. Up, take the output and append the element to the main output area. So it's going to create all of those input fields. Let's also create some styling for it. And this will just display and set it as display block. So we'll set for the input fields. And then that way we can use the class list and add the class of blocks. So each one of the inputs is going to be on a new line. I'll also, let's set the width to 100%. So they're going all the way across, or maybe that's a little bit too much. So 250. And we'll do a margin of auto, so center of the content. So it's our list of inputs. Let's also specify the input type. So for the element set, attribute and set the type, be text, input. And double-check within the console that we've got a bunch of elements there with a text input. Also, let's set one more attribute and that's going to be the name. So as we loop through their setup, the name and the name can be input. And then we'll add to it whatever the value of I is. So that way they'll all have a unique name. They all have different input names. So we can track that information. So we also want to add event listeners to these elements. So on. Let's start with on focus. So whenever the focus is applied, and there's a few different EventListener says focus. There's also focus in and focus out. So adding in the event listener. And this is what occurs whenever the input gets focused. So if we want to take the elements, add event listener and the event that we're listening for is focus. So what did we want to happen whenever we apply the focus? Let's select the elements. And we still have it with an object format within the parent. So we can still reference it. Update the style and the background color. So let's set that to read. And then also for the element style and color. Let's set that to white. So whenever we focus on the content, we selected and we apply focus. It's going to update the properties of that element. So there's also whenever we want to do a focus out or on blur. So the opposite of autofocus is blur. So we'll duplicate that. And we'll update the background color to be white. And the regular text color can be block. And this is going to fire off whenever the blur happens. And the blur is the same as just focusing out. So let's try that one more time. So now whenever we're focused, it gives us highlighting type effect to the element. So there's also change. So if we do change the content within the element, we can track that information. And this will work on input, select our text area. So the event that we're listening for is just called change. And for this one, let's update the background color to blue. And because the blur is overriding the blue, we need to do something different to it. So we're going to update the border. So give it a red border around. And then it'll reset the border once we focus it. So just go back to block. So type something in and it's red. And if we don't make any changes to it, we're turning the borders block 2 block. So it can make that slightly bigger. It's a little bit easier to see. So whenever we click on it, it goes red with the white font. Whenever we blur, it goes back to white background black font. And whenever we make updates to the content, so if we don't update any of the content, that we don't have a red border around it. But if we do update the content that we end up with a red border on only the updated content that we have within the input elements. So besides that, we can also track on the elements themselves. We can track key presses and we'll just do it on the parent. So tracking all of the key presses on the parent itself. We're adding an event listener. And the one that we're listening for is key down. So that means that one of the keys has been pressed. And there's also a key up which is the opposite. So tracking those two, if there's any type of key actions, we can track the key down and the key up. Also, if the focus is on one of the inputs, maybe we want to submit that data or wants submit the tire form. Then that way you could press the key up on the element itself. So on each individual element, you might want to add an EventListener on key up and picking up what key has been pressed. So just going back over to here. Within the console, we're grabbing event object. And from the event object, we can determine what key actually got pressed. And there's a number of ways to do that. So let's open up the console and clear that. So we see that we get the key that's pressed. And we've got the key code, which is key, see, there's the actual key. It goes by key codes. So every key on the keyboard has a specific code, so you can use that as well. And then there's also which, which usually is the same as the key code for most keyboards. And the Enter key as well. We'll have a key value. So to have a code of Enter, it'll have a key of Enter. So whichever one you want to use, and typically I'll be using the key. And I did want to note that the key code, although it's still there in most of the browsers, this is one that typically isn't used anymore. So when you are using the key, don't use the key cold or tried to avoid the using the key code. As it's likely not to be included in some of the future browsers. So that will avoid any type of issues that you might be having. So selecting the key. It's going to output the key, whatever was pressed. So within the event listener, we're listening for on the event object, we're listening for the keyup function. We can check to see if the E key is equal to enter. And that means that they wanted to enter that particular input and maybe send that input over. So within the console log, let's take the element text content or we can actually use the element value because this is part of what is contained within the inputField. And save that. So let's try it and go over to the input fields. Type in some text. If we do enter, then it's going to track all of the content on that particular selected input field and only the ones that we've selected. So it can kind of simulate what we are, what we might be doing when we're submitting a form or ever we want to submit the contents of an input. So there's other keys that we can track as well, and those are the arrow keys. So whenever we're clicking and we're tracking that arrow key information. So the arrow down, arrow up, alright, and so on. And selecting on the main element. So these would, you'd probably want to track them into the document. So not just on the output area, so tracking across the entire document. So now we're tracking any of the key presses on the document. So not necessarily we're also tracking on the input field, but we're also tracking on the entire document. So we can use those and I'll just remove out some of these he logs and we can track and listen for a specific key presses. So if you've got arrows or if you want to add some content to the page, Let's create another elements, create an H1. So using the documents creates elements. And the element that we're creating is going to be an H1. And then output append H1 to the output. And let's update the one with whatever the key presses or so H1 inner HTML. And that should be each one, and then add to it whatever the key process. So now whenever we're typing, it's automatically adding it to the top. And we've got to have some spaces there if we want to have some new lines. So whatever we type, it's tracking into the H1. So also let's see what happens with the arrow keys. So it's tracking the key value as arrow up, arrow down, and so on. So I'm actually going to remove this. So it's putting quite a bit of content within the HTML. And we'll track the arrow keys and the arrow key presses. So that's coming up in the next lesson, we're gonna do a mini exercise with tracking the key presses of the arrow keys. Challenges for this lesson is to create some input fields, add some of that listeners on those input fields such as focus, blur, and change events. It listened for a particular key presses such as the Enter key and take action on that key up and key down on the entire document and also how it works on the element. Update the page of elements, depending on the key press. 12. 11 Element Mover with Keyboard: This lesson is going to be an activity where we're going to be interacting with the DOM content and using the arrow keys on the keyboard to move an element on the page. Also, the element can be clicked. It's going to create a net brand new element with the same position value. And then the new element is going to be then taking over and being the one that we can move along. So basically clicking on it. It gives it a random background color and takes the left and the top position of the previous element. And from then we can continue to move it. So once again, just created a brand new one and moving it along the screen. So using the arrow keys to position an element and also having the option to move page elements. Using JavaScript code. Create a new source file for the JavaScript source code for the lesson. And just create a brand new and I'm going to call it DOM 10 dot js. So saving it as well within the same root directory. And we're going to select the main output area. So this is going to be the output area that we're going to use. So select output and using the document and query selector, selecting the element with a class of output. So it's going to be the mean container. And I'm also going to create a basic game object we can use to store some values in, and it's just a global store for values. So create a property for x and also for y. And we'll just set those values at 0. And then also for the element. And right now that element it just be a blank object. So that's our main core game object that we're going to be manipulating. So we're going to be using the keyboard presses to manipulate the x and the y position of the element. So let's set up the document and add the event listener. And the event listener that we're listening for is key down. So there's key down and key up. And then whenever that gets pressed, We're going to fire off the event object and truck, which key just got pressed. So we're using the key value for the arrows keys are going to be tracking the arrow keys. So let's select the key value using the event object and then returning back the key value. And we also want to track on key up as well. So we're tracking the key down as well as the key up. So try dots and I'm just going to press the right arrow. So as I'm holding the right arrow down, it's firing off and it's continues to write the right arrow within the console. So that's actually what we want. We want to be able to pick up the object information and make some updates to the game object. So let's do a check to see if the key value is equal to arrow rate and that's going to be camelcase. And if it is, then we're going to take x and we're going to increment it by one. So let's, and actually this should be Game x. So we'll increment it by one. And let's take a look and we'll see what we've got for game. So x has a value of 10. Also, let's add one more where we can have speed. And I'll set the speed to 10. So AX is actually going to increment with whatever the value of games fetus. So now let's list out the game object. So right now it's at 0. We press the right arrow and let's see if there's value of x for the game speed. So we've selected the element. So now we need to also create an element for the page. So right now, if the element value, if there's no object there or if it's currently null whenever the key is pressed. So we'll do a check to see if the game L and if this is null, then what we'll do is we're going to create an element. And I'll run the maker. And what this will do is this going to return back an element that we're going to create using the x and the y coordinate values. And then we're going to return that back into game L. So let's create the function That's gonna make the element. So creating a function that's going to get invoked. And this is just going to get appended into the output area. So create the element using the document. Create elements. And the element that we're going to be creating, we'll just make a div and then we can apply some styling to it and take output, append the newly created element to. They're also going to update some styling. So let's set the position and in order to be able to move it on the page, just like with styling. If we want to position, it, would need to use either absolute or relative. So let's go ahead and we're going to use absolute. So absolute is going to be the coordinates on the entire visible page area. So septa left position to 0, the top position to 0. So it corresponds with what our starting values are for x and y. Otherwise, we could also pick up the values of the position of the element. That it's lot easier just to have it in one variable that you can update the position of. Let's set the width of it to a 100 picks, will set the height of it to 100 pixels well, and add in a border and just have a black border for it. So when we create the element, adding into its class list, add the class of box to the element. So let's see what happens. So there's our box. And of course I've got the screen zoomed in quite a bit, so, so it's fairly large there. So what we wanna do is we want to update the element position. So we can do that by creating a function in order to handle the update position. So what this function will do is this will take the value of x and the y. And it's going to set the game style properties to match the x and the y position. The element properties too much the x and the y position. So one more thing with Maker, we can return the element that just got created. So update the position. And let's select the element. So this is going to be contained within the game elements style and set the left position to gain x. And we need to include the pixel value. And then we'll also set the top position as well. So top, and this is going to be related to game. Why? So every time we do make an update on the position, we need to run the function to update the position of the element. So first it creates it, and now we are able to move it on the keypress. So let's track some of the other key process. So we've got the arrow left and this is going to be subtracting. So now we should be able to move it left and right. Let's add in the up and the down options as well. So if the key press is, if the arrow is up, we can update the value of y. And up means that we're subtracting. And down means that we're adding are. So first, create the box. We go down with a down arrow, up with the up arrow, left with the arrow, left, right with the arrow rate. So that gives us the ability to move it depending on what the value is of the value of the arrow. Again, to add an event listener to the element itself. So where we've got the maker, we're recreating the element. Let's add an EventListener. And I want this EventListener to fire off once. So this is going to be a click event on the element itself. And what we want it to do is we want to run the function maker. So it's going to actually create a brand new element. And it's going to attach that new element to the game element value and set the properties to fire off once. So let's see what happens now that we're able to move it. And if I click it, it's moving that element again. And we need to actually have a function that's going to attach it in to that element. So let's create the function that's going to run. And it's going to actually take the element object and run over to make her, and then attach that to the game element. So that's what we were missing there before. So really try that one more time. So we can move the square. When we click it. We can then move the next square to wherever the position is. So also, whenever it runs, we want to update the position. In addition, we can also set the position here where we're just selecting for the element and updating the style position. So it doesn't push and set it at the default of 0000. So that way we don't even need to update position there. So restart it. So now whenever we click the square, it's going to create a new copy of it, and then we can continue moving with the new version. So let's set this at 50 or make it a little bit smaller. And also, let's randomize the background color of the element as we create new ones. So setting the style and background color. And we saw this before where we can set a background color and we can get a random color using the math random. Turning it into ToString, setting a hex value of 16, and then getting the substring value of that, starting at position 2 and returning back six characters. Sql update the toggle of you for that. And I'll see what happens now. So now we've got a square, purple one. We click, it, changes color, but we live the purple one where it was originally positioned. So we're creating brand new squares and we're able to move them around. And then these are just random colors. So with the colors, it's easier to tell that we're actually creating brand new squares. And it's the new square that is taking over the position and the movement. So we no longer have an option to move the old squares. And because it's only got the one click, the one, onetime click, it's not actually creating any additional new squares. And this is the style attributes that have been set with the JavaScript code and where we last left off with those attributes. And also let's apply a border radius. So if want to make them round, we could do that as well. Now we have a round dot. We click on the dot, changes the color and allows us to continue from that spot where we lost moved it. Challenges for this lesson are to create an element, add an event listener that listens for keyboard events, check the key with the condition and then update the x and y values accordingly with the arrow keys. When they are pressed. Create a new elements whenever the original element is pressed, and then allow the user then to move the new element using the keyboard. 13. 12 Add Animation Frame: In this lesson, we're going to take what we learned in the previous lesson and extend on that. So it's still got the dot but smoother animation because we're using the animation frames. And then also we've got the red border boundaries. So it can't actually leave outside of those border boundaries. We still have the click effect where when you click it creates a new element, leaves the old one in place. So that's still working in the same way. But whatever the new ones are that we get created, there's still bound within that mean boundary that we have within the object where we've got the rectangle. In the previous lesson, we saw how we can attach an event to keyboard. And whenever we press the keys, the element can be moved so that it can also include a smoother animation of this. So this lesson's going to show you how to do that. We're going to create a smooth animation of that movement. We're using the arrow, arrow down and arrow up events. So first off, let's track in the keys that we want to use within an object. And that way we can check to see if it, Arrow key is one of the ones that exists within that object. So adding in all of the arrow cues. And we'll just set that to false. And setting some Boolean values for the arrow cues. And this will allow us to track if the arrow key has been pressed and if it has actually been released. So when it's pressed, it's going to go to true. When it's released. It's going to be false. When we do the animation, we're going to check on it. Then the key is if the value is true and if it is true, then we're going to apply the movement to that particular element in whatever direction has been specified. So that is as well false. So just setting them all to false. And then the last one is the arrow down. And also set that one to false. So that's going to set up the option that we can just have the one key down that we're listening for. So we can get rid of some of this excess here, where we're listening for one of the key downs. We can also just do the check here to see if the element doesn't exist. Or we can by default just create one if we want as well. So that's another option that we have. Some, maybe by default we just create one. So we know that there's always one there. And that way we don't have to continuously run the check to see if that arrow, if that value is there. And now the key presses are going to be a lot simpler. Because what we're doing is we're just listening for the key press and we're not tracking actually what arrow key has been pressed right now. And we're going to be doing that later on. So we're just seeing that there's a key down. And whenever the key down, then we're checking to see if the E code is within the keys array. And if it is, then we are setting the value of keys. And we can use the bracket notation and whatever the key code is. And just set that to true. And the reason that also we're tracking it within the array is that if we don't use that condition, so we can set this to be false. The problem will be that it actually would just do this outside. So once we create the game object, it looks like we've just got a problem there. So setup the element and then this is where we can set the maker value. So the problem with not having the condition of checking within the array if it's a valid key press, it will track the key process that we have. And if I look within the keys, we can see that they're all false. And as soon as I press it, it's gonna go true, but it's going to also track the other cues. So now I've pressed a bunch of other keys. And when I look within the keys object, I've got additional keys there that are being tracked. So I don't want to track these other keys. And that's why I've got the condition that wraps it just to check to make sure that the code is contained within the key array. So make sure that it's within keys. And that way we're only going to be setting the valid ones to true and keeping the object clean. And do the same thing for the key up. So now we're tracking whatever the keys are pressed. But we also need to add in an animation frame that can track the movement. So I'm going to do that within the global object. And this can just be a global object called move. And then for within the window object, we're going to run the request animation frame. Which will update the position of the elements. So it will continuously run that update of the position. And then with an update of the position, will run the animation frame. So now we need to introduce the movement of the elements. So we want to ideally update the x and the y position depending on what the key press is. So here we can check to see if the particular key press. So if the key's arrow right is true, then we'll move the game x and increment it by whatever the game speed is. So let's try it out and then we'll do the other arrow keys. So that allows us to have a more smooth movement than what we had before. Notice before it was a little bit more choppy. So it can update the speed, even slow it down a bit. So there's our movement. Let's add in the other arrow keys. And this way as well, we can add in multiple conditions so we can check to see if the value of the game X is larger than the value of the width of the main container. So we can do output. And before we set some conditions, Let's update the out output size. So selecting the output elements with the class of output. And let's set its width to 400 picks and height to 400 picks. And I didn't a border. So we can see where the border is smooth. This can be just a red square. So that's going to be the boundaries for the element. And we don't want the element to be able to travel outside of the boundaries of output. So let's do a check to see where the position of the element is. And there's a way to get the boundaries for the main element. So let's do that where we'll get the Elements DOM rectangle. And we can do that by using the elements and a function called get bounding client rectangle. So what that will return back is, that's going to return back the DOM rectangle. So it returns back, left, top, right, bottom, x, y, width and height value. So this is the main parent values and we want to make sure that we're not exceeding them some more Going, right. We wanna make sure that the value is still less than, so value of x is less than the DOM rectangle, right position. So see how that works. Let's move the dot and we run into the problem there that we run off the end of the dot there. So we can also adjust that for the width of that particular element. So we do write minus 30 and just drop it within the brackets. So that should limit us to not be able to move past the boundaries. Let's do one for left. So let's arrow left. And we'll update the start position to 5050. So that way it's not starting within the top corner where it might possibly be out of balance. So while we're, the value of x is greater than 0, so that's an easy one because we always want to be larger than the value of 0. But actually in this case, we also want to consider that we're using the boundaries. So if we want to use the boundaries, then we got to take into consideration with the DOM rectangle. Left position is so it's not actually going to be 0, it's going to be the DOM rectangle left position. So let's try to move the dot. And actually this should be subtracting the game speed. So that prevents us from moving off the position. Let's also update the down arrows. So if arrow is up and the value of y is larger than the DOM top position, then we're okay to subtract. Otherwise we're going to stop the subtraction. And then the update and the positioning is still can be the same. So if we're using down, That's going to be incrementing the value. And this actually should be y not x. So incrementing the value and we want to make sure that the value is less than. So just as we did over here, the value of the DOM rectangle, bottom position. So let's see how that looks. Go down. So now the object has to remain within the boundaries. Let's try doing another one. And then they're all going to have the same restrictions because our animation frame is running. And that's keeping those elements in the country constrained within the main output boundaries. Challenges for this lesson are to use the request animation frame to produce some smooth animation, some movement with the keyboard and smoother movement, use the get bounding client rectangle to get the bounding boundaries of the parent rectangle. So making sure that your current objects can't leave the boundaries and update the element position if the keys are pressed using the EventListener keyup, keydown at tracking the object Boolean values for the arrow keys. 14. 0 Game Clickers Introduction: In this section, we are creating a game and the game, and the focus of this game is to create interactive elements dynamically with JavaScript and using the CSS grid in order to dynamically construct a grid object. This can be used for a number of use cases. And in this case, we're making a really simple game. You can start and stop the game. And the objective of the game is to click the red squares before they disappear. If you miss it, then that counts as a miss. If you click it, then you get a score. So you get, the score increases and you've got to try to keep your hits larger than the MRS. There's also options to dynamically update the difficulty of the game. So if you're playing the game, if it's too hard, you can update that and that will make the gameplay easier. So one of the other objectives is to introduce more gameplay. And as you play through and you construct your game, you're going to see that having the ability to adjust the values within a global game object is going to be a really great way to make a nice functional game and then adjust and do the testing. And when you are creating a game, you can have to play through a lot of times. So the more flexibility and the more ways that you can do the testing, the better for the developers. So if you want to have six rows and five columns, it will generate the game grid. This is a fully responsive game grid. So depending on the size of the available screen, the CSS grid will handle the responsiveness, and it's just JavaScript that's generating all of the gameplay within the HTML. All we have is the mean div area, and then the rest is generated with JavaScript. And of course we do have some styling for the button to make it look like a button for the active. So this is just adding a red background in the crosshairs whenever you hover over the active area, and then for the scoreboard. So there's not a lot of styling and we do want to keep most of the focus on the JavaScript and constructing the final gameplay. Also creating buttons so that you can stop and start the gameplay. Constructing the grid, creating helper functions, debugging the application, and a whole lot more. Of course, source code is included. Best way to learn is to try the code out for yourself if you have any questions or comments, I'm always happy to hear from you. Let's get coding and create this project. 15. 1 Page Setup HTML JS: Hey, this lesson we're going to be setting up the HTML file. So first were started by specifying the doctype as HTML. So this will indicate that this HTML five document type and then setting up the head section. And within the head, let's add in a title. And this is going to be the JavaScript game. I'll just call it came to and linking in or do the style on-page. And then eventually we can link out to a style sheet if needed. And then within the body area of the document. Just before we close off, we're going to link to the script file. So hook up the JavaScript file. So source, and we'll just call this up to dot js and save the HTML file and then go in the same directory, create a new file, and just save that as up to and within this file out in a console message. Just to check to make sure that the JavaScript file is going to be set. So once you've created it up to JS and just save it within the same folder directory. And we are doing this within the Visual Studio Code and running the live server. So in order to open up with the live server, so just make sure that you do have the folder added into the workspace. And that way you can open it up with the live server. And that will open up the page on the live server and then open up the console in Chrome. I do a refresh on that console and we should see the message ready within the console. So that means that we've set up our basic game structure. And then within the body, let's go ahead and add an area where we can add in all of the game content. So give it a class of game. And then this can be our mean game container where we can have all of the game content and actually just rename this to game area in the JavaScript will create an object. And then using the document and query selector, select the element with a class of game area. And within the coding space, I'm just gonna do the word wrap so that you can see the full statement within the visual area of the code editor. So that way I don't have to shrink my page too much. And we are going to be making this game fully responsive. And then within the console, to make sure that we've selected the right elements, you can select the element. And then also you can update and add in some text content. And for now, just write in Hello World as a string value and you see the word Hello World, the words hello world up here on the page. And you can be ready to move on to the next lesson. We're going to continue to build the game grid and the game area. This lesson is just a quick setup lesson. So make sure that you set up your index.html file so that you can run it within the browser. And also set up here up JS file, your JavaScript file, and write some code. Select the element, the main container area. So this case it's the game area element. And add in and update some of the textContent that's contained within it to make sure that your JavaScript file is working, your HTML is rendering out within the browser and that you're ready to continue to code and build out this game project. 16. 2 Create Game Grid CSS JSFix: So this lesson, we are generating a dynamic and cream grid that's going to be fully responsive. So we can resize it and dynamically generating it from variables that are going to be contained within the JavaScript. So if we want to have five rows and we want to have two columns, we save that and it generates the two columns with the five rows. The numbering is also done automatically. So that's so that we can see each individual cell and content within the cells. And let's update this to eight columns, five rows. So it automatically generates the responsive grid area. And this is using the CSS grid along with the JavaScript in order to make it fully responsive and dynamic. Let's go ahead and set up the grid area. So using the display grid and CSS grid format to design the grid. And I'm going to apply some styling. So for whatever the grid container is going to be, we'll apply the class to the element. And this is just going to be using the display grid format. And that will allow us to set the items that are within the grid. So setting up all of the grid items. And we can apply the grid formatting for it. So for now we're gonna go and add in a border. And this can just be irregular, solid black border. And let's add a little bit of padding to each one of the elements. And we can apply some additional styling as needed. So going into the JavaScript, we've selected the main container that we're using in order to construct the grid area. And when the JavaScript runs, we're going to add in the DOM content loaded. That's going to kick off and the creation of the grid element. And what the DOM content loaded does is this makes sure that this function will run whenever the DOM is ready in the content is loaded. And that will allow us to add content into the DOM area. So that means that everything is ready, that we've got the text area ready, and that we can initiate the main function that's going to construct the grid. So we've already selected the main game area object. We can get rid of the console log as well as the textContent that we're adding in there. And I'm going to create another object. And this can serve as her main global game object that will let us know how many rows we have that we want to create a and how many columns. So we are constructing this grid dynamically with JavaScript code. So having these variables at the top and being able to update them will make it really easy and flexible way of creating our grid content. So first, let's take the game area object and update the inner HTML of that. So that will clear out any existing content. And we don't have any existing content quite yet. And we want, we wanna do is we want to loop through and construct the grid items and append it to the mean grid area. So creating a main container, and this is going to be our main container that we're going to place within the game area using the document create element and the element that we're creating. So this is going to be just a blank div that's going to serve as the mean content container. And then from here we're going to construct a bunch of grid elements within side of it. So for main itself, use class list and add the grid container class to it. So this will be the parent of all of the grid items. And then for the game area itself, attend to the game area, the main element object. So that will create the grid container. And I know we don't have anything yet on the page. But if we go over and if we do an inspect to the code within the body, we've got our game area and there's the element that we created. So that's the one that we just created. So we want to now add to it and add all of the grid items into it. So creating a function, and this will be called build grid function. And passing in the main object. This is going to be the parent for where we're building the grid. So again, providing us flexibility when ever, if we ever want to move around the, the main object outside, so we're passing it in. And this also gives us an opportunity that if want to build another grid within another object, we can easily do that by constructing an element and just building the grid within it. And also create a function that will create elements as we're going to be doing a lot of creating a of the elements. So we're going to need the parent. As well as the element type and any HTML content that we might want to have within the element. And we can use this function then to create the elements. And I'll just call it create new element. And that way we can use the same format and we can get rid of some of the content here and it will return back the element object that was created as long as we're passing in the parameters. So the parent for this one is going to be the game area. The type of element that we want to create is going to be a div. And right now this is going to just contains some textContent, and I'll just say mean. So that's the parameters that we're passing into create the new element. And now we can remove this content and create the element. So give it a name of L. And this is going to add in. So the type of class that's having it as l and the class that we're adding to it. And this is where we can pass in the grid container. And we'll do this dynamically as well. And the could just call this my class. Then we'll add in the MyClass object to it. And then appending it to the parent. The element that just got created. And then returning back the elements so that we can use it within the function that called it. So going back into the HTML, now we've created within the game area, we've created this grid container. And also let's go ahead and add the text content to it. And actually we're going to set this as inner HTML as we're passing in HTML. And that will now output the word mean on the screen. So ready to loop through and create the grid items. So within the build grid, we're going to use the mean GameObject and construct the number of rows that we have within the game. So set up a variable. And because this is going to be rows, we'll set y to equal to 0, and then we'll loop through while y is less than game row. Now let me just double-check. So we do have a value for rho there and then increment y plus 1. And this way we're loop through and we're going to add a bunch of rows. So using the create new element function, the parent is going to be Maine. The element that we're creating is going to be a div, the content that's contained within there. This can be whatever the value of YS. And then the class that we're adding, we're going to add it as grid item. So we've got the class there. So just pass it in as a string and then this will add it to the screen. So that will give us the number of rows. So starting out at 0 to five, and then you can also add one to it. So that way you get a number of 1, 2, 3, 4, 5. So we also want to create the columns. And this is going to be the x value. So a loop within a loop and let x equals 0. And while x is less than game column increment x plus one. And what we'll do is we'll add that into there and we're going to have to recalculate the number of items. And then also we're going to have to apply some additional styling to there for the columns. So right now what we're doing is we're just adding in columns with the grid items. And we eventually want to apply some styling to it as we append the elements. So we're going to append the grid structure using the CSS grid and create that dynamically. So specifying the number of grid items that we want to place. So let's create a couple variables. And this will just be for the dimensions. So setup the dimensions for x. And these are going to be strings. And we're going to use this to set the grid template columns in the grid template rows values. So as we iterate through, let's take the dimensions and select the value for y and add to it the word ADL. So this will create the grid styling. And then for the dimensions x, we'll add to it and also the word auto. And this will provide the grid styling. And then just here in the bottom, set up the element. So it's going to be within the main container and set the grid. Template. Columns will be equal to dimensions. Why? Actually it should be dimension X and then the grid template rows. So grid template rows is going to be equal to the dimension Y. So let's take a look and see what we've got so far within the grid area. And when we look at the source code, we've got a lot of autos for the grid template columns. And that's because the x is running and adding in all of those autos, but the columns is right. So we need to specify and have a condition here that if x is equal to 0, then what we'll do is we'll set up the dimensions for x. And we only need to run this one time because this is going to specify the number of columns that we want to use. So that way we're outputting the content within a column format. And again, we do need to clear out any of the HTML that's contained within that. So let's remove out the value of main. And that will create the grid structure. And that's done dynamically. So let's also update the content that we're adding in there. So right now we're just doing y plus one. So let's create a variable, and I'll just call it cell. So this is going to be whatever content we've got within the cell. And we want to take the value of y times the value of the game column plus the value of x. So see what values we've got here. And this should update the content that we've contained in there. So starting again at 0, so let's add one to it. So that will change the offset and have our grid from 12345678910. And now because we're using the CSS grid, this is going to be responsive, so it's going to take the full width across. Let's also make an update to the grid items. So set the text align to center align the text. So I'll center that content also for the line. Or it will update the font size as well. So the font size. So you got a fairly big font size there. And now, because we are generating this dynamically, if one have more rows, we can adjust that and add in seven rows if we want to have eight columns. So this will just automatically be dynamically built and then we can resize as needed. So this is a way that you can use the CSS grid and JavaScript together to dynamically generate a fully responsive grid, all done with JavaScript. And this is going to serve us for our game functionality. So we're going to continue to build this in the upcoming lesson. And I did spot a quick error there that we should be actually checking for the column, the row to be 0. And then that way we can properly add in the styling for the elements. So checking and let's double-check it. So we've got eight columns and let's switch it to two rows. So it gives us two rows, eight columns. We can make adjustments and resize our grid as needed. So if want four columns, 1, 2, 3, 4, and then we've got the two rows. And it's fully responsive and dynamic, generating the game grid. Challenges for this lesson. And we did quite a bit in this lesson where we added styling to the CSS grid containers. So this is using the default functionality with CSS grid and the styling to create responsive content. Create global variables for the rows and the column numbers so that you can easily adjust this within your JavaScript code. Setting the number of rows and columns as indicated within the variable setup an ion i t function to launch the DOM content. So construct a page elements whenever the DOM content has loaded, create a new main parent container for the game area. So this is going to serve as the container for the grid items. And it's also going to have the container for the grid class applied to it. So applying the main display grid content to the parent and then create the functions to construct the elements. So this is so that you don't have to keep repeating the document create element. We've got all of the parameters that we're passing in to that element. And that's directly you just using the one function to construct the elements and add them to the page. Also add styling and content contained within the elements. Then build the grid by looping through an iterating through the number of rows and columns, depending on what the settings are within the variables. Add to each one of the elements that gets created. So make sure that we're adding the grid item content and also the attributes to it so that we can style it and have it within a grid structure. So adding those to the grid container parent the style attributes to it, create elements within the grid. So loop through and then generate the elements in the grid. And you can also add in the numbers as I did with an example. Test, resize, update the rows, update the column values, and just make sure that it is working and functioning as expected and you can be ready to move on to the next lesson. We're going to continue to construct our game content. 17. 3 Page Elements Into Array: In this lesson, we're going to be activating the active class to the grid items. And this is going to be randomly set. Also setting out timeout that these will once again disappear well, moving out the active class and then selecting another element from the available elements at random and adding the act of class. So go ahead and open up the JavaScript file. And then within the file, we're going to construct the game grid. So within the game, we're going to create an array. This will just be a blank hurry. And as we construct the elements that we're outputting to the page, we're also going to add them into that array. So that will give us a full array of all of the elements that we've got listed there. And then we can add an event listeners and we can add in classes at random to those elements. So as we're constructing them and we're doing a create new of the content. So let's create the elements. And then as we create it, take the game array and push into it the element. So once we complete and we go into the console, and let's type in the game object. We've got an array of all 40 elements that we have on the screen. And you can open that up in the console and hover over the different elements that we have within that array. And they're going to highlight. And that means that we've got them within the array and they're pointing to each one of those elements. So we can make updates to them. And at random, we can place an a class into those arrays. So let's create a class and I'll just call it active and update the background color. So we'll set the background color to red. And let's create a function that's going to run that animation frame and we'll create it within the game object. So this will be where our animation frame will go. So this can be just a blank object for now. And then for the game Any, we're going to set up an animation frame. So once we've built the grid, then we are ready to run the animation frames. So take the game Annie, and let's set up a, an animation frame. So using the animation frame, we're going to constantly run animation loop. So using the request animation frame method. And then the animation that we want to run. And we'll just call it start game. So this is going to run the function start game and continuously loop through that function. So set up a function start game. And this will continuously run the animation frame. And this will also allow us to provide the game elements and the randomness of the game object. So now that we've got the number of elements on the page, we can select those and all of those cells we've got within the array object. So going again back into the game object, we've got everything within the array. So we can reselect these elements and we can select them at random. So let's go ahead and do a random selection. So pick out the selected element. And then using math floor. And then math random. And we'll multiply the random by the number of game array length items. So this will return back a random cell that we can then use an ad and apply the colors too, so we can add the active. And what we'll do is we'll select the element and create an element to reference that current element object within the game array. And then using our selected random item that's going to return back the array. And you can console, log out the selected element random and then the my element. And we're actually not selecting any elements. So let's see what happened here. Within the game object. We've got the elements within the array. So we're returning back. And what we'll do is I'll console log out the selection to see why we're not actually getting the right value there within the selection. So it's not a number. And I need to add in the mouth random. So now it's allowing us to select an element at random and within the my elements. And then we can take the elements and using class list. Toggle the class of Active. So we can visually see that it's adding and removing the class of active learning. Get rid of all of this console messages. So now it's constantly adding and removing the active class. And it's doing it completely at random. So it's a little bit too fast for the game operation. But we've got the core functionality that we needed where we're selecting an element from the page at random, and then we're applying the active class to it. And then this is done within the start game. So we can also create a function that kin make it make active. And within the meek active. This is where we can move that function into. Because this is still referencing the global game object where we've got the array. So once we select it and we make active, we can highlight the elements on the screen. So at any point we might only want to have one element that's active. So let's number of elements that are active. So let's set up a max value. And also I'll set up an element within the object that's going to track the actives within the game object. And this is global. So whenever we run the make active, we can just increment it by one. So increment the value of game octaves. And then we do a condition here to check that game actives is less than Game Max. And if it is, then we can make the active. Otherwise, we're going to skip that. So we end up with five that are active. So once we make it active, we want to run a timeout that's going to remove out that active class. So what we'll do is we'll add the active class. And then for the timeout, we're going to remove the active class. So for the element itself, we can set a timeout. And a timeout will run a function in a specific to specify time period. So we want to run the function that's going to remove active function and run that after for 1000 milliseconds. So it will run it in at four seconds. And now let's create the function that will remove active. And we want to pass in the selected element so that we can select the element and remove the active class from it. So console log, and I'll just call it my L as well within the function. So that will list out all five elements. And then from the element itself, we can just simply remove the active class from it. So that removed out all of the active classes. And we want to pass this in as a parameter to the function. And the way to do that is going to be actually to select the element this way. So after four seconds, it's going to select those elements and remove the active class from those elements. And it's just passing in the element object. And then we're going to take the game actives and we'll subtract from it. So we have a running total of always five active elements. And so that will remove them and add in five other ones. And we also need to check to see if it's already active. And if it is, then we're not going to add in the act of class to it. As in some cases, we might be selecting the same elements that are already active. And then also to change the timer. We can use the mouth floor. And then math random and multiply that by 4 thousand. And then we're going to add 5000 to it. So this will allow us to stagger the elements that are disappearing so they're not all happening at the same time. So some will disappear in different frequencies. And we can always speed it up as well. So that will give us the random slots where we want the user to be able to click on those active elements. And then that's coming up. Next, we're going to add in the ability to click on the active elements. So go ahead and add in, select the elements, add them into the array, add the animation frame, and add the option to add and remove the act of classes. Challenges for this lesson are to add the class and a toggle, remove it all with JavaScript. So adding, removing a class from an element with JavaScript, add all of the created grid items into an array, so they're really easy to select and update, manipulate with the code, setup an animation frame to run so that we can have a continuous animation of the gameplay. Add and remove the class randomly. So select one of the elements from the game array, randomly selecting it, and then updating the class list properties, removing or adding in the active class. And then setting up our timeout that's going to remove the active class, set up the parameters for the gameplay. So within the game object, how many items that you want to show active at one time. And then setup, then remove the class element within a random time period. So with the set timeout, remove out the element active class after a certain period of time, and then adding into the rotation of showing different elements that can have the active class. And you're going to be ready to move on to the next lesson. 18. 4 Make Elements Interactive: In this lesson, we want to make the elements interactive. So let's set up a way to make the elements more interactive within the gameplay, and also a way to start and stop the game. So if we have a value for stop, We're actually, this is going to be in play. So right now it's going to be false. And we'll also add in a button object to the main screen that can start and stop the gameplay. And if the gameplay is false, then we're not going to requesting animation frame. But as soon as it's clicked and it's true, then we are going to add in the animation frame. So let's create a button object. And we can use the same create element and adding it to the game area, selecting the element as a button. And right now I can just say start. And the class that we're adding to it is going to be a button class to it. So add that to the page and add that to the main game area. And for that animation frame, we're not going to trigger it off until the button is clicked. And then also, we're do a check to see if the game in play is true before do another request of the next animation frame. So let's see what happens where we've got the content added to the screen. And because we're clearing out the game area. So we're moving the actual button from the screen. So adding in the button, this will give us an option to start the gameplay. So there's our button there, right up at the top. And this is just adding in the class of button. So let's add in some styling for this button. Will do a display block for the button. Add some padding of 20 pixels to it. Also set up the margins to be auto, so that will center the button on the screen. So there's our button, nice and centered now. Also adding in some margins at the top and the bottom. So add some spacing for the button. And I'll set up the button width to be 25 percent. So that will change depending on the size of the screen. And for the font. Size, will set up the font to be fairly large. For the button, maybe a little bit less padding. Now we've got a nice big Start button. And when the button gets clicked, then what actions do we want? We're going to add an event listener. And the event listener is going to be listening for a click on the button. And if the button gets clicked, That's going to run. This function is who's going to be the anonymous function that's going to trigger the game play. And as well, it's going to set up the game and update the employee to be true. So that way we get the animation frames. So when we click it, it's going to kick off and start up the animation of the game. So we can also update the button or remove it from the screen. And if we want the button to be global, then we can add it in as game button. And this can just be an object. And then we can apply to the game object. So using the game game button will create the new element within the game button. And that will allow us to globally select that object. Or we can add the event listener. And then we can also hide the game button. So doing it a style display. And what we're actually going to do is we'll update the value to say either stop or start. So by default it will start with start. So within the console, we'll get the text content of the button. So right now the value is going to be start. So having a condition to check to see if the textContent is start. There. We know that it's a start button that's been clicked. And that means that we can set up the gameplay. And then also let's take the game. And add to the game button. And we'll set it up as stop. And then Alice will set the game button to say start. So this will give the player an option to stop and start the game play. And we'll set the input to be false. So we can start. And it actually should say the text content should be stop and start. So that's going to allow us to toggle the gameplay. So next time we stop. And what we also wanna do is we want to cancel the animation frame. So setup the animation frame within the game any. So when we do hit the stop button, we want to cancel the animation frame and we just reference the animation from we want to cancel. So we hit start and stop. It will stop the gameplay. But because we're using the timeout, It's still going to remove the elements from the screen. So we have an option to start, and when we hit stop, the setTimeout is still active. So that's why there's still disappearing. Even though the game currently is stocked. There's no animation frame. So this is something that you can use within your own gameplay to stop and start the game as needed. So we want to, as we're constructing the elements. When we do create the elements, when we're building the grid. For each one of the elements, we can add in an EventListener on the element itself. So add the event listener just as we did to the other element, to the button element that we just created. And it can listen for a click. And when it gets clicked, run the function called Hit button. And then within the functions, Let's create the hit that button. And what we wanna do is we want to figure out what elements got selected. So within the event object, we want to pick up the event target. So then the console get the event target and that will select it, the element that was clicked. So let's stop the game, clear the console. And now any of the elements that I click, it's going to output it into the console. So we can also check on the elements that got clicked to see if that current element does contain that class of active. So we'll do a check to see if the element target. And usually the way I usually like to do is create an object out of the E target. And that way I just have the element to check on. And within the elements in the class list. There's a method that's called contains that allows us to check to see if it contains the active class. And if it does, then we can select that element. And if it doesn't, then that's a miss on that condition. So we can type in hit. And then otherwise, we'll console log the word Smiths. And I'm going to update how long the timeout is. And actually I'm not going to set the timeout to the elements. So we're just going to add the active class to it. So do a refresh start and we're not removing out any of the act of classes. And there's also an error here that we want to add five of them. But in case we do select the same numbers, then that's where they're overlapping. That's where there is only for showing up. So in some cases we might get, for, in some cases we might get five. So all depends on the randomness. So that's another bug in something that we need to tweak as well. So when we click it, we get hit and when we miss, we get mess. I'm also going to update for the active, the cursor and set the cursor to pointer. So let's see what that looks like. So start. So only the active ones now are going to have the one that looks like it's clickable. So unless you want to track misses. And we might want to track how many times the user tries to hit and misses. And in this case, we're tracking the hits here. So they're going active whenever it's red and it does have the active class. So at this point, if we wanted to, we could select the element and we could remove the active from the element. So if it's a hit, then we remove the active from the element. And that's allowing us to randomly generate another slot. And we're gonna do the same thing where we're checking to see if active is there. So we're selecting an element that we're making active. And we're gonna do a call back to them, make active in case we spot one that already has it available within it. So we'll check to see if the selected element contains active. And if it does, then we'll console log already there. And we can also console log out that element. And if it's not there, then this is where we can update the octaves and we can set all of this act of information. So for this, we need to actually pass in the active element. So we're doing the random part separate when we're starting the game. So let's pull this information back. And we're going to pass this information, the element information into the make active, the timer. It can stay in here as we're setting the timeout in this function as well. And this will just return back true. And otherwise we're going to return back. So that's already there when we want to pick a, another element from the random elements. And we'll do the same selection. And we could actually create a function. Since we're using it twice, that we're making a selection of the element. And what this will do is this is going to return back the selected element. So we do a select, this will randomly select an element. And that's going to remove out the repetition of the randomness and make the code look a whole lot cleaner. And we can even simplify this as well by just making a selection or random selection of the element. And then also over here, where we've already got that selected element. It'll just select another one at random. Just do a quick update here. So we're not referencing the my element anymore. So now it's adding in five. And as we saw before at sometimes we don't have four elements. So now it's adding and five. So it's not allowing us to add two ones that are already existing. So if we want to update and set the max to 45 and we hit Start, It's going to add all of them all the way up to 45 and actually only have 40 elements. So it will fill all of them in. Just save the code. And it looks like because we ended up having more than the max, we've ended up having a loop and that's why it froze up there. So we need to have a condition to make sure that we're not select, make sure that the max is not larger than the number of available elements that we have on the page, otherwise where, that's where or throwing that error. So we wanna make sure that this value for G max, and we'll just do a value for total. So we'll see that if Game Max is greater than the value of game array length. And this is a ternary operator that we use whatever game array length is going to be. Otherwise, we can use whatever the game boxes. And this is just how many total elements we can stick on the page so that we don't run into that loop and we can freely adjust the max. So this point, we're always going to have 35 elements on the screen. And then if we clear them out and we restart it, so it's going to end up with the 35. So let's try it going back up to 45 and hit start. And we should always Mac, so dot-dot-dot total. And in this case we have to stop it because we're maxing out to the max, turning them all and adding in the active class to all of them. So no matter what, whenever the game is started, it's not going to actually be removing them because they're just adding them everywhere. So now that we've tested that we can play through the game and just make sure that it's working as expected. So we should MAX have 25 that are red and this should all be clickable. So when we click them, they're going to remove out that red spot to them. So now let's go ahead and we're going to add in the time-out and we'll update the element name. And now we're adding in the timeouts to the elements. So they should be hiding and showing and toggling the active class actively on the screen. So in this lesson, we're going to be adding in the active class and also having the ability to select the elements and toggle removing out the active class to the elements, and also keeping timer active within those options to start and stop the game plan. So we have an option to stop the gameplay. And the timeouts are still going to be running through and they're going to be hiding the elements with the class. We started, we repopulate all of the elements with the active class. 19. 5 Smooth Timer Code Tweaks: So coming up next, we'll add in some more updates to the gameplay. In this lesson, we're going to be updating the grid items to have each individual counters. And as you can see from this example, each square has a random value that's counting down to once it hits 0, then it removes set the active class. So they're going to continuously be counting down. And when you click them, they're also going to get removed. And the timers are going to set to 0 on each individual square. So instead of having a timeout and having that timeout still running, even though we've removed the element when we click on it, this way, we're all tied to just the animation frame. And even when we stop and start, it still tied to the animation frame. So that gives us an option to do some debugging and some additional testing within the gameplay. Opening up the JavaScript file, we're going to decouple the elements and the countdowns from the timers. So we'll have a number of values there on the elements itself as we do the countdown. And this countdown value is going to be tied to the element object. Because each element on, as we're creating them, there can be created as objects. So we can do a full countdown of the item and the object and remove out the timeout. And this will create smoother gameplay and help us rely on just the animation frame that in order to run the game. So that would mean that once we stop and start, if it's tied to the animation frame, then we're not going to have any timeouts that might be lingering in the background. And we're over here where we might have these timeouts. And even though we're removing the active class when we click it, that timeout is still there, so that's still running in the background. So let's make an update to the element itself in instead of putting out the number. When we create the element, this is going to be created as irregular grid item. And the cell contents itself, we're going to set that just to be a dash. So save that and have them all as dashes. And then when we activate them, we add the active class to them. This is where we're going to start the timeout. So we're, we're setting up the element. We're going to add a value for the counter and we'll set all of them to 0. And this will give us a value that we can update and iterate through swirl loop through all of them as we run through the countdown within the animation frame. And we're going to subtract to them. And when they get to 0, that's when we're going to remove it, the animation frame. So going into when we're making it active, we've selected the element dot to set it up as active and commenting out the remove timeout. And we're going to update the counter value. And this is going to be a random value all the way up to a 100. And then we'll add to it. So we'll add at least a minimum of 25 to it. So let's set the counter to the timer value. And also we can update this. And we don't need a separate variable for that. So once it's on an octave class that we want to output the value of the element into the counter itself. So as we loop through and we're running the animation frame, if the game is in play, then we're taking the game array of elements and going through each one of them and getting them back as an element. And then as we loop through, we'll select the element and textContent. And we'll set the text content of the element counter as the visible content. So let's see what happens. So now we've got a number of counters that have been set. So we want to decrease the number within the counter. So let's check, and the element counter is greater than 0. Then we're gonna take the element counter, we're going to subtract from it. And over here is where we can update the counter value. So they're all counting down to 0. Eventually they're all count down to 0. And once they reach 0, then this is where we want to remove the element. And we want to remove the active class. So we'll check to see if the element counter is equal to or less than 0. And if it is. When we do the update, this is where we remove the animation class. And we can run that same remove function that we're going to remove it out. And we just need to pass in the element object into it. And it should be less than or equal to 0. So now they're constantly counting down. And whenever, whenever they get to 0, then they remove the active class. I'm going to make the font size slightly smaller within the grid items. So let's put 0.9 and we still have the ability to click them as well. And that will clear out the active class from them. Let's make a few less active ones. So to set it back to five as the total number of octaves. And now whenever we hit Stop, it's actually going to stop the game. So we have an option to start and stop the game. And we can clear out the elements as well. And in order to reset them all, we can set within the grid item, the color, and set the text color to be white. So that's not going to show any, and it's only going to show the ones that were doing the countdown. And let's also update the styling to get rid of the borders of those items. And I'm also going to add in the box sizing and set that to border-box. And that will remove out any additional styling that's being applied with the padding. So that will space things out a little bit more evenly. And again, this is fully responsive within the grid structure. So depending on how many rows and columns the grid will resize itself. Now the objective is to click the red squares before the time runs out. And then that's how you score and then they get reset elsewhere on the screen. So do Looks like we do still have an issue when we're removing them that were not properly setting the timer value. So that's another thing that we need to do to the element is that we need to reset the timer value. So when removing the active class from the elements to the my element. And let's set the counter and set the counter to 0. And then my elements texts contents, and we'll set the text content back to the dash. So now at any point we only still have the five at max on the screen that are going to be there at the same time. So even when we click, it randomly adds to the next square and the countdowns continue. And then when we stop it because we're based on the animation frame, it's going to stop the entire animation. And still the items are still going to be clickable. So this is good for testing. So we can ensure that everything is working as expected and we can stop and start the game. Challenges for this lesson is to update the element objects and add a value that can serve as a counter and add that into each element from the page elements. Activate the counter on the settings of adding the active class. So have the counter with a random countdown value that decreases on every are run through of the animation frame. And once it reaches 0, then we remove the active class. And as well we remove out the countdown. So add the conditions in order to accomplish that. Removing the active class, and set the counter to 0 as well. Whenever it gets clicked or if the counter countdown ends up out a value of 0. To test the new functionality with the stop and start button and try it out and make sure that the functionality shows whatever the number of max elements, adding the active class to the max number of elements. And then also ensure that the click functionality and the event listeners are still in place and that they're resetting the counters on the elements. 20. 6 Game Scoring and GamePlay: We're going to be making some updates, adding in the scoring, and then tweaking and making adjustments to how the gameplay functions. And then also including a way to make the game more difficult. So if we set the difficulty to one which is the most difficult, this is going to have more items. They're going to be disappearing faster on the screen. And overall, it's just going to be more difficult as we play through it. So there's scores are changing and then also we can adjust it so we can set it to five, which would be the easiest level. Also, this is all dynamic, more dynamic options we have within the main game object, the more rich of a gameplay that we can create. And this again is fully responsive using the CSS grid and hiding and showing the red squares. And then we've got the score here operating at the top. In this lesson, we're going to be making some tweaks and adjustments and adding in some gameplay. So within that mean game global object, let's add in an option for score. So this is going to be whatever the score and we want to track actually hits. And we also want to track Mrs. So the setup value for HIT and also a value for MIS, and will track the US as numerical values and we can put those as score. So when we do create the main game area, we want to add an element to it. And this is going to be an element that we can use as the scoreboard. So within the game scoreboard, where it created a new element. And that's going to be again within the game area. And actually we're going to add this above the start button and stop button. So adding in the scoreboard that type of element that we're creating is going to be a div content for the button. So the class is going to be, we'll create a class for scoreboard. And the content is going to be the score. And actually I'm going to create a temporary variable that we can use the template literals. So looser at the backticks, where we can add a value for the score. And instead of setting it will set the temporary value there for the scoreboard. So the score is going to be based on whatever we've got for the game object. So right off the bat, it's going to be 0. But because we want to be consistent with the dynamic structure, we're going to have hit. And then also Vs. And then that's where we can add in the game miss. And this will just output the score to the scoreboard. And then every time we loop through it, if we have any updates to the score. So whenever we've made a select a click, we can update the score as well at that point. So I'm just going to remove at some of the excess spacing that we have within the code. So it's a little bit easy, easier to read. And within the Hit button, this is where a tracking whether we hit or miss. And at that point we also want to update the score. So within the function. And let's create a function that's going to update the score. Now the score values are going to be tracked globally. So we can take the game scoreboard object and set the text content of that element to whatever we have for temp. So we'll use the same structure. And then every time we either hit or miss, then we'll just run an update of the score. And odd in the option for the game hit will increase. And the game miss will increase on this one. So misses the game increases. So there's our score. So if I'm missing, it's updating and adding to the mess. And if I'm getting them, that's adding to the hits. So it's supply some styling to those scoreboard. So do a text transform and just transform it to uppercase and also font size. Let's make it fairly big. Text align so you can center align the text. So it's out of the score fairly large there. Maybe we also want to set a background color of black, font, color of white. And then out in some hiding. So now when we hit, we get the score being updated. If we're missing, we're also getting the score being updated. So as you're building a game and as with any game, you've got to test it out to make sure that the functionally is there. As you wanted to make sure the score is tracking the hits and misses as you're clicking. And I'm also going to update the pointer. So the cursor, there's a number of different options here. And I'm going to update it to the crosser. Always try it out whenever you make some changes, especially on the visual changes to see if it's something that you want to keep and apply to the code. Going into, back into the JavaScript code, again to remove out the numbers because this was just for testing that we're outputting the numbers into the elements and update that in have the style, the opacity to change. So right now we're still outputting as we're iterating through and looping through, we're updating the current count value, that text count value. So let's remove that count value. So don't have any content in there at all. And we're going to select the elements and get the opacity, the style, and OP city. And this is going to actually adjust dynamically. So depending on what the value of counter is, we'll create a temporary element for that and take the element counter and forced out to a number value. So we don't want it to be as a string value. And then we'll divide it by 10. And using the Math ceiling, we'll update the opacity value. So we're dividing it by ten. And this value, once again, we're going to divide by 10. So we'll set the opacity to tamp. And so now they're going to be fading out as before they disappear. So that's just updating the style attributes of the elements and causing them to fade out. And also for the misses, I want to set up an odd, the missing values as well. So if the player doesn't actually click it, if he just lets it fade out, that's going to count against the misses as well. So let's select the elements and where we're removing the active class. So we're not going to add in any textContent, but I'll keep the statement there. And as we remove out the content of the element, we're also going to update the value of Mrs. here. So taking the game object and miss, and we'll increment those as well. Snow and they fade out. And we need to also update the score. So every time we do a miss, want to update the score object so the score is represented every time there's a miss. So now when we wait it out and if they are missing, then that's going to count against our score value. And as you play through it, you can pick up on different things that might need to be updated and it is moving rather quickly. So we're getting a lot of misses. So it's very difficult with this a number of items. And let's do a restart of it. So it's a little bit hard. So also let's update the max value to be two so that we don't have too many elements that are hiding and showing. So you can have different levels as well, an increase that value to the max. And then this is dynamically within the game. So whatever the max value is, that's how many you're going to show up on the screen. So this gives the player the opportunity to actively click them. And then there are some misses as well that are happening. So we want to increment the amount of time that they're actually on the screen to give the player the option to be able to select them properly. So let's update this to 75 and then having a random factor here of anywhere from up to 300. And now let's try it. In. Other problem too is that they're showing up right away. So there's no In between where it automatically is adding the item. So if the make active says less than total, so let's add in some randomness into this as well, where we don't want to, right away to check to see if this is true, then right away would make a next element. So setting up and we'll create a temporary variable and using the math random. And we'll do a math floor. And then wrap that up north random in the mouth floor. And let's multiply that by 100. So we'll also have odd to the condition. So it makes sure that this is true. But we also want to check to see if temp is greater than 80. So that will slow down the speed at the, that they get added. And we might also want to introduce more randomness into that. So if it's larger than 97. So again, that makes that more game, better gameplay because you're giving the user the opportunity that they're not all loading at the same time. And it makes it easier to play through. So you can update these numbers and you can also set these on variables for difficulty. So we'll set up the difficulty variable. And if we set the difficulty to five, that will be easiest. So little larger the number, the easier it is. And then we'll use that game difficulty value to update this dynamically. So we had 97, which was fairly easy. And the lower the number is, the faster they're going to show up. So if we have a base of 50, and then we add whatever the number of game difficulty times 10. And let's just do a little bit of an adjustment to this. And so it's just over 100 and had too many brackets there. So now we can adjust the difficulty. So if I decrease it to one, which would be the hardest level, they're going to be, once again, be very quick. So also with the game difficulty, Let's set the randomness. So we've got the game difficulty and where we're adding the item. So making it active, we're setting a value for the counter. And the larger of a number it is, the longer it's going to stay on the screen. So if we decrease this and we add 275, taking the game difficulty times 25. And maybe we want to set this to 25 as well. So if we update the game difficulty, we can see that it does get more difficult the smaller the number is for the difficulty. And we can also update the max depending on the difficulty. So when we set the game max, this could be a number that's subtracts the difficulty. So setting that up and we can have a number of seven minus game difficulty. So again, making it more difficult with a value of one. If we have a value of seven, that's going to only have the one item or two items max on the screen. So again, it is slowing it down and making it harder or easier. And this is going to be something that you can adjust the numbers as needed. And you can incorporate this difficulty factor so that you can increase and decrease the difficulty of the gameplay dynamically. And that's all contained within the main game parameters, objects, settings. Challenges for this lesson are to add scoring to the game place. We're going to make it more of a game where there's a score. We're tracking the hits versus the misses. So this would be a mist click. Or if the item gets removed from the screen, we're going to track the hits on the elements. So that's going to go in increase your score, also adding in the parameters. So we have an option to track the hits and misses and then also add an option for difficulty. So difficulty range one to five, where one is the hardest, five is the easiest, and then making adjustments so that within the one game object, you can change the difficulty of the gameplay and that will dynamically update as that number is changed. So play the game, update and tweak as needed to make sure that you've got proper gameplay and the gameplay is as expected. And we're also going to be making adjustments to the styling that will pay City. So you might have some other options that you want to look at for the elements before they disappear off the screen. 21. 7 1 Game Clickers Review: This lesson we're going to be doing a quick review of the coding. So we set up a basic HTML shell, created an area where we can add in the content dynamically with JavaScript and setup the mean grid container classes that we can use and apply to the elements using JavaScript. And within the JavaScript, we selected where we're going to have the game content area and added in an event listener listening for when the DOM content is loaded. So that's going to kick off the construction of the game grid and create the game grid on the screen. Now one of the objectives of this section was to get more familiar with how to use the grid, create a fully responsive game grid, and then also make the elements chalk the elements within an object. So we did set up a global variable that we use that's called game. And within this global variable, we've got all of the parameters that can update the number of rows, number of columns, and so on, generating the gameplay area. We can also add in within the grid when we're doing testing. And also depending on what type of gameplay you want, you can add in the mean border. So that way we can actually see the grid on the screen. And the objective is to dynamically add an active class to any one of the cells or any number of the cells. So at this case, we're doing max of two and we're adding a maximum of two to the main screen area. And when we start the game, the boxes go red and we click the boxes, we score points for the boxes. We also have an option to dynamically adjust the number of rows. We can adjust the number of columns. We can also adjust the difficulty of the game play. So that will reconstruct and change the way the game looks and also the way the game place for difficulty all country and within that mean game global object. So within the ion IT, so this is initiation file. We're resetting the game max because of the difficulties is going to be based on the difficulty. Clearing any content we have within the game area, updating and setting the scoreboard than creating the scoreboard element, creating a button element that's going to start and stop the gameplay. And then adding an event listener to the buttons. So these buttons allow us to stop and start the animation frame. The animation frame is the core of the gameplay. So when we stop, we cancel the animation frame. When we start, then we run the animation frame. And we're also tracking the value within the in play, that value, whether it's true or false. And this will help us determine whether we want to run the next animation frame in the sequence. Lastly, we create the new elements, and this is going to be where the game grid, and then we go and we build the game grid. So building the game grid, we do have the parameters where we've got the number of rows, number of columns the player wants, and this is all dynamically generated. So it can change if you update the number and you can regenerate the new game grids depending on what the values are. So we're setting and within this object, we're tracking for the CSS grid and for the columns and the rows we're adding in the grid structure here. And this is being applied into the elements. So we'll go into the element itself and we go into the main grid container. It's going to have the style attribute that's going to contain the basic structure of how we want our grid to be laid out. So number of columns, they're all set auto. The grid template rows are also auto. And then this is constructed automatically as we loop through the rows and the columns, we're creating the new items, adding a class of grid item to it, and then adding an event listener so we can track that if it's been hit clicked or not. And if it has been clicked, then we run the Hit button, which gets the element that was triggered, the event object of the click. And we pass it into an element. And that references that current element. So we check to see if it's active. And if it is active, then that means that it had the active class. So we register as a hit, we update the hit, the game hit scores. And then we remove the active class from the element. If it's a miss, then we track it as a miss. We update the mips scoring and also update the score as well. And there's no removal of the octave because we want the octave to still be on that element. So we're gonna continue the counting of the element. We're also doing an update of the score as well. We're tracking the score and updating the scoreboard. We created a helper function. So this is just two, help create the new elements as we're doing that quite often within the code. So it's a lot easier when you have a helper function that can generate and create the elements on the screen. So we also have the remove active. So this is a function that runs whenever we want to remove the active class from the element. So we reset the counter back to 0. So each one of the elements has a counter on it. So it's tracking the counts on it and it's decreasing in the accounts. So each one of them, that is Octave, has its own counter. And we already showed how there is a way to show the counter value on the screen. So you can add the counter if you want to the elements and update that value. As we loop through the animation frames, we're removing the active class and also the number of game octaves. And removing the number of game actives helps us determine if we want to add more items to the screen with the active class. The main animation is within the start game function. We're first, we're checking to check to see if our total value of octaves and make sure that we're not trying to set more activist than there are available cells on the screen because otherwise you're going to run into a problem. And as we saw in one of the earlier lessons, we run into this endless loop where there's no solution for the continues to loop. We're setting the temporary object, which is what randomly tracks how quickly the items get added to the screen. So we're also incorporating the difficulty into that. So depending on what the difficulty level is, we might show them quicker and also have a quicker countdown to them. So if the game is in play, we loop through all of the available game elements, all of the grid items. And we update the counter on the item, which decreases each iteration if the counter is larger than 0. And we also update the opacity of the cell. So decreasing it by a factor of 10 and update elements. So if it is less than or equal to 0, then that means that we need to remove it off the screen. So we remove the octave, we add the game miss, and we also update the score. And then over here we recall the animation frame to start that start game animation all over again. So that continuously to loop through start game until we're either stopping the game, which is actually pausing the game. And Dyke gives us an option to stop and start the animation frames, as well as update the game in play, which is what we check to see if the game is actually active and in play. And we welcome to make some tweaks and adjustments to the main game object to improve the gameplay. The main objective, again, in this section is to get more familiar with constructor and grids, selecting the elements, even containing them into an array, and then tracking and adding values to those elements that are dynamically generated. And that's all done with JavaScript. 22. 0 JavaScript Slot Machine Introduction: This section we're building out at JavaScript slot machines. So all JavaScript and DOM interaction focusing on how we can manipulate elements within the DOM, create elements within the DOM, and also update them and update their positions and create animations. So within the HTML, it's going to be very basic HTML structure where we're going to start with one div and then all of the magic is going to happen with JavaScript, where we're selecting the div, we're creating bunch of elements on the page. So these are all of what you see visually within the game. Also, another objective in the upcoming lessons is to create a dynamic game. And so what I mean by dynamic is that we've got this mean global game object. So if we update the total, so if we want to go to three, that's going to update three items there and they're all still going to work the same way. We can also update that to whatever number and it's always going to work. So no matter how many different reels we have within the game, it's going to update and work also the way that we can add items into the icons. So we've got a number of icons from Font, Awesome, but this is also dynamic. So if I wanted to add in the letter a, I can easily add that into the list. So that adds dot there and tracks at the same way as it does the other icons. So really easy to adjust. We can also update the speed. So if we want the spin to be super fast, that's at 35. If we go back down to five, then that's going to be a whole lot slower. So up to you also to make the adjustments and build it to suit your needs and your service suit your purposes. So this is also really good to have for testing when you make a dynamic application. And we're also going to be covering all of the typical stuff where we're adding interaction with event listeners. We can toggle the button, what it says, the colors of the button, and also create the action on the button. Adding an event listener for the DOM content loaded, and that's an regenerate the gameboard. So it automatically generates all the lists, setting some of the colors of the icons, and using different parameters to build the game content and positioning all of the elements using JavaScript as well. There's or make elements function, updating the message and then also starting of the spin. So we randomize how many times each one of them, how many rotations it's going to have, how many pieces of movement It's going to have. And then the actual movement of the elements calculations to what gets presented on the game screen. So how many icons are presented, how many matches we have? And then we can use that information within the payout calculations so we know how many occurrences of a particular item are seen on the screen, and then we make the calculations from there. So very flexible and dynamic application that you can customize agile and algorithms and calculations and just have some fun with it. Practicing and getting more familiar with the document object model and JavaScript. If you have any questions or comments, I'm always happy to hear from me. Let's get started coding this project. 23. 1 Project Setup index js: In this lesson, we're going to be setting up the HTML for the code and then also linking out to the js file and just making sure everything is working before we begin to code the project. So first off, create an index.html file and specify the doctype. So the doctype is just HTML. So this indicates that this is going to be an HTML5 formatted file and then set up the main HTML tags. And within those mean HTML tags, set up a title and we'll just call it JavaScript DOM project. And from there, next step, let's add in the body types. And then just before we close off the body tag, so we're going to use the script tag and link out to the source for the script. And this will be the apps three dot js. And then we create that file as well. And then within the main body area, or you create a div. And this div consider as our main div that we are going to be selecting and using. Just give it a name of my div or a class of my div. And then this can just have some blank content in there. So we'll just say hello world. So we've got the content showing up. And then we also want to have the option to add in some style. So I'm going to add some blank style tags. And we can of course create a style sheet as well and linked to that. So now that we've got that set up going into new create, a new file. And this is going to be the op three js file. So that when that we're getting the error because that one right now is missing. And it's going to be in the same directory as the index.html. So sitting up, band, set-up the top three dot JS file. And then within the app three js file. Let's go ahead and we're going to select the main container. I'll give it a name of output. And using the document query selector, Let's select the element with a class of my div. So for class, we prefix it with a dot in order to make the selection of the element. And then within the console, I'm going to output the contents of output and that should highlight the element on the page. And so now, once we've done that, now we can start interacting with element contents using the variable name of output. In addition, I'm also going to use the toggle, the word wrap within the editor so that we've got all of the content here that we've got within the workspace on the left-hand side, and within the browser view area, we're going to show that on the right-hand side. And I could actually make that even smaller, so it gives us more space for the coding. And also importantly, we do get access to the console message. So go ahead and set up your own index file and create at least one div that you can select with your JavaScript code. So you can bring that in and start creating the project over that. So coming up next, we're going to dive into the coding and JavaScript and start building our project. 24. 2 Game Setup JavaScript: This lesson we're going to be building out the bain construct of our functionality. So taking a look at what we need for the user interaction, we're going to create a message area to output information to the user, a button that we can toggle. And that's going to kick off the spinning of the reals. And then we've also created an area where we can add in the visuals. And that's going to be going within this div. We don't need to add any classes because we're just creating the elements on the fly using the document create element. So that's going to allow us to have those elements selected within the JavaScript objects. And we can always reference back to them and then use them within the code, just as we've been doing with output. In this lesson, we're going to continue off where we left off last. So we've selected the element my div, and we want to add in a few elements on the page. So we need a main game area as well as a button that's going to trigger off and start the game spin. So start there real spinning. And then also where we're going to have the spinning reels as well. So let's create those elements and set up an elements. We can just call this a game area. And then using the document, create elements, create an elements and the element that we're going to create, it's going to be a div. And then also we'll have a button. And then using the document, create elements, Let's create a button tag. And then we're going to do all the labeling with JavaScript. And of course you can do this with HTML. But we do want to practice as much as possible with DOM interaction. So that's where I'm going to go ahead and I'm going to create the elements using JavaScript and then update the contents of those elements. So for the button, Let's add in textContent for the button. And this can just say spin. So whenever the user clicks the button, it will spin the wheels. So we also want to add both of these newly-created elements to the page. So we can use the output as their main container and using append whichever one we want first. That's one that we're going to add last because we're appending. So if we do like button and then the output and append the elements object, game area. They both get added to the page when we go over to the HTML. And I also might want to clear out the current content there, so we don't need that hello world in the div. So we've placed the button above so because we're appending, so we're adding it after. So any element that we add in next is going to just added in after within the order. So let's also take the output and update the inner HTML and just clear out the existing contents of it. Since we don't need that.me there. And now we've got the div, we've got the spin, we've got the button there. And also one more area that I'm going to add in. And this is going to be a message area. So this is going to give us a spot that we can use in order to add information for the user so that they know what to do next when they come in in the user application. So that will be the message area. And then within the message, that's where we can just have the hello world for now. So we'll add that here at the top and set the message. Inner HTML is going to be equal to output. So whatever the current output. And we can just grab the output textContent. Because if we grab the HTML, then we're going to grab the elements that are wrapped within it. And this actually should be a div, not message. So overthrowing the error there. So let's go back into the HTML. So we've got our message area, we've got the button for the user interactions. And then we've got a div where we're going to output the spinning wheels. So next up, we've got the, all the elements selected. Let's say add in some parameters for the game. So setting up mean game object. So this is where we can add all of our game content. So how many wheels we want or how many reels we want? So let's start with a default of four, also setting up the play of the wheel. So this is gonna give us a way to start and stop. The play will set up list for coins. So this is on the coins the user has. So start them off at 100. And also l