7 Up 7 Down

A simple browser-based dice game built with HTML, CSS, and vanilla JavaScript. Guess whether the sum of two dice will be below 7, exactly 7, or above 7, then roll to see the result.

Features

• Clean, responsive UI with clear feedback on results
• Input validation for allowed range (2–12)
• Visual dice roll using local images (Dice 1.png … Dice 6.png)
• No external dependencies; runs entirely in the browser

How to Run

1. Clone or download this repository.
2. Open 7_up_7_down.html directly in any modern web browser (Chrome, Firefox, Edge, Safari).
   • No build step or server is required.

How to Play

1. Enter a number between 2 and 12 in the input field. Your input represents your prediction category:
   • If you enter a number below 7 (2–6), you are predicting the sum will be below 7.
   • If you enter 7, you are predicting the sum will be exactly 7.
   • If you enter a number above 7 (8–12), you are predicting the sum will be above 7.
2. Click the "Roll Dice" button.
3. Two dice are rolled at random and displayed.
4. The result section shows whether your prediction was correct along with the dice sum.

Rules Summary

• Two six-sided dice are rolled. The possible sum is 2–12.
• Your prediction is determined by the number you input:
  • 2–6: Predict "below 7"
  • 7: Predict "exactly 7"
  • 8–12: Predict "above 7"
• You win if your prediction matches the dice sum category.

Project Structure

7_UP_7_DOWN/
├─ 7_up_7_down.html     # Main HTML with inline CSS and JS
├─ Dice 1.png           # Die face image (1)
├─ Dice 2.png           # Die face image (2)
├─ Dice 3.png           # Die face image (3)
├─ Dice 4.png           # Die face image (4)
├─ Dice 5.png           # Die face image (5)
└─ Dice 6.png           # Die face image (6)

Technology

• HTML5 for structure
• CSS3 for styling
• Vanilla JavaScript for game logic and DOM updates

Notes

• Ensure the dice image files remain in the same directory as 7_up_7_down.html so that the images load correctly.
• The UI and logic are contained within the single HTML file for simplicity.

Customization

• Styling: Adjust styles within the <style> tag in 7_up_7_down.html.
• Logic: Modify the game() function inside the <script> tag to change gameplay behavior.

Contributing

Contributions are welcome. Please open an issue to discuss changes or submit a pull request with a clear description of the improvement or fix.

License

This project is provided as-is without a specified license. If you plan to use or distribute this code, consider adding a license file (for example, MIT) that suits your needs.