GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → martatomchuck → MonsterJS

martatomchuck / MonsterJS

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

Programming Languages

javascript
184084 projects - #8 most used programming language
SCSS
7915 projects
HTML
75241 projects

Labels

reactcss-animationsjavascript-gamequery-selectorcontext-apireact-hooks

Projects that are alternatives of or similar to MonsterJS

pokehooks-labs
A laboratory to use pokemons and do some experiments with React Hooks API
Stars: ✭ 35 (+34.62%)
Mutual labels:  context-api, react-hooks
Blog-React-Hook-Tutorial
This is a beginner tutorial for react hooks I have written in dev.to and Medium
Stars: ✭ 21 (-19.23%)
Mutual labels:  context-api, react-hooks
use-global-hook
Painless global state management for React using Hooks and Context API in 1KB!
Stars: ✭ 54 (+107.69%)
Mutual labels:  context-api, react-hooks
react-without-redux
React State Management without Redux
Stars: ✭ 33 (+26.92%)
Mutual labels:  context-api, react-hooks
MERN-BUS-APP
This is a MFRP (My first Real Project) assigned to me during my internship at Cognizant. Made with MERN Stack technology.
Stars: ✭ 92 (+253.85%)
Mutual labels:  css-animations, react-hooks
awesome-web-react
🚀 Awesome Web Based React 🚀 Develop online with React!
Stars: ✭ 31 (+19.23%)
Mutual labels:  react-hooks
web
React hooks done right, for browser and SSR.
Stars: ✭ 940 (+3515.38%)
Mutual labels:  react-hooks
covid-19-stats
Get the latest COVID-19 statistics by country
Stars: ✭ 41 (+57.69%)
Mutual labels:  react-hooks
scroll-sync-react
A scroll syncing library for react that is up to date
Stars: ✭ 49 (+88.46%)
Mutual labels:  context-api
codewonders
😎 Adenekan Wonderful's Website
Stars: ✭ 37 (+42.31%)
Mutual labels:  context-api
next-qrcode
React hooks for generating QRCode for your next React apps.
Stars: ✭ 87 (+234.62%)
Mutual labels:  react-hooks
pong-almost-from-scratch
This is an attempt of making the game pong using modern programming languages
Stars: ✭ 14 (-46.15%)
Mutual labels:  javascript-game
promotion-web
基于React: v18.x.x/Webpack: v5.x.x/React Router v6.x.x/ Antd: v5..x.x/Fetch Api/ Typescript: v4.x.x 等最新版本进行构建...
Stars: ✭ 374 (+1338.46%)
Mutual labels:  react-hooks
react-stateful
A simple implementation of React-State-Hook and React-Effect-Hook to show how React-Hooks work
Stars: ✭ 34 (+30.77%)
Mutual labels:  react-hooks
hodux
🚀Simple reactive React Hooks state management.
Stars: ✭ 29 (+11.54%)
Mutual labels:  react-hooks
device-orientation
React hook for the Device Orientation API
Stars: ✭ 23 (-11.54%)
Mutual labels:  react-hooks
flutter use
Play Flutter Hooks.
Stars: ✭ 150 (+476.92%)
Mutual labels:  react-hooks
HTML5-Space-Invaders
A Space Invaders HTML5 porting. This work is licensed under a Creative Commons Attribution - Share Alike 3.0 - Unported license (CC BY-SA 3.0). The text of the license is available at http://creativecommons.org/licenses/by-sa/3.0/ .
Stars: ✭ 36 (+38.46%)
Mutual labels:  javascript-game
react-use-hubspot-form
Embed HubSpot forms into your React components using hooks! Works with Create React App, Gatsby and other platforms.
Stars: ✭ 41 (+57.69%)
Mutual labels:  react-hooks
Forum-App-React-Frontend
This is the React client that consumes the API built here: https://github.com/victorsteven/Forum-App-Go-Backend
Stars: ✭ 39 (+50%)
Mutual labels:  react-hooks
View All Similar Projects ➔

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:

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].