The first Tutorialzine giveaway has finished! Now is the time to draw the winners. But, as this is a web development blog, we cannot just run an ORDER BY RAND() MySQL query in phpMyAdmin. Even more, three different sets of prizes must be awarded. This calls for a bit more stylish approach – a dedicated randomizer jQuery app, especially made for choosing winners in competitions and giveaways.

The app is divided in three steps – in step one you provide a list of the contestants’ name and email, divided by a comma (each contestant on a separate line). In the second step, you provide a prize name and a number, signifying the number of copies that have been offered. In the last step, you get a randomly selected list of contestants and their prizes.

The HTML

As usual, we start with the HTML markup and the new doctype. After this, we continue with the stylesheets. The first stylesheet is generated by the awesome fontface generator at fontsquirrel. It will allow us to use the non web-safe LeagueGothic font in every browser. The font files themselves reside in the LeagueGothic folder in the demo.

randomizer.html

Making a Giveaway Randomizer App w/ jQuery | Tutorialzine Demo Step 1

Paste a CSV Formatted List of All The Contestants

Next

Step 2

Paste a CSV Formatted List of All The Prizes

Back Finish!

Step 3

Congratulations to the Winners!


Again

As you will see in a moment, we are applying a number of styles to the body element and use it as a regular block container. Inside it we have the three .step divs, which contain their own set of headings, textareas and buttons.

As you will see in the next section of the tutorial, we are making the body three times wider than the browser window, and each section div is exactly 33.333% of its width. This makes the sections as wide as the browser (this remains so even if you resize the window).

Lastly we include the jQuery library, our script.js file, and another one – md5.js. JavaScript does not provide means of calculating md5 hashes, so we are including a pure JavaScript implementation of the md5() PHP function, created by the php.js project. We are going to need this in the final step, where we are pulling the commenter’s avatars from Gravatar, using their email addresses.

Fill in CSV formatted data


The CSS

The next step in building the app, is laying down the CSS. Only the more interesting styles are presented here. You can see the rest in styles.css in the download archive.

styles.css – Part 1

html{ /** * The background of the HTML element is * visible as the top and bottom dark strips. */ background-color:#424242; } body{ font-size:13px; color:#fff; font-family:Arial, Helvetica, sans-serif; /** * Using the body element as a * container for the animation */ left:0; position:fixed; top:5px; bottom:5px; width:300%; } .step{ /* Each step takes one third of the width */ float:left; height:100%; width:33.3333%; overflow:hidden; position:relative; } /* Step 1 */ #step1{ background:url('img/bg_1.jpg') no-repeat center center #6f7c18;} #step1 textarea{ -moz-box-shadow:-7px 7px 0 #637018; -webkit-box-shadow:-7px 7px 0 #637018; box-shadow:-7px 7px 0 #637018; } #step1 a.button{ -moz-box-shadow:-4px 4px 0 #637018; -webkit-box-shadow:-4px 4px 0 #637018; box-shadow:-4px 4px 0 #637018; } #step1 a.button:active{ /* The pressed state of the button */ -moz-box-shadow:-2px 2px 0 #637018; -webkit-box-shadow:-2px 2px 0 #637018; box-shadow:-2px 2px 0 #637018; } #step1 h1{ background-color:#4a5310;} What is happening here, is that we are using the body element as a regular container and apply a fixed positioning on it. This keeps the markup of the page to a minimum and demonstrates that the body is no different from the other elements on the page. We are making the body three times the width of the browser window. As all the sizes are given in percentages, everything is going to scale even if you resize the browser.

Notice that we’ve applied a background color to the html element. This is visible as two darker strips in the top and bottom of the app.

The three steps are floated to the left and are 33.333% of the width of the body element, which makes them perfectly fill the width of the screen. Each step has an individual set of rules applied (thanks to the IDs of the step classes), such as a background image, different colors for the box shadows and the h1 heading. Only the classes of the first step are given here, step2 and step3 follow the same idea.

styles.css – Part 2

/* Each step contains a section, centered in the page */ .section{ height:550px; left:50%; margin:-275px 0 0 -328px; position:absolute; top:50%; width:655px; } h1{ /* The step text */ font-family:'LeagueGothicRegular',Arial,Helvetica,sans-serif; font-size:60px; position:absolute; right:488px; text-align:right; top:0; width:5000px; padding:20px 70px 20px 20px; font-weight:normal; } h2{ /* The instruction text */ position:absolute; right:0; top:50px; font-weight:normal; font-style:italic; } h2,a.button{ font-family:'Myriad Pro', Corbel, Arial, Helvetica, sans-serif; } .section textarea, .section .results{ background-color:#fcfcfc; border:0; bottom:100px; color:#888888; font-family:Arial,Helvetica,sans-serif; font-size:12px; height:230px; padding:20px; position:absolute; width:615px; outline:none; resize:none; overflow:auto; } Inside each step div is an element with a .section class. It is centered horizontally and vertically on the page with CSS. All the headings, textboxes and buttons are positioned in relation with the section and are also perfectly centered.

The most interesting part is probably the h1 heading, which is always shown in the left part of the screen (no matter how large the window is) and stops precisely at 488px from the right border of the section. It also uses LeagueGothicRegular, the fontface embedded font, the definition of which you can find defined inLeagueGothic/fontface.css

The Three Steps


The jQuery

Now it is time to actually make this little app work. Fire your engines, it’s jQuery time!

script.js – Part 1

$(document).ready(function(){ /* An object with element selectors and margin values */ var buttonMargins = { '#step1 a.button' : '-100%', '#step2 a.finish' : '-200%', '#step2 a.back' : 0, '#step3 a.again' : 0 } var b = $('body'); // Adding a click event listener to // every element in the object: $.each(buttonMargins,function(key,val){ $(key).click(function(){ b.animate({marginLeft:val}); return false; }); }); // An additional click handler for the finish button: $('#step2 a.finish').click(function(){ var resultsDiv = $('#step3 .results'); // Catching the errors with a try / catch statement: try{ resultsDiv.empty(); var contestants = parseCSV($('#step1 textarea').val(),'contestants'), prizes = parseCSV($('#step2 textarea').val(),'prizes'), allPrizes = []; // The second element of the prizes CSV is // the number of copies of the prize $.each(prizes, function(){ for(var i=0;i contestants.length){ throw 'There are more prizes than contestants!'; } // Randomizing both the contestants and the prizes: contestants = contestants.shuffle(); allPrizes = allPrizes.shuffle(); // Using Gravatar var gravatarURL = 'http://www.gravatar.com/avatar/-REPLACE-?size=50&default='+ encodeURIComponent('http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size=50'); // Generating the markup: for(var i=0;i

موضوعات مشابه: