https://github.com/atia-farha/3d-dice-roller
3D Dice Roller website that simulates rolling a 3D dice, providing a visually appealing and fun way to generate random dice outcomes.
https://github.com/atia-farha/3d-dice-roller
css css-animations css3 dice dice-game dice-roll dice-roller dice-rolling dice-rolling-game dice-rolling-simulation dice-rolls dicegame html html-css-javascript html-css-js html5 javascript javascript-project js random-generation
Last synced: 3 months ago
JSON representation
3D Dice Roller website that simulates rolling a 3D dice, providing a visually appealing and fun way to generate random dice outcomes.
- Host: GitHub
- URL: https://github.com/atia-farha/3d-dice-roller
- Owner: Atia-Farha
- Created: 2024-12-28T16:37:22.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-05T04:26:08.000Z (5 months ago)
- Last Synced: 2025-02-22T17:12:07.769Z (3 months ago)
- Topics: css, css-animations, css3, dice, dice-game, dice-roll, dice-roller, dice-rolling, dice-rolling-game, dice-rolling-simulation, dice-rolls, dicegame, html, html-css-javascript, html-css-js, html5, javascript, javascript-project, js, random-generation
- Language: CSS
- Homepage: https://atia-farha.github.io/3d-dice-roller/
- Size: 28.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 3D Dice Roller
A sleek, interactive 3D Dice Roller website that simulates rolling a 3D dice, providing a visually appealing and fun way to generate random dice outcomes. It provides an immersive experience with smooth animations and realistic dice behavior.
## Table of Contents
- [Features](#features)
- [Project Structure](#project-structure)
- [Technologies Used](#technologies-used)
- [Usage](#usage)
- [Keyboard Shortcut](#keyboard-shortcut)
- [Reporting Issues](#reporting-issues)
## Features
- **Interactive 3D Dice Animation:** Realistic 3D rotation animation when rolling the dice.
- **User-Friendly Design:** Clean and modern interface with smooth animations and colorful look.
- **Randomized Outcomes:** Each roll generates a random result from 1 to 6.
- **Interactive Button:** A responsive button with a modern design for rolling the dice.
- **Toast Notifications:** Displays the result of each dice roll in an animated toast message.
## Project Structure
```plaintext
Currency-Converter/ # Root directory
├── src/ # Source code directory
│ ├── style.css # Main CSS file for styling
│ └── script.js # JavaScript for functionality
├── index.html # Main HTML file
├── README.md # Project documentation
└── LICENSE # License file
```
## Technologies Used
- HTML5
- CSS3
- JavaScript (ES6+)
## Usage
1. Simply open this link.
2. Click the "Roll" button on the screen to roll the dice.
3. Watch the dice spin and observe the toast notification showing the rolled number.
> Ensure that you already have an installed web browser (Chrome, Firefox, etc.) on your device.
## Keyboard Shortcut
Use `Spacebar` for a hands-free experience to roll the dice.
## Reporting Issues
If you encounter any bugs or have suggestions for improvement, please report them in the Issues section of this GitHub repository. I will address them promptly.
---
© Designed and developed by Atia Farha | ALL RIGHTS RESERVED