JavaScript DOM explorer with mini applications

Learn more about JavaScript and Document Object Model interaction for web applications - Have fun building three interactive projects from scratch.

JavaScript is excellent at creating amazing interactive applications - forms are used everywhere and learning how to utilize form content with interactive JavaScript is what this course is all about. See the code in action in a real world application how you can apply JavaScript to your own projects to edit form content, update content visually making better user experiences.

Project #1 - Copy to clipboard using JavaScript exercise

• Add event listeners for user interaction
• Copy command using JavaScript
• Element contents and values
• Element selection and manipulation

Project #2 - Copy to clipboard using JavaScript exercise

• Create a table dynamically using JavaScript from an array
• Create elements with JavaScript
• Apply element style and attributes
• Adding interaction with Event listeners\
• Element values and selection
• Array updates and removal of items
• Update element contents add input field for updating
• Create elements with JavaScript
• Building of output and updates using JavaScript

Project #3 - Placeholder image path generator JavaScript string builder

• Select and use element input values
• Dynamically generator contents
• Formulate and clean string values to match format
• Element selection and manipulation

DOM Commander fun interactive web application that explores element manipulation all using JavaScript

ALL JavaScript Project - Explore how to build a keyboard command project that allows you to press keys on your keyboard and move an element on the page around. Great to practice and learn more about how element manipulation works and how JavaScript can be used to dynamically update element attributes and contents.

In the course we build a mini project that listens to key presses and updates an element on the page accordingly. Topics covered include.

• Create and element dynamically using JavaScript
• Listen for keyboard arrow key presses
• Track key presses and move the element accordingly
• Run a function to move and element
• Add elements to a page using JavaScript
• Create an array of elements
• Execute a list of movements on command
• Update, Delete and move elements on the page.
• Source Code is included.

JavaScript - DOMinator project apply JavaScript learn DOM

Create a dynamic interactive web application to update DOM elements, add toggle classes, create new elements dynamically and remove elements

Create a input form - have it update your page elements - have fun while learning element selection and manipulation.

The DOMinator is a set of input fields with buttons that connect to page elements allowing you to update the content and add classes.

Create an web interface to select and update elements from the webpage. Add and remove elements using the form input and select options. Demonstrates how to apply DOM manipulation, make element selection all while creating a fun interactive web application.

Course Covers

• Element selection using querySelector
• Adding event listeners to elements
• Creating element on the fly using JavaScript
• Updating element inner contents inputs and divs
• adding options to a select input dynamically using JavaScript
• Removing elements from page
• Iterating array data and using it within applications
• Applying logic to create interactive content
• Add and remove element classes
• Source Code included.

JavaScript Element Catcher Game - JavaScript Exercise covers APPLYING JavaScript to create a simple DOM based game. Explore how to create a game structure and create a sequence of events manipulating and updating elements to provide game play.

Course will demonstrate using the below within a simple web application

• Element selection querySelector() and querySelectorAll()
• Use of JavaScript methods for positioning and element dimensions getBoundingClientRect()
• Use of JavaScript objects to hold data
• Adding event listeners for player interaction addEventListener()
• Manipulating element style attributes
• Creating animations requestAnimationFrame()
• Using JavaScript to create Elements on the fly createElement()
• Adding created elements to visible page appendChild()
• Use of JavaScript Math()
• Keystroke event listeners and actions for those key presses
• All this and more
• Source Code is included along the way as well as the final working source code