DEV Community

Cover image for ReactJS - Create Magic Eight Ball
Kyle A.
Kyle A.

Posted on β€’ Edited on

ReactJS - Create Magic Eight Ball

Classic Magic 8 Ball accessible for Desktop & Mobile use.


Languages:

  1. HTML
  2. React JS
  3. Javascript
  4. CSS

Desktop
eightball image

Play the Game: https://kylestech95.github.io/eight-ball-react-js/
Source Code: https://github.com/KylesTech95/eight-ball-react-js
Clone Ref: https://github.com/KylesTech95/eight-ball-react-js.git

Mobile (Portrait)

8 portrait

Play the Game: https://kylestech95.github.io/eight-ball-react-js/
Source Code: https://github.com/KylesTech95/eight-ball-react-js
Clone Ref: https://github.com/KylesTech95/eight-ball-react-js.git

Mobile (Landscape)

8 landscape

Play the Game: https://kylestech95.github.io/eight-ball-react-js/
Source Code: https://github.com/KylesTech95/eight-ball-react-js
Clone Ref: https://github.com/KylesTech95/eight-ball-react-js.git
Features

  • Never-ending Fun
  • Ask 8 ball a question
  • Answers are limited
  • Keyboard/Touch Controls on Desktop & Mobile

What makes this version of Magic 8 unique?
Code is made by scratch, using pure react/javaScript.
Please view through the presented code and let me know how you can improve my version.

Magic 8 Controls

  • Click/tap on the input and type a question to receive a response.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay