Duro Monsta Cardo

Inspiration

This is an idea I had a few years ago. Now I was able to code it because of my time at Uni. Figured it would be a good idea to try it here since its my first time

What it does

You press a button and a card is pulled down from the screen with a voice over line of "DURO, MONSTA CARDO". This is the main feature. There is 2 other features such that it counts how many times the button has been clicked by the user in the current session and then on the php version it also tellls the user how many times the button has been clicked since the page was loaded

How I built it

Used simple html and CSS Used more Javascript than anything else that did:

• the number generator to determine what card comes next
• to play the audio
• the move the card down and then back up
• change the class associated with the cards so that the one coming down is always on top

Challenges I ran into

I forgot almost all my html and CSS. Simple fix was just to go over til I started to remember everthing. Another Challenge was getting the card that was coming down to be on top of the other card, It was resolved by giving the two cards classes "top" and "bot" which gave z-indexs on the cards where I used javascript to switch the classes between them to The final one was was sending data to a server without refreshing the page, I followed enough tutorials of AJAX and Jquery so that I could do that (I did not learn enough Jquery for it to replace Javascript). AJAX allowed the php file to be used constantly without refreshing the page so that the client side javascript still kept count

Accomplishments that I'm proud of

Actually pulling this off, despite it being very simple it was an idea I had in secondary school and I only now was able to do to an even better standard

The code clean up. I learnt throughout the whole process how many lines I kept repeating over and over again so I used functions and called them instead, must of saved me about 100 lines

What I learned

Small amount of Jquery and AJAX. More JavaScript How fun doing this project in this event

What's next for Duro Monsta Cardo

I want to be able to add cards via the site through uploading on the site. I have two ideas:

1. Either the user can drop the file in and it checks if its the right size and sends it to somewhere to be verified
2. The user can just search up the name of a card they want to add and I use something to search a website called toadandtroll.com (its where I got the card images from, they are all the same size)

There is another goal which I may be able to do instead: Making something that will search through toadandtroll.com and find all the yugioh cards and import them all in the site.

Built With

• atom
• browser