Web Development

Button Click and Show Image or Card: You can use it for Tarot card readings or for your slider

tarot card reading program

Few days ago one of my client asked me to create a simple program for Tarot Card Reading. Where visitors will click on a button and random card will be visible. For this issue I have created a little code where 8 (eight) card will be visible randomly by clicking on the button.

Here is the logic

Suppose there is 8 (eight) cards and visitors will have to click on the button to see which number comes to him.

I have taken a random number between 1 (one) to 8 (eight) and managed to show that number of card.

For example : Visitor click on the button and Randomly 8 is selected by the program. Then card number 8(eight) will be visible.

Here is the code:

****** CSS Part ******

.card.container {

div#frame {
width: 900px;
height: 600px;
background: darkred;
display: block;
margin: auto !important;
position: relative;
.button {
display: block;
width: 191px;
height: 34px !important;
background: yellow;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto !important;
text-align: center !important;
margin-right: auto;
padding-top: 18px;
font-weight: bold;
cursor: pointer !important;


****** Code JQuery ******


jQuery(document).ready(function() {

var min =1;
var max = 8;
// and the formula is:
var random = Math.floor(Math.random() * (max - min + 1)) + min;
var src="img/"+random+".jpg"
jQuery("#frame img").attr("src",src);




****** Code HTML ******

<div class="card container">

<div id="frame">
<img src="img/1.jpg"/>
<div class="button"> Click & See Your Card</div>



Here is the Full Tarot card changing program.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s