A simple dice rolling website with 6 sides, a history with a clear history button, and some basic styling.
I used ChatGPT for styling inspiration (didnāt help at all) and for JS help because Iām not good at JS.
This project simulates rolling a six-sided die. Instead of showing just a number, the result is displayed using a visual dice face for better feedback. Each roll is animated to feel more like a real dice roll, and previous rolls are saved in a history list.
When you press āROLL THE DICEā, the opacity changes, showing that you canāt use it while the dice is rolling. It has a little animation that cycles through each die number, then randomly stops on one of them. It gets added to your history of past rolled die, which you can clear using the āCLEAR HISTORYā button. Each button has a special style/animation when you hover over it, and it also changes your cursor to indicate itās clickable.
Firstly I made some basic text like the D6 dice roller text, the roll a dice button, and the result. I originally made it display a number, but changed it to a more visual one. I made a styles.css where I put all the styles, like for the button and the text. After I made the history and separated the JS from the HTML by making a script.js file.
Log in to leave a comment