Skip to content

"Lucky Wheel" implementation using HTML, CSS, and JavaScript

License

Notifications You must be signed in to change notification settings

Thrymheim/Lucky-wheel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

Lucky Wheel Logo

Lucky Wheel

Welcome to the Lucky Wheel project! This interactive web application allows users to spin a virtual wheel for a chance to win prizes or make decisions. It’s an enjoyable and engaging way to introduce an element of randomness into any activity.

Table of Contents

Features

  • Interactive Design: A visually appealing wheel that spins with a smooth animation.
  • User-Friendly Interface: Easy to understand and operate with a single click to spin.
  • Customizable Options: Modify the wheel's segments and prizes to fit your needs.

Technologies Used

  • HTML: For the structure of the application.
  • CSS: For styling and layout.
  • JavaScript: For adding functionality such as the spinning mechanism and random prize selection.

Installation

To get started with the Lucky Wheel project, follow these steps:

  1. Clone the Repository

    git clone https://github.com/yourusername/lucky-wheel.git
  2. Open the Project Folder

    cd lucky-wheel
  3. Open the index.html file Open the index.html file in your favorite web browser to view and use the Lucky Wheel.

Usage

  • Click the "Spin" button to start the wheel spinning.
  • The wheel will spin randomly and will gradually come to a stop, landing on a random segment.
  • Each segment can represent a different prize or outcome, which you can customize.

Customization

If you want to modify the wheel’s segments or prizes, you can easily do so by editing the JavaScript array inside the script.js file. Each value in the array represents a segment on the wheel.

For example, you can change this:

const segments = ["Prize 1", "Prize 2", "Prize 3", "Prize 4"];

To any other values that you want.

CSS Styling

Feel free to customize the appearance of the wheel by modifying the styles.css file. You can change colors, fonts, and other style properties to match your project requirements.

License

This project is licensed under the MIT License. See the LICENSE file for more details.


Feel free to contribute to improving the Lucky Wheel project or create your own variations! If you have any questions or suggestions, please open an issue in the repository. Happy spinning! 🎉