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

24
index.html
View File

@ -10,18 +10,20 @@
</head> </head>
<body> <body>
<div class="topHalf"> <div class="backdrop">
<h1>ARCANA</h1> <div class="frame1">
<h2>Click on the deck</h2> <h1>ARCANA</h1>
<h2>Click on the deck</h2>
<div class="buttons"> <div class="buttons">
<img src="images/deckback.jpg" alt="deck of cards" id="deal" /> <img src="images/deckback.jpg" alt="deck of cards" id="deal" />
<br> <br>
<input type="button" value="SHUFFLE" id="shuffle" /> <input type="button" value="SHUFFLE" id="shuffle" />
</div> </div>
<div id="hand"> <div id="hand">
</div> </div>
<div id="reading"> <div id="reading">
</div>
</div> </div>
</div> </div>

28
main.js
View File

@ -97,6 +97,11 @@ var random = function() {
return Math.round(Math.random() * (77-cardsDealt)); 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. //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) { var removeCard = function(k) {
for (var j=k; j<cards.length; j++) { for (var j=k; j<cards.length; j++) {
@ -104,21 +109,31 @@ var removeCard = function(k) {
} }
cardsLeftToDeal--; cardsLeftToDeal--;
cardsDealt++; 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) { var dealCard = function(i) {
if (cardsLeftToDeal == 0) { if (cardsLeftToDeal == 0) {
return false; return false;
} else { } else {
//display card chosen in HTML by creating an image element //display card chosen in HTML by creating an image element
var img = document.createElement("img"); var img = document.createElement("img");
var cardJustDealt = cards[i];
var orient = randomOrient();
$(img).attr('id', cardJustDealt);
img.src = ("images/deck/" + cards[i] + ".jpg"); img.src = ("images/deck/" + cards[i] + ".jpg");
img.alt = cards[i]; img.alt = cards[i];
document.getElementById("hand").appendChild(img); if (orient === 1) {
removeCard(i); $(img).addClass("orientation");
}; document.getElementById("hand").appendChild(img);
removeCard(i);
} else {
document.getElementById("hand").appendChild(img);
removeCard(i);
}
}
}; };
//MODULE 3A: Execution (JQuery) //MODULE 3A: Execution (JQuery)
@ -133,7 +148,6 @@ $(document).ready(function() {
}); });
}); });
// MODULE 2A: Declarations // MODULE 2A: Declarations
//create a 3 layer object: //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 { html, body, h1, h2, h3, h4, p, div, ul, li, a {
padding: 0; padding: 0;
border: 0; border: 0;
@ -8,19 +13,21 @@ html, body, h1, h2, h3, h4, p, div, ul, li, a {
list-style: none; list-style: none;
text-decoration: none; text-decoration: none;
} }
/**/
@font-face { @font-face {
} }
/* Responsive */
@media screen and (min-width:600px) { @media screen and (min-width:600px) {
} }
.topHalf { .backdrop {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background: url(images/background/starrynightsky.jpeg), black; background: url(images/background/starrynightsky.jpeg), black;
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: fixed;
} }
h1, h2 { h1, h2 {
text-align: center; text-align: center;
@ -53,7 +60,14 @@ h1, h2 {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
#hand {
}
#hand img { #hand img {
padding: 7px; padding: 7px;
height: 225px; height: 225px;
}
.orientation {
transform: rotate(180deg);
} }