/MonsterJS

MonsterJS - a game for learning JavaScript DOM Selectors while playing!

Primary LanguageJavaScript

Welcome to MonsterJS!

A game for learning how to access HTML elements using JavaScript DOM Selectors.

GAME CONCEPT: The family of friendly little Monsters has been facing tough times. They have to deal with unwelcomed guests, natural disasters and coronavirus spreading aroung the Monster Village. Only the JavaScript superpowers can help them to get rid of the obstacles.

🦄 DEMO

Click the link and play: https://monsterjs.com

demo screenshot

Happy hacking!

🐤 LEARNING OBJECTIVES

The game teaches how to access DOM three elements in an HTML webpage using predefined JavaScript functions and explains differences between them:

  • getElementById(),
  • GetElementsByTagName(),
  • getElementsByClassName(),
  • getElementsByName(),
  • querySelector(),
  • querySelectorAll().

📦 PREREQUISITES

For all JavaScript learners.

Familiarity with the basics of HTML and JavaScript fundamentals is a plus but not required.

👌 FEATURES

  • Responsive Web Design (RWD)
  • Progressive Web Application (PWA)
  • Player progress is saved using localStorage
  • Language version: ENG English is not my native language. I would be grateful for proofreading the descriptions.
  • Language version: PL to appear soon
  • Difficulty levels: beginner / intermediate to appear soon
  • Reset progress
  • Vibration effect (mobile) to appear soon

📓 TECHNOLOGIES

  • React.js with Hooks
  • React Context API
  • Yarn package manager
  • Webpack
  • Babel
  • SASS
  • CSS animations (eg. shake effect)
  • localStorage

If you spot any bug or have feedback, please open an isssue on Github. All your comments are very welcome.

👏 CONTRIBUTE

Icons from flaticon.com made by: