Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Shaun Edwards
Shaun Edwards
3,065 Points

Can someone help identify what code would be used here

Hi I recently found a website called skinodds.com I would like to know what code is used for the case openings

miikis
miikis
44,957 Points

Can you clarify what you mean by "case opening?"

3 Answers

Christopher McRoy
Christopher McRoy
17,295 Points
Christopher McRoy
Christopher McRoy
17,295 Points

If you're referring to the 'new window' box that appears over the dimmed content after you click on one of the chests, it looks like just a well-styled "modal", which can be made using HTML and CSS. There may be more styling options and features if you use something like Bootstrap though. Try a Google search on "css modal styles".

Hope that helps!

Shaun Edwards
Shaun Edwards
3,065 Points
Shaun Edwards
Shaun Edwards
3,065 Points

Yeah if you click on a random case you'll see a roll button if you click the button and see how they select the skins

Christopher McRoy
Christopher McRoy
17,295 Points
Christopher McRoy
Christopher McRoy
17,295 Points

The slider that "shuffles" all the different items by sliding them to the left after clicking the Roll the Dice button, this is called an image Carousel. Carousels can be designed using Bootstrap and JavaScript/jQuery. This one is likely implemented using some type of Math.Random function in JS/JQ in addition to the normal Carousel code.

There's a jQuery Plugins course here on Treehouse that shows you how to use a jQuery Carousel plugin called "Slick", which you can check out here: Using jQuery Plugins

Shaun Edwards
Shaun Edwards
3,065 Points

Thanks for the help it's been great

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

Hi Shaun,

If you view the source and take a look at the javascript files linked at the bottom (functions.js and clickajax.js) you can get a good idea of how the carousel and dice rolling mechanics work. You'll need to paste the js code into a prettifier such as Online JavaScript beautifier to make it readable.

For the "Roll the Dice" button example, it runs the withVelocityTest() function in functions.js, which shows that they're using an external animation library Velocity.js to handle the carousel scrolling effect. For paid entires, it runs the withVelocity() function, which is considerably longer and shows it uses ajax calls to php files that presumably interact with the database to retrieve the details of each case and returning the sale price of a winning skin.

Depending on your current JavaScript knowledge, I would recommend taking a look at the AJAX basics course as a good starter, or take a look at the workshops for Building a mobile app using jquery and AJAX