JavaScript 5 Mini Projects Practice create new things

Perfect to practice and learn more about JavaScript and DOM interactions create useful components and more

Practice and learn more about JavaScript as you create 5 amazing projects all with Vanilla JavaScript

What you’ll learn

  • JavaScript how to apply JavaScript Code to mini projects.
  • Practice JavaScript while coding fun mini projects.
  • Explore how to interact with JavaScript Document Object Manipulate elements on page.
  • Create Dynamic Content with JavaScript.
  • Create Interactive Page content with JavaScript.
  • Download files with JavaScript – DOM interaction – Common JavaScript methods.

Course Content

  • Introduction to applying JavaScript to Create mini projects Course –> 1 lecture • 5min.
  • Lorem Ipsum Generator app with JavaScript –> 13 lectures • 1hr 20min.
  • Pagination from JSON data multiple pages and content loading app –> 13 lectures • 1hr 17min.
  • How to create a JavaScript Carousel Images Slider Component –> 13 lectures • 1hr 23min.
  • Downloadable List items Create a JavaScript task list and download as file –> 13 lectures • 1hr 12min.
  • JavaScript Dynamic Timeline from JSON –> 19 lectures • 2hr 25min.

JavaScript 5 Mini Projects Practice create new things

Requirements

  • Prior Coding Experience.
  • HTML CSS and JavaScript Base Knowledge.

Practice and learn more about JavaScript as you create 5 amazing projects all with Vanilla JavaScript

Explore and sharpen your skills with Mini projects that you can extend upon to create some amazing functionality and interactions for web users.  Add them to your portfolio have fun while you learn.

Challenge yourself and design your own versions

Source code is included to get you started.

Perfect for Beginner and intermediate web developers that want to build fun and useful projects with HTML, CSS & JavaScript.

These are unique coding mini projects you won’t find anywhere else.

Sharpen your HTML, CSS & JavaScript skills with these projects.

Project #1 JavaScript Lorem ipsum generator

  • Adding EventListeners
  • DOMContentLoaded when page loads
  • String methods like toUpperCase()
  • Conditions and Loops (for loops and while)
  • JavaScript Math method – random()
  • DOM document createElement(), append(), querySelector()
  • Array methods sort()

Project #2 Pagination from JSON data multiple pages and content loading app

  • Adding EventListeners for interaction
  • DOMContentLoaded when page loads
  • Ternary operator
  • Fetch method
  • JSON data – as JavaScript Objects
  • DOM document createElement(), append(), querySelector() – elements innerHTML and textContent
  • DOM disable buttons – classList.add()
  • Create HTML elements and create interactive content dynamically

Project #3 JavaScript Carousel Images Slider Component

  • Change Content on the page with Intervals setInterval()
  • Select and manipulate DOM page elements with JavaScript querySelector() classList.add() append() remove()
  • Create interactive Page content – addEventListener()
  • Practice common JavaScript Fundamental coding – forEach() push() into arrays Array.length
  • DOM disable buttons – classList.add()
  • Create HTML elements and create interactive content dynamically

Project #4 JavaScript Dynamic List builder with Download and saving of list items to localstorage.

  • How to generate a text file with JavaScript from string content
  • DOM document createElement(), append(), querySelector() – elements innerHTML and textContent
  • Add user interaction DOM document createElement()
  • Element updates to style setAttribute() style.display()
  • Add and remove page elements appendChild() removeChild() methods
  • Check element classes classList.contains()
  • Set element focus focus()
  • createTextNode() and createElement()
  • Save items to local Storage  localStorage.setItem()  localStorage.getItem()
  • Convert object to string JSON.stringify() convert String to Object JSON.parse()
  • encodeURIComponent() to create text file dynamically and set download click of hyperlink

Project #5 JavaScript Dynamic TimeLine Component

  • DOM document createElement(), append(), querySelector() – elements innerHTML and textContent
  • Move elements using Styling
  • Interactive Content with event listeners
  • Generate Page content from JSON data object
  • JavaScript Methods querySelector() addEventListener() forEach() classList.add() classList.remove() parseInt() Number() createElement() append()
  • Generate Page content randomly from string characters
  • Move elements on the page using Transform X
  • Adding styling and JavaScript for dynamic and interactive content

     

  • —– Source Code included – build your own version of the projects —–

Taught by an instructor with over 20 years of REAL WORLD experience ready to answer any questions you may have.

You have nothing to lose – build your own version of the projects HAVE FUN – Join NOW

Get Tutorial