JavaScript Projects JS Dynamic interactive DOM elements

Course Curriculum

Chapter 1: Introduction to applying JavaScript to Create mini projects Course

Lecture 1: Introduction to JavaScript Mini Projects

Chapter 2: Lorem Ipsum Generator app with JavaScript

Lecture 1: Introduction to how to create a Lorem Ipsum Generator with JavaScript

Lecture 2: Resources and Reference for JavaScript

Lecture 3: How to Setup HTML and Files for JavaScript Lorem Ipsum Generator

Lecture 4: How to select DOM elements JavaScript DOM Element Selection

Lecture 5: How to add interaction Add EventListener JavaScript

Lecture 6: How to use data as JavaScript objects Add Data to Output

Lecture 7: Using String Methods and Regex to Clean String values with JavaScript

Lecture 8: How to generate random words with JavaScript Random Word Paragraphs.

Lecture 9: How to use JavaScript to Create Sentences from Words randomly

Lecture 10: How to Capitalize a String with JavaScript code examples

Lecture 11: How to get values from User input for Word Count and use within JavaScript code

Lecture 12: JavaScript Lorem Ipsum Generator Complete Code Review

Lecture 13: JavaScript Lorem Ipsum Text Generator Coding Example Source Code

Chapter 3: Pagination from JSON data multiple pages and content loading app

Lecture 1: How to create Pagination with JavaScript introduction

Lecture 2: How to use Fetch to retrieve JSON data Page Setup Fetch Request

Lecture 3: Resources for Section

Lecture 4: How to setup a localhost for web development LocalHost Setup LiveServer.

Lecture 5: How to make page requests Make request get page data

Lecture 6: How to update page contents with JavaScript DOM manipulation Output contents

Lecture 7: How to move to the next content page with AJAX Page Buttons Next Prev

Lecture 8: How to load JSON page content Load Content By Page Number via JavaScript AJAX

Lecture 9: JavaScript Pagination Version 1 code example and review Pages by Value

Lecture 10: Page nav buttons next and prev last and first Source Code V1

Lecture 11: JavaScript Load more at the bottom of content Load More to the bottom

Lecture 12: JavaScript Pagination load more content at the bottom Click Event load More

Lecture 13: Load more content button pages JavaSCript code Examples

Chapter 4: How to create a JavaScript Carousel Images Slider Component

Lecture 1: JavaScript Carousel Introduction to project

Lecture 2: How to setup a JavaScript Image Slider Carousel Setup HTML and Image Details

Lecture 3: Section Resources and examples

Lecture 4: How to load Carousel container add images with JavaScript

Lecture 5: How to Apply CSS create Style for JavaScript Image Carousel slider

Lecture 6: How to Hide and Show Images for JavaScript Image Carousel project

Lecture 7: How to apply JavaScript to image display Conditions for Images.

Lecture 8: How to add indicators and nav dots for Carousel slider with JavaScript

Lecture 9: How to load images automatically to next image Autoload next Image Intervals

Lecture 10: How to add classes with JavaScript Add active Indicator Dot.

Lecture 11: How to debug and update Carousel Final Updates

Lecture 12: JavaScript Carousel Conclusion of mini project and code review

Lecture 13: JavaScript Image Carousel Code Example Image Slider with JavaScript source code

Chapter 5: Downloadable List items Create a JavaScript task list and download as file

Lecture 1: How to create a dynamic task list with JavaScript Task List Introduction

Lecture 2: Section resourses

Lecture 3: How to Page Setup Create List with JavaScript

Lecture 4: How to add Create List Item using JavaScript DOM element createElement method

Lecture 5: How to make the list interactive JavaScript Add Input Event Listener

Lecture 6: How to add effects with JavaScript DOM CrossOut and Delete Page elements

Lecture 7: How to add styling with CSS to JavaScript Task list Task List Styling

Lecture 8: How to Download List as Text File using JavaScript download file contents

Lecture 9: Create interaction and downloadabl list using JavaScript Download List as Text

Lecture 10: How to use localstorage to save the page contents List saved to LocalStorage.

Lecture 11: How to get localstorage data List saved to LocalStorage using JavaScript

Lecture 12: Dynamic Task list with JavaScript Download and interact with list code review

Lecture 13: JavaScript Project downloadable task list and local storage list source Code

Chapter 6: JavaScript Dynamic Timeline from JSON

Lecture 1: JavaScript Timeline Project JavaScript TimeLine Introduction

Lecture 2: JavaScript Examples Common Section Code

Lecture 3: JavaScript Coding Examples for Section

Lecture 4: JavaScript Coding Examples 2

Lecture 5: JavaScript Coding Examples for TimeLine Mini Project

Lecture 6: Section Resources and Code Examples

Lecture 7: Setup your project Setup HTML and JS data

Lecture 8: How to Create Random Content Data with JavaScript

Lecture 9: How to update elements DOM Output Content to Page

Lecture 10: How to sort Object Data with JavaScript Code Example Sort Object Data by Proper

Lecture 11: Generator a dynamic list Indicator List of Event

Lecture 12: Update Style properties Indicator Styling and Position.

Lecture 13: Create Interaction with JavaScript add eventlisteners with JavaScript

Lecture 14: Use Opacity to Hide Show Content JavaScript Style element update

Lecture 15: Create main line for JavaScript timeline project Add Line for TimeLine Effect

Lecture 16: JavaScript Timeline project Tweaks

Lecture 17: JavaScript Timeline project debugging and adjustments Final Adjustments

Lecture 18: JavaScript TimeLine Project Code Review

Lecture 19: JavaScript Timeline Dynamic and Interactive mini Project Source Code

Chapter 7: JavaScript Collision Detection example code

Lecture 1: JavaScript DOM element Collision detection How to check for overlap between Page

Lecture 2: JavaScript DOM element Collision detection How to check for overlap part 1

Lecture 3: JavaScript DOM element Collision detection How to check for overlap part 2

Lecture 4: Source Code Collision detection with JavaScript DOM elements example

Chapter 8: JavaScript Code Examples and Sample Mini Projects using JavaScript Code

Lecture 1: How to Create a Captcha Image input validation using JavaScript

Lecture 2: Source Code Captcha Image input validation using JavaScript

Lecture 3: JavaScript Random numbers and Random Array coding examples

Lecture 4: Source Code for random numbers and Random Array coding examples

Lecture 5: How to Create a Simple Dice Game

Lecture 6: Source Code Simple Dice Roller