Projects-MadeBy-JavaScript

JavaScript Projects for Practice – Easy Ideas to Coding JS.

31 Mini Project.:fire:

List of Projects

• Color Flipper See in Codepen :white_check_mark:

  • arrays
  • getElementById()
  • querySelector()
  • addEventListener()
  • body.style.backgroundColor
  • Math.floor()
  • Math.random()
  • array.length

• Counter See in Codepen :white_check_mark:

  • querySelectorAll()
  • forEach()
  • addEventListener()
  • currentTarget property
  • classList
  • textContent

• Review Carousel See in Codepen :white_check_mark:

  • objects
  • DOMContentLoaded
  • addEventListener()
  • array.length
  • textContent

• Responsive Navbar See in Codepen :white_check_mark:

  • querySelector()
  • addEventListener()
  • classList.toggle()

• :fire:Sidebar See in Codepen :white_check_mark:

  • querySelector()
  • addEventListener()
  • classList.toggle()
  • classList.remove()

• Modal High See in Codepen :white_check_mark:

  • querySelector()
  • addEventListener()
  • classList.add()
  • classList.remove()

• :fire:Modal See in Codepen :white_check_mark:

  • addEventListener()
  • classList.add()
  • classList.remove()

• FAQ Page See in Codepen :white_check_mark:

  • querySelectorAll()
  • addEventListener()
  • forEach()
  • classList.remove()
  • classList.toggle()

• :fire:Restaurant Menu Page See in Codepen :white_check_mark:

  • arrays
  • objects
  • forEach()
  • DOMContentLoaded
  • map, reduce, and filter
  • innerHTML
  • includes method

• Video Background See in Codepen :white_check_mark:

  • document.querySelector()
  • addEventListener()
  • classList.contains()
  • classList.add()
  • classList.remove()
  • play()
  • pause()

• :fire:Form Validation See in Codepen :white_check_mark:

  • querySelector()
  • conditions
  • querySelectorAll()

• Color Change See in Codepen :white_check_mark:

  • querySelector()
  • Math.floor()
  • Math.random()
  • colors

• :fire:Book A Ticket See in Codepen :white_check_mark:

  • querySelectorAll()
  • querySelector()
  • array
  • options

• Convert Temp See in Codepen :white_check_mark:

  • querySelectorAll()
  • querySelector()
  • Math
  • actions

• :fire:Key Code See in Codepen :white_check_mark:

  • querySelector()
  • getElementById()
  • keyboard event

• Show Password See in Codepen :white_check_mark:

  • getElementByClassName()
  • getElementById()
  • class list
  • querySelector()

• Range Slider See in Codepen :white_check_mark:

  • range slider
  • input
  • querySelector()

• Dynamic Theme See in Codepen :white_check_mark:

  • class list
  • querySelector()

• Custom Scroll Bar See in Codepen :white_check_mark:

  • scroll
  • events
  • DOM
  • querySelector()

• Navigation Bar on Scroll See in Codepen :white_check_mark:

  • getElementById()
  • getFullYear()
  • getBoundingClientRect()
  • slice method
  • window.scrollTo()

• :fire:Tabs that display different content See in Codepen :white_check_mark:

  • classList.add()
  • classList.remove()
  • forEach()
  • addEventListener()

• :fire:Countdown Clock See in Codepen :white_check_mark:

  • getFullYear()
  • getMonth()
  • getDate()
  • Math.floor()
  • setInterval()
  • clearInterval()

• Your Own Lorem ipsum See in Codepen :white_check_mark:

  • parseInt()
  • Math.floor()
  • Math.random()
  • isNaN()
  • slice method
  • event.preventDefault()

• Grocery List See in Codepen :white_check_mark:

  • DOMContentLoaded
  • new Date()
  • createAttribute()
  • setAttributeNode()
  • appendChild()
  • filter()
  • map()

• :fire:Custom Context Menu See in Codepen :white_check_mark:

  • context menu
  • pageX, pageY
  • events
  • querySelector()

• Max Length input See in Codepen :white_check_mark:

  • input
  • key events
  • querySelector()

• :fire:Todo List Local Storage See in Codepen :white_check_mark:

  • local storage
  • key events
  • arrays
  • jsons
  • splice

• Image Slider See in Codepen :white_check_mark:

  • setInterval
  • class list
  • events
  • addEventListener()
  • querySelector()

• :fire:BMI Calculator See in Codepen :white_check_mark:

  • events
  • addEventListener()
  • querySelector()

• Animated Keyboard See in Codepen :white_check_mark:

  • events
  • addEventListener()
  • querySelector()

• :fire:Pagination See in Codepen :white_check_mark:

  • Math.ceil
  • class list
  • array
  • appendChild()
  • events