![DOM Commander - A JavaScript Project Course [Video] Book Cover](https://proxy-ga.blitzz.co/proxy/123456/web.archive.org/web/20190506093142/https:/www.packtpub.com/sites/default/files/bookretailers/Licensed-Video-Cover-Portrait_low_37.png "DOM Commander - A JavaScript Project Course [Video] from Packt")
![DOM Commander - A JavaScript Project Course [Video] Book Cover](https://web.archive.org/web/20190506093142im_/https://dz13w8afd47il.cloudfront.net/sites/default/files/imagecache/featured_book_block/bookretailers/Licensed-Video-Cover-Portrait_low_37.png "DOM Commander - A JavaScript Project Course [Video] from Packt")
![DOM Commander - A JavaScript Project Course [Video] Book Cover](https://proxy-ga.blitzz.co/proxy/123456/web.archive.org/web/20190506093142im_/https:/www.packtpub.com/sites/default/files/blank.gif "DOM Commander - A JavaScript Project Course [Video] from Packt")
![JavaScript in Action - 3 Fun Interactive JavaScript Projects [Video] Book Cover](https://web.archive.org/web/20190506093142im_/https://dz13w8afd47il.cloudfront.net/sites/default/files/imagecache/featured_book_block/bookretailers/Licensed-Video-Cover-Portrait_Low_42.png "JavaScript in Action - 3 Fun Interactive JavaScript Projects [Video] from Packt")
Video Description
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
All the codes and supporting files for this course are available at: https://github.com/PacktPublishing/DOM-Commander---A-JavaScript-Project-Course
Style and Approach
Step by step lessons - source code included
![JavaScript DOM - Create Dynamic Interactive Web Pages [Video] Book Cover](https://web.archive.org/web/20190506093142im_/https://d1ldz4te4covpm.cloudfront.net/sites/default/files/imagecache/featured_book_block/bookretailers/Licensed-Video-Cover-Portrait_low_34.png "JavaScript DOM - Create Dynamic Interactive Web Pages [Video] from Packt")
![JavaScript Project - Create CSV file from Google Spreadsheets [Video] Book Cover](https://web.archive.org/web/20190506093142im_/https://dz13w8afd47il.cloudfront.net/sites/default/files/imagecache/featured_book_block/bookretailers/abc_37.png "JavaScript Project - Create CSV file from Google Spreadsheets [Video] from Packt")
![JavaScript - DOMinator project [Video] Book Cover](https://web.archive.org/web/20190506093142im_/https://d255esdrn735hr.cloudfront.net/sites/default/files/imagecache/featured_book_block/bookretailers/Licensed-Video-Cover-Portrait_low_45.png "JavaScript - DOMinator project [Video] from Packt")
![JavaScript - Card War Game Project [Video] Book Cover](https://web.archive.org/web/20190506093142im_/https://d255esdrn735hr.cloudfront.net/sites/default/files/imagecache/featured_book_block/bookretailers/abc_39.png "JavaScript - Card War Game Project [Video] from Packt")
![JavaScript in Action - Build 3 Projects from Scratch [Video] Book Cover](https://web.archive.org/web/20190506093142im_/https://dz13w8afd47il.cloudfront.net/sites/default/files/imagecache/featured_book_block/bookretailers/abc_29.png "JavaScript in Action - Build 3 Projects from Scratch [Video] from Packt")