This project was inspired by the one built by Mayk Brito during the 'Maratona Explorer' event.

The event, which took place online at Rocketseat from June 6 to 12, 2022, had a fortune-telling application as its centerpiece.

Click here to access his original project: live demo | repo

_{back to top}

My take was to pay tribute to the iconic magic 8-ball, a popular device and toy invented in 1946 by Albert C. Carter that was used for fortune-telling or seeking advice. Albert was inspired by his mother Mary, a Cincinnati clairvoyant, who used a spirit writing device.

The project uses the original 20 messages, which include 10 affirmative responses, 5 non-committal responses, and 5 negative responses.

The Magic 8 Ball's functional component is a tube carrying a white D20 worded dice floating in dark coloured alcohol. When the dice floats, one of its faces is placed against the window, in a manner that its raised letters displace the dark liquid, revealing the printed message.

The pocket fortune teller device became popular in the format of a black 8 ball, used to to promote a Chicago-based billiards company in 1950.

The product was later rebranded as a toy and is still available today, being considered one of the top 100 greatest toys of all-time by Time Magazine.

📺 You can check the whole story behind it in this fun short video: "Uncovering the Mystery of the Magic 8 Ball" by Great Big Story

_{back to top}

The background illustration was remixed from the design of Noah Jacobus (So You Want to Be a Product Designer), using GIMP.

A noise Texture from PNGKIT was used to create an animated grainy texture based on CSS-TRICKS & Red Stapler tutorials.

The dice animations were based on the CSS Magic 8-Ball Codepen by J. James Rockhill and Pure CSS Magic 8-ball by Bence Szabo.

The soundtrack is an Audacity-modified loop of the sample Gloomy Eerie Horror Piano Loop, by bedsheetboy.

Icons were outsourced from Font Awesome.

_{back to top}

• Animations
• Ambient sound
• Mobile compatibility
• Enhance animations

• Fix text positioning and make design responsive (See issue #1)

_{back to top}

Only plain Javascript was used on this project, along with HTML & CSS.

_{back to top}

Contributions are what make the open source community such an amazing place to learn, be inspired, and create. Any contributions you make will be highly appreciated.

If you have a suggestion that would make this project better, feel free to fork the repo and create a pull request. You may also simply open an issue with the tag "enhancement".

1. Fork the project
2. Create a feature branch (git checkout -b feature/yourFeature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/yourFeature)
5. Open a Pull Request

Don't forget to give the project a star! ⭐

ℹ️ Did you know?

In 2012, GitHub launched the starring function. Stars were a new way to keep track of repositories that caught your attention. In GitHub social etiquette, starring a repo is not only way to bookmark a project but also to express how much you appreciated and found it interesting!

_{back to top}

_{back to top}

Distributed under the MIT License. See LICENSE for more information.