Web-dev-mini-projects
Web-dev-mini-projects copied to clipboard
Update and rename style.css to app2.js
This is a simple Dice Roll Game built using HTML, CSS, and JavaScript. The game allows users to simulate rolling a die and shows the result on the screen.
Key Components: HTML (index.html):
Structure: The HTML file contains the basic structure of the web page. There is a large die icon (🎲), a button to trigger the roll, and a section to display the result. Button: The button labeled "Roll the Dice" triggers a JavaScript function that rolls the dice. CSS (in the
Styling: The style section adds a simple design to the page, such as centering the text and increasing the size of the dice face and result. The dice symbol is enlarged for better visibility. The result is styled to appear below the dice with a larger font to clearly show the outcome of the roll. JavaScript (app.js):
Functionality: The JavaScript handles the logic for rolling the dice and updating the result on the webpage. The rollDice() function generates a random number between 1 and 6, simulating a dice roll. The updateGame() function updates the displayed dice face (⚀, ⚁, ⚂, ⚃, ⚄, ⚅) and shows the numeric result below it. An event listener on the "Roll the Dice" button ensures the dice is rolled and updated every time the button is clicked. Features: Interactive: Users can click the button as many times as they like to roll the dice. Random Dice Faces: Each time the button is clicked, a new dice face appears, corresponding to the rolled number. Minimal Design: The game is simple and easy to understand, with minimal styling to keep the focus on the dice roll action.