{"id":22082934,"url":"https://github.com/bpires/magic-8-ball","last_synced_at":"2025-07-24T16:30:54.904Z","repository":{"id":264783191,"uuid":"502751893","full_name":"bpires/magic-8-ball","owner":"bpires","description":"A tribute to the iconic magic 8-ball, inspired on the project built during the 'Maratona Explorer' event, at @Rocketseat.","archived":false,"fork":false,"pushed_at":"2022-06-15T00:04:12.000Z","size":12675,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-26T09:43:22.337Z","etag":null,"topics":["css3","html-css-javascript","html5","javascipt","maratona-explorer","never-stop-learning","personal-project","rocketseat","rocketseat-explorer"],"latest_commit_sha":null,"homepage":"https://bpires.github.io/magic-8-ball/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bpires.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-12T23:37:21.000Z","updated_at":"2024-05-19T20:39:35.000Z","dependencies_parsed_at":"2024-11-26T09:54:14.289Z","dependency_job_id":null,"html_url":"https://github.com/bpires/magic-8-ball","commit_stats":null,"previous_names":["bpires/magic-8-ball"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpires%2Fmagic-8-ball","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpires%2Fmagic-8-ball/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpires%2Fmagic-8-ball/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpires%2Fmagic-8-ball/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bpires","download_url":"https://codeload.github.com/bpires/magic-8-ball/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227456471,"owners_count":17777940,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","html-css-javascript","html5","javascipt","maratona-explorer","never-stop-learning","personal-project","rocketseat","rocketseat-explorer"],"created_at":"2024-12-01T00:08:19.508Z","updated_at":"2024-12-01T00:08:20.139Z","avatar_url":"https://github.com/bpires.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"[https://github.com/othneildrew/Best-README-Template](https://bpires.github.io/magic-8-ball/)\" target=\"_blank\"\u003e\u003cimg src=\"./assets/img/demo.png\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n\u003ch1 align=\"center\"\u003e\nTrust the magic 8-ball\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-5c0bcd.svg\"/\u003e\n\u003cimg src=\"https://img.shields.io/github/license/bpires/magic-8-ball?color=5c0bcd\"/\u003e\n\u003cimg src=\"https://img.shields.io/github/repo-size/bpires/magic-8-ball?color=5c0bcd\"/\u003e\n\u003cimg src=\"https://img.shields.io/github/last-commit/bpires/magic-8-ball?color=5c0bcd\"/\u003e\n\u003cimg src=\"https://img.shields.io/github/languages/count/bpires/magic-8-ball?color=5c0bcd\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://bpires.github.io/magic-8-ball/\" target=\"_blank\"\u003eLive Demo\u003c/a\u003e\n·\n\u003ca href=\"https://github.com/bpires/magic-8-ball/issues\" target=\"_blank\"\u003eReport Bug\u003c/a\u003e\n·\n\u003ca href=\"https://github.com/bpires/magic-8-ball/issues\" target=\"_blank\"\u003eSuggest Feature\u003c/a\u003e\n\u003c/p\u003e\n\n\n\n\u003cbr\u003e\n\n## About the project\n\n\u003cdiv\u003e\u003cimg align=\"right\" height=\"125em\" src=\"https://user-images.githubusercontent.com/86871991/173279082-c13966f1-3bb3-4b92-aa44-1e40599f2b67.png\"\u003e\n\u003cbr\u003e\n\n\u003cp align=\"left\"\u003e\n    This project was inspired by the one built by \u003ca href=\"https://github.com/maykbrito\" target=\"_blank\"\u003eMayk Brito\u003c/a\u003e during the 'Maratona Explorer' event.\n\u003c/p\u003e\n  \u003cp align=\"left\"\u003e\n   The event, which took place online at Rocketseat from June 6 to 12, 2022, had a fortune-telling application as its centerpiece.\n\u003c/p\u003e\n\u003cp  align=\"left\"\u003eClick here to access his original project: \u003ca href=\"https://maykrbrito.github.io/maratona-explorer-1\" target=\"_blank\"\u003elive demo\u003c/a\u003e | \u003ca href=\"https://github.com/maykrbrito/maratona-explorer-1\" target=\"_blank\"\u003erepo\u003c/a\u003e\n\u003c/p\u003e\n\n\n\u003cbr\u003e\n\u003cp align=\"right\"\u003e\u003csub\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/sub\u003e\u003c/p\u003e \n  \n\n## Context \n\nMy 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.\n  \nThe project uses the **original 20 messages**, which include 10 affirmative responses, 5 non-committal responses, and 5 negative responses.\n\nThe 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.\n\nThe 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. \n  \nThe 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.\n\n\u003cbr\u003e\n\n📺 **You can check the whole story behind it in this fun short video: [\"Uncovering the Mystery of the Magic 8 Ball\"](https://www.youtube.com/watch?v=vZRrg6Nl-1E) by Great Big Story**\n\n\u003cbr\u003e\n\u003cp align=\"right\"\u003e\u003csub\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/sub\u003e\u003c/p\u003e \n\n## Assets\n\nThe background illustration was remixed from the design of Noah Jacobus ([So You Want to Be a Product Designer](https://dribbble.com/shots/5446009-So-You-Want-to-Be-a-Product-Designer/attachments/1187731?mode=media)), using [GIMP](https://www.gimp.org/).\n  \nA noise Texture from [PNGKIT](https://www.pngkit.com/downpic/u2w7r5u2t4e6y3a9_24-jun-2015-noise-texture-png-transparent/) was used to create an animated grainy texture based on [CSS-TRICKS](https://css-tricks.com/snippets/css/animated-grainy-texture/) \u0026 [Red Stapler](https://redstapler.co/css-film-grain-effect/) tutorials.\n\nThe dice animations were based on the [CSS Magic 8-Ball Codepen](https://codepen.io/rockhill/pen/vYdawJ) by J. James Rockhill and [Pure CSS Magic 8-ball](https://codepen.io/finnhvman/pen/wrLPJz) by Bence Szabo.\n\nThe soundtrack is an [Audacity](https://www.audacityteam.org/)-modified loop of the sample [Gloomy Eerie Horror Piano Loop](https://samplefocus.com/samples/gloomy-eerie-horror-piano-loop), by bedsheetboy.\n\nIcons were outsourced from [Font Awesome](https://fontawesome.com/).\n\n\u003cbr\u003e\n\u003cp align=\"right\"\u003e\u003csub\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/sub\u003e\u003c/p\u003e \n  \n## Features\n* [x] Animations\n* [x] Ambient sound\n* [ ] Mobile compatibility  \n* [ ] Enhance animations \n \n#### Known bugs\n* [ ] Fix text positioning and make design responsive (See issue [#1](./../../issues/1))\n  \n\u003cbr\u003e\n\u003cp align=\"right\"\u003e\u003csub\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/sub\u003e\u003c/p\u003e \n  \n  \n## Stacks\n\nOnly plain Javascript was used on this project, along with HTML \u0026 CSS.  \n  \n![Stacks](https://skillicons.dev/icons?i=html,css,js\u0026theme=light)\n\n\u003cbr\u003e\n\u003cp align=\"right\"\u003e\u003csub\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/sub\u003e\u003c/p\u003e \n  \n## Contributing\n\nContributions 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**.\n\nIf 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\".\n\n1. Fork the project\n2. Create a feature branch (`git checkout -b feature/yourFeature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/yourFeature`)\n5. Open a Pull Request\n\n\u003cbr\u003e\n\n**Don't forget to give the project a star!** ⭐   \n\n\u003cbr\u003e \n \n\u003e ℹ️ **Did you know?**\n\u003e \n\u003e In 2012, GitHub launched the starring function.\n\u003e Stars were a new way to keep track of repositories that caught your attention.\n\u003e 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!**\n\n\u003cbr\u003e\n\u003cp align=\"right\"\u003e\u003csub\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/sub\u003e\u003c/p\u003e \n\n  \n## About me\n\n\u003cdiv\u003e\n\u003ca href=\"https://discord.com/users/690807885617430558\" target=\"_blank\"\u003e\u003cimg align=\"right\" width=\"25px\" src=\"https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/discord.svg\" /\u003e\n\u003ca href=\"https://www.polywork.com/rafaelbpires\" target=\"_blank\"\u003e\u003cimg align=\"right\" width=\"25px\" src=\"https://github.com/danielcranney/profileme-dev/blob/main/public/icons/socials/polywork.svg\" /\u003e\n\u003ca href=\"https://bpires.hashnode.dev/\" target=\"_blank\"\u003e\u003cimg align=\"right\" width=\"25px\" src=\"https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/hashnode.svg\" /\u003e    \n\u003ca href=\"https://www.twitter.com/rafaelbpires\" target=\"_blank\"\u003e\u003cimg align=\"right\" width=\"25px\" src=\"https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/twitter.svg\" /\u003e\n\u003ca href=\"https://www.linkedin.com/in/rafaelbpires\" target=\"_blank\"\u003e\u003cimg align=\"right\" width=\"25px\" src=\"https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/linkedin.svg\" /\u003e\n      \n\u003c/div\u003e\n\n\u003cdiv display=\"inline-block\"\u003e\n  \n\u003ca href=\"https://www.linkedin.com/in/rafaelbpires\" target=\"_blank\"\u003e\u003cimg align=\"left\" height=\"115em\" src=\"https://user-images.githubusercontent.com/86871991/172057152-983b5c18-7082-4d54-9075-356208b9bc65.png\"\u003e\u003c/a\u003e\n\n\u003c/div\u003e  \n\u003cdiv display=\"inline-block\"\u003e\n\n\u003cimg align=\"left\" height=\"35em\" src=\"https://forthebadge.com/images/badges/powered-by-coffee.svg\"\u003e \u003cbr/\u003e\n\u003e  \n\u003cimg align=\"left\" height=\"35em\" src=\"https://forthebadge.com/images/badges/built-with-love.svg\"\u003e \u003cbr/\u003e\n\u003e\n\u003ca href=\"https://www.linkedin.com/in/rafaelbpires\" target=\"_blank\"\u003e\u003cimg align=\"left\" height=\"35em\" src=\"https://user-images.githubusercontent.com/86871991/172058253-ca542177-e0a4-4db0-8ac8-017f6e12b268.png\"\u003e\u003c/a\u003e\u003cbr/\u003e\n\n\u003c/div\u003e  \n\n##\n  \n\u003cdiv align=\"center\"  display=\"inline-block\"\u003e\n\n\u003ci\u003e I'm am an open source enthusiast.\u003c/i\u003e 🌱\n\u003cbr/\u003e\u003ci\u003eFeel free to get inspiration from any aspect of this repo! \n  \u003cbr/\u003eEven so, be reasonable: \u003cstrong\u003edo not just copy!\u003c/strong\u003e\n\u003cbr/\u003eLike academic writing, your work can incorporate the ideas of others \n\u003cbr\u003ebut should reflect your original approach to the problem.\u003c/i\u003e\n\n\u003c/div\u003e\n  \n\u003cbr\u003e\n\u003cp align=\"right\"\u003e\u003csub\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/sub\u003e\u003c/p\u003e \n    \n## License\n\nDistributed under the MIT License. See [`LICENSE`](https://github.com/bpires/magic-8-ball/blob/main/LICENSE) for more information.\n\n\u003cbr\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpires%2Fmagic-8-ball","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbpires%2Fmagic-8-ball","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpires%2Fmagic-8-ball/lists"}