Live Demo · Report Bug · Suggest Feature
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
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
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.
- Animations
- Ambient sound
- Mobile compatibility
- Enhance animations
- Fix text positioning and make design responsive (See issue #1)
Only plain Javascript was used on this project, along with HTML & CSS.
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".
- Fork the project
- Create a feature branch (
git checkout -b feature/yourFeature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/yourFeature) - 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!
I'm am an open source enthusiast. 🌱
Feel free to get inspiration from any aspect of this repo!
Even so, be reasonable: do not just copy!
Like academic writing, your work can incorporate the ideas of others
but should reflect your original approach to the problem.
Distributed under the MIT License. See LICENSE for more information.