excel-scroll-winner

Link to the working version Raffle Spinner Link

Firefox works best for all data set sizes and duration.

Chrome has issues animating names with large sets (1500+ rows) and short duration (8 seconds or less). Increase duration for proper animation.

Test data is available to download in the project folder. Text/image safezones for a custom background are also in the folder as well as the photoshop file. (1920x1080)

Vertically-scrolling Text

A Pen created on CodePen.io. Original URL: https://codepen.io/donconn3/pen/ZEqXKEJ.

Vertiaclly-scrolling list that has the appearance of fading in and out.

The source for the animation was from a PEN on CodePen(wish I could find it again).

Uses read-excel-file.js, write-excel-file.js, Boostrap 5.3; written mostly in vanilla JS, HTML, and CSS.

(tl;dr)Basic steps:

1. Upload an excel file (.xls or .xlsx)
2. Add Title
3. Set raffle duration
4. Change background/gradient
5. Pick name
6. Download Winner(s)

How to use the page:

File Format:

1. The file format must be .xls or .xlsx
2. ONLY Column 1 and Column 2 of the excel sheet is displayed (firstName lastName) but column 3 is also read
3. Empty Cells throw an error so make sure Col 1, Col 2, and Col 3 are all filled
4. Col 3 can be any information you want (phone, email, raffle #, ticket #, etc.)
5. The program has worked with over 28,000 rows with 2 columns & over 14,000 rows with 3 columns

Operation:

1. Upload your file
2. Change the name of the raffle and the duration
3. Click the checkbox if you want to exclude winners from each drawing or keep them in each time
4. Click "Pick Name" (winner is the last person in the 'players' array created below. Winner(s) is logged to the console and in localStorage)
5. Once the names stop scrolling, you will have your winner
6. To draw another name, click "New Drawing" and then repeat Step 4
7. To download the Winner information, click hamburger icon and then click "Download Winners".
8. This will download an excel sheet to your computer with the: DATE+TIME each winner was picked, NAME of the winner(s) and the - phone, email, raffle #, ticket #, etc.- of winner(s)
9. i) DO NOT CLICK "DELETE DRAWING" BEFORE YOU CLICK "DOWNLOAD WINNERS" OR ALL WINNER INFORMATION WILL BE LOST!
10. ii) To start a new drawing with a new list, Complete Step 5, then hit click "Delete Drawing", and then repeat from Step 1

How it Works:

1. The "readexcelfile" reads each row making an array-of-arrays (sheet = main array, each row = sub-array)
2. A "player" is created and assigned a random number which indicates their index position in the array
3. While the "counter" is less than the number of rows, the new "player" is checked against an exclusion array that checks to see if the new "player" has been picked already
4. If the "player" has been picked, then the loop restarts
5. If the "player" has NOT been picked, then a "person" is created using the "player" index and added to the "players" array and the "counter" goes up by 1
6. Once the "players" array is finished, a for-loop creates a
7. tag for each "person"
8. When the "Pick Name" button is clicked, the list of names is scrolled until the "winner" (last
9. tag) appears
10. When the "New Drawing" button is clicked, the "players" and "exclusions" arrays are emptied, and the internal "counter" is reset to 0

Future Updates

• add carusel of images to show potential prizes ✅
• collapsible menu sections
• tips/instructions at the bottom of each section for instruction
• select which columns to read from
• write in names instead of uploading a file
• download winners as a pdf/.doc as wells as spreadsheet
• Far down the road: profiles/layouts, more control over text/font/colors