sharpetronics/Tarot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

created randomOrient function to randomly determine if a card should be dealt upside down or upside up & integrated it into the dealCard function

Browse Source
This commit is contained in:
patriciarealini 2015-09-12 14:40:38 -07:00
parent b3c5ef95ab
commit 44a89c7405
3 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -10,7 +10,8 @@
</head>
<body>
<div class="topHalf">
<div class="backdrop">
<div class="frame1">
<h1>ARCANA</h1>
<h2>Click on the deck</h2>
@ -24,6 +25,7 @@
<div id="reading">
</div>
</div>
</div>
</body>
</html>

22
main.js
View File

@ -97,6 +97,11 @@ var random = function() {
return Math.round(Math.random() * (77-cardsDealt));
};
// create a function to randomly determine if the card will be oriented up or down, if randomOrient returns 0, do nothing. if randomOrient returns 1, rotate the card at a 180 degree angle.
var randomOrient = function() {
return Math.round(Math.random());
};
//create a function to remove a card once it has been used. This is a basic way to avoid duplicates. Implies that to deal we must refresh the page.
var removeCard = function(k) {
for (var j=k; j<cards.length; j++) {
@ -104,21 +109,31 @@ var removeCard = function(k) {
}
cardsLeftToDeal--;
cardsDealt++;
}
};
//create function to deal your random number as a card
// create function to deal your random number as a card
// also orient the card up if randomOrient is 0 & down if randomOrient is 1
var dealCard = function(i) {
if (cardsLeftToDeal == 0) {
return false;
} else {
//display card chosen in HTML by creating an image element
var img = document.createElement("img");
var cardJustDealt = cards[i];
var orient = randomOrient();
$(img).attr('id', cardJustDealt);
img.src = ("images/deck/" + cards[i] + ".jpg");
img.alt = cards[i];
if (orient === 1) {
$(img).addClass("orientation");
document.getElementById("hand").appendChild(img);
removeCard(i);
};
} else {
document.getElementById("hand").appendChild(img);
removeCard(i);
}
}
};
//MODULE 3A: Execution (JQuery)
@ -133,7 +148,6 @@ $(document).ready(function() {
});
});
// MODULE 2A: Declarations
//create a 3 layer object:

18
stylesheet.css
View File

@ -1,3 +1,8 @@
/*
Colors
*/
html, body, h1, h2, h3, h4, p, div, ul, li, a {
padding: 0;
border: 0;
@ -8,19 +13,21 @@ html, body, h1, h2, h3, h4, p, div, ul, li, a {
list-style: none;
text-decoration: none;
}
/**/
@font-face {
}
/* Responsive */
@media screen and (min-width:600px) {
}
.topHalf {
.backdrop {
width: 100vw;
height: 100vh;
background: url(images/background/starrynightsky.jpeg), black;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
background-position: fixed;
}
h1, h2 {
text-align: center;
@ -53,7 +60,14 @@ h1, h2 {
padding-left: 20px;
padding-right: 20px;
}
#hand {
}
#hand img {
padding: 7px;
height: 225px;
}
.orientation {
transform: rotate(180deg);
}