html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Suffle cards</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<div>
<div class="card {{ card.color }}" ng-repeat='card in cards'>
{{ card.number }}
</div>
</div>
<div>
<input type="button"
ng-click="suffle()" value="suffle"/>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
font-family: Verdana;
}
.card {
display: inline-block;
margin: 0 4px 4px 0;
width: 2em;
padding: 4px;
border: 1px solid black;
border-radius: 4px;
box-shadow: 2px 2px gray;
font-weight: bold;
text-align: center;
}
.diam, .heart {
color: red;
}
.card:after {
display: block;
}
.spade:after {
content: "\2663";
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const COLORS = ['spade', 'diam', 'club', 'heart'];
const NUMBERS = ['J', 'Q', 'K'];
for (var i = 10; i; i--)
NUMBERS.unshift(i);
angular.module('app', [])
.controller('Ctrl', $scope => {
var cards = $scope.cards = [];
for (color of COLORS)
for (number of NUMBERS)
cards.push({
color: color,
number: number
});
$scope.suffle = () => {
var left = 0, right = 26;
while (left < right && right < 52) {
if (~~(Math.random() * 2)) {
var e = cards.splice(right, 1)[0];
cards.splice(left, 0, e);
right++;
}
left++;
}
};
});
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run