Projects-MadeBy-JavaScript

JavaScript Projects for Practice – Easy Ideas to Coding JS.

31 Mini Project.:fire:

List of Projects

• Color Flipper See in Codepen ✅

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

• Counter See in Codepen ✅

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

• Review Carousel See in Codepen ✅

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

• Responsive Navbar See in Codepen ✅

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

• 🔥Sidebar See in Codepen ✅

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

• Modal High See in Codepen ✅

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

• 🔥Modal See in Codepen ✅

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

• FAQ Page See in Codepen ✅

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

• 🔥Restaurant Menu Page See in Codepen ✅

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

• Video Background See in Codepen ✅

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

• 🔥Form Validation See in Codepen ✅

  • querySelector()
  • conditions
  • querySelectorAll()

• Color Change See in Codepen ✅

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

• 🔥Book A Ticket See in Codepen ✅

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

• Convert Temp See in Codepen ✅

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

• 🔥Key Code See in Codepen ✅

  • querySelector()
  • getElementById()
  • keyboard event

• Show Password See in Codepen ✅

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

• Range Slider See in Codepen ✅

  • range slider
  • input
  • querySelector()

• Dynamic Theme See in Codepen ✅

  • class list
  • querySelector()

• Custom Scroll Bar See in Codepen ✅

  • scroll
  • events
  • DOM
  • querySelector()

• Navigation Bar on Scroll See in Codepen ✅

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

• 🔥Tabs that display different content See in Codepen ✅

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

• 🔥Countdown Clock See in Codepen ✅

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

• Your Own Lorem ipsum See in Codepen ✅

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

• Grocery List See in Codepen ✅

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

• 🔥Custom Context Menu See in Codepen ✅

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

• Max Length input See in Codepen ✅

  • input
  • key events
  • querySelector()

• 🔥Todo List Local Storage See in Codepen ✅

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

• Image Slider See in Codepen ✅

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

• 🔥BMI Calculator See in Codepen ✅

  • events
  • addEventListener()
  • querySelector()

• Animated Keyboard See in Codepen ✅

  • events
  • addEventListener()
  • querySelector()

• 🔥Pagination See in Codepen ✅

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