Learn JavaScript DOM for Beginners Interactive Web Pages

Interactive DOM list saving to localstorage. Create a list of items that can be edited and deleted. Store and sync your list items to Local storage so it saves and rebuilds the list when the page reloads.

Interactive page components to add a star rater. Add elements with components that are dynamic and fully interactive. Click the star and see the rating all stars go orange. Hover over mouse over the stars see them turn Yellow.

Mini Game for player to guess the result of a coin toss, player selects either red or blue to guess the result of the random coin toss. Tracks streak and score if guessed correctly. Project to explore random and use of logic for game design with JavaScript.

Create a typing game that counts the seconds it takes to type the word phrase that is displayed. Code will check for word accuracy and time it takes displaying the results to the player.

Simple application to store keypress and move an element on the page. Explore moving and manipulating page elements with JavaScript. Listen for keyboard presses and apply the action accordingly. The application will store the keypresses and then launch the movement once the enter key is pressed. Excellent resource to learn more about keyboard events and how to track movement and enable element movement on the web page.

Guess the combo of the random numbers that are hidden within the dials. Red means you guessed too low, red means you guessed too high green means you got it correct. Apply logic, get the inputs and provide the user feedback as a response. Interactive game which can be expanded to have more numbers for guessing the values that are hidden in each. Great way to learn more about JavaScript and how you can apply JavaScript for a simple interactive game.

Click the shape as quickly as possible,it tracks the time it takes in seconds to click it. This lesson will demonstrate how to move page elements, how to track time with a timer within JavaScript. Check and show scoring to the player. Continuous gameplay with ability to restart.

Dynamic mini game asking the player to guess the hidden number. Tracks the number of guesses as a score. Enter a guess, get feedback if it's too high or low and then guess again. Try to solve the hidden number in as little guesses as possible.  JavaScript code for a fun easy to create mini game with JavaScript.

Using just JavaScript, create an Accordion component. Explore how to hide and show page elements with JavaScript, select elements while traversing the DOM tree and apply style properties dynamically all with JavaScript code.

Create a simple drag and drop into page elements with event listeners. Apply CSS for styling. Commonly used functionality which can be done with JavaScript to move page elements from one location to another. Move the element into another parent with drag and drop. Creating multiple page elements that the draggable item can be placed in.

JavaScript Drag and Drop Simple Boxes Component Create a simple drag and drop into page elements with event listeners. Apply CSS for styling. Commonly used functionality which can be done with JavaScript to move page elements from one location to another. Move the element into another parent with drag and drop. Creating multiple page elements that the draggable item can be placed in. Create a fully dynamic Grid of cells, add new draggable items to the container. All items can be selected and dragged and dropped to any cell within the container. Extend on the drag and drop by adding a dynamic container with elements that can be dragged that are dynamically generated and added to the page using JavaScript code.

Create a simple drag and drop into page elements with event listeners. Apply CSS for styling. Commonly used functionality which can be done with JavaScript to move page elements from one location to another. Move the element into another parent with drag and drop. Creating multiple page elements that the draggable item can be placed in.

Create a fully dynamic Grid of cells, add new draggable items to the container. All items can be selected and dragged and dropped to any cell within the container. Extend on the drag and drop by adding a dynamic container with elements that can be dragged that are dynamically generated and added to the page using JavaScript code.

Create your own email extractor tool with pure JavaScript code. Use of regex and JavaScript logic to create and select email addresses from text blocks. Extract all the email addresses from a block of text, get unique addresses as a response output.

Create your own JavaScript based quiz with dynamic quiz pages, scoring and response tracking. Explore how to generate a quiz from JSON data using JavaScript to output the content. Interactive and dynamic quiz game with JavaScript. Create a Quiz with Javascript JSON quiz tracker. How to Create a quiz with JavaScript using JSON data. Dynamically generating a quiz from JSON.

Create your own JavaScript based quiz with dynamic quiz pages, scoring and response tracking. Explore how to generate a quiz from JSON data using JavaScript to output the content. Interactive and dynamic quiz game with JavaScript. Create a Quiz with Javascript JSON quiz tracker. How to Create a quiz with JavaScript using JSON data. Dynamically generating a quiz from JSON.

Select images from your computer using a web input field, show a preview of selected images in your webpage. Make the images clickable to show a popup preview. Useful component to load images from local computer to a webpage and preview the images. Make the images selectable and popup as full size. Using JavaScript to handle the file contents and the output of the file contents to the page.

Using CSS Grid and JavaScript create a visual dice game that allows the player to roll 2 dice and see who the winner is. Dynamically generate dice on the page, randomly roll the dice and check which player wins. Use of JavaScript code to hide and show page elements, apply styling dynamically to page elements. JavaScript logic for game results and game play.

Using CSS Grid and JavaScript create a visual dice game that allows the player to roll 2 dice and see who the winner is. Dynamically generate dice on the page, randomly roll the dice and check which player wins. Use of JavaScript code to hide and show page elements, apply styling dynamically to page elements. JavaScript logic for game results and game play.

Update the dice game to allow the user to select the number of players, and dynamically with JavaScript create all needed page elements for full game functionality. The game logic also needs to be updated to account for multiple winner probability and checking which of the rolls is the highest.

Tip Calculator Project Part 1

Create a dynamic interface with JavaScript, add textNode and page elements with Code. Set Attributes of inputs to number type, add event listener to the button. Make a clickable button that gets values from the two input fields.

Tip Calculator Project Part 2

Use the ternary operator to apply results of a condition in one statement line. Calculate the results of the input with conditions to ensure the input values are consistent with what we expect in the values. Apply to the number input type min and max attributes, also in the calculator do a final check, output the update check values to the input fields for the user.

JavaScript Calculator Part 1

In this lesson we create an interactive calculator with JavaScript. Press the keys on the calculator and have the values show in the display area. Keys are created from array data, elements and event listeners all added by JavaScript.

JavaScript Calculator Part 2

Debugging of the JavaScript Calculator, how to use JavaScript functions isNaN() and eval() to calculate results. Conditions to ensure the display area can properly be calculated.

JavaScript Calculator Part 3

Add conditions to fix any issues with the calculator. The display area content will be evaluated by JavaScript so you need to ensure that the formula in the display area does not have any errors. Also ensure you can only have one decimal place and that you can clear the decimal place on clear. Object.prototype.toString() , String.prototype.includes() , parseInt(), Number()

Move your mouse over the colorful bubbles and pop them. Watch out, there are red skull bubbles that will take off the score. Lessons will cover how to move elements on the page, how to check for events like mouse over and apply logic to create fun gameplay with the game. All done with JavaScript and DOM interaction.

Move your mouse over the colorful bubbles and pop them. Watch out, there are red skull bubbles that will take off the score. Lessons will cover how to move elements on the page, how to check for events like mouse over and apply logic to create fun gameplay with the game. All done with JavaScript and DOM interaction.

Element DOM Mover - how to move an element on the page within a parent element. Keypress tracking and movement with request animation frame. Select a page element and update the style properties to move an element on the page using JavaScript. Use of event listeners like key presses, tracking of key presses and applying logic to make action within the web page.

Code to check intersection of the coordinate between 2 elements on the page. Collision detection is an important part of any game to check if there is overlap of the position between two separate elements on the page. This lesson will demo how to check for the overlap and return a response.

Create a simple catch and avoid game with JavaScript and DOM page element manipulation. Move page elements by keyboard events of arrow keys. Use of animation frames to create smooth page transitions. Collision detection of page elements to check for overlap and create gameplay.