Collecting Decks Example Page

Here is an example of a collection page using collection.js to organize your cards. This page requires you to have several divs and specific <p> tags to count and split up your cards, and also includes a searchbar and a 'last updated' label. I would honestly recommend just copying the code right from this page or saving it as a template to start with to make sure you keep all of the important bits intact!

This page uses collection.js, which you can find and save here! This example loads all of the images from the colors-tcg.eu server, which has every single card on it - which means you can pick it up and be good to go! If you host your cards locally/elsewhere, you need to make sure that 1.) EVERY single card is located in the same directory, and 2.) you change the 'cardStorage' variable in the very top of collection.js  to the directory where you're keeping the cards.

If a card section is currently empty, just use a card like this to fill it in the mean time so that the script will still work properly!

REQUIRED ELEMENTS:
CARD DIVS - This script relies on you having your cards split up into 5 different divs, with specific ids (collecting, high, medium, low, wish). The divs themselves contain only your card images, nothing else. You don't have to put the cards into the divs in any specific order, as the script will automatically alphabetize them for you. The script also displays the card name as a tooltip when you hover over each card. Underneath (or above, but NOT inside of) each div is a <details> tag that contains a dropdown with the names of each card in each section. The details tags each contain a <p> with the following ids: collectingtitles, hightitles, mediumtitles, lowtitles, wishtitles.

SEARCH BAR - This script includes a search bar. For the search bar to work properly, make sure that the area including your cards (from collecting all the way down to the end of 'wished') is in a div with the id 'cardsection'; otherwise, it might erase other images on your page when it searches (I haven't actually checked but I realized it might do that lol.) The bar itself uses the following code (but again, copying this whole page to start would probably be easier):

<form id="searchbar" onsubmit="return false;" method="post" style="margin:auto; text-align:center; "> <input onkeyup="searchEngine()" id="cardsearch" name="cardsearch" type="text" style="width:400px; height:25px"/> </form>

CARD COUNT - Make sure you have a <p> tag with the id 'cardcount'. It will automatically fill with the # of cards contained in your high, medium, and low sections, as seen below.

DATE UPDATED - Make sure you include a <p> tag with the id 'dateupdated' which will show the date your page was last updated!

------------------------ EXAMPLE OF THE SCRIPT IN ACTION BELOW! ------------------------

STATS

--------------------
Search bar (type in part of a card's name). Searches through all sections and hides any card that does not contain the search parameter.

COLLECTING
The section for your most important/currently emphasized cards!
The images in this section, as well as all of the following sections, have been automatically alphabetized by the script; you can paste the image tags in any order! No sweat!

card names

HIGH PRIORITY

card names (high priority)

MEDIUM PRIORITY

card names (medium priority)

LOW PRIORITY

  

card names (low priority)

WISHED DECKS

   

card names

NEEDED CARDS
This generates a list of all of the cards you're missing from decks located in your high, medium, low, and wished cards sections. It does NOT currently include your collecting section.

Needed Cards