All About Basic

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

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 ******

 
<script>

jQuery(document).ready(function() {


jQuery('.button').on('click',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);
//alert(src);

});

});

</script>
 

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

 
<div class="card container">

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

</div>
 

Here is the Full Tarot card changing program.