"Minesweeper Games"
Bootstrap 4.1.1 Snippet by shehzadali110

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Materialize CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<div class="container">
<h3>Minesweeper Games </br>
<span style="font-size:80%; color:#999;">you have 5 click to win the game</span>
</h3>
<div id="buttons">
<h4>Total Clicks</h4>
<a class="btn-floating btn-large waves-effect waves-light red tooltipped" id="counter" data-position="bottom" data-delay="50" data-tooltip="Total Clicks">
<span class="count">5</span>
</a>
<h4>Source</h4>
<a class="btn-floating btn-large waves-effect waves-light green tooltipped" id="counter" data-position="bottom" data-delay="50" data-tooltip="Our Source">
<span id="inc">0</span>
</a>
</div>
<!-- the boxes -->
<div id="boxContainer"></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
29
30
31
32
33
34
35
36
37
@import url("https://fonts.googleapis.com/css?family=Tangerine");
#boxContainer {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.box {
flex: 0 0 160px;
width: 160px;
height: 130px;
position: relative;
border-radius: 4px;
cursor: pointer;
}
p {
padding: 12px;
font-size: 50px;
color: #fff;
text-align: center;
margin-top: 14px;
margin-bottom: 0px;
}
span {
color: #fff;
}
#buttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.toast {
background: #000 !important;
}
#toast-container {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
29
30
31
32
33
34
35
36
37
jQuery(document).ready(function ($) {
var CLASS_NAME_LOOKUP = {
"bottom left": "first-box",
"bottom right": "second-box",
"top center": "third-box",
"top left": "fourth-box",
"top right": "five-box",
"left center": "six-box",
"left top": "seven-box",
"left bottom": "eight-box",
"right center": "nine-box",
"right top": "ten-box",
"right bottom": "eleven-box",
"bottom center": "twenty-box",
};
var BOX_TEXT_VAL = ["1", "2", "3", "x"];
var BOX_BG_CLASS = ["blue", "green", "orange", "red"];
(function () {
var targetNode = document.getElementById("boxContainer");
var boxesHTML = "";
var classNames = "";
var textclassNames = "";
var textVal = "";
var i = 0;
for (var pos in CLASS_NAME_LOOKUP) {
classNames = "box " + BOX_BG_CLASS[Math.floor(i / 3)];
classNames += " " + CLASS_NAME_LOOKUP[pos];
textVal = BOX_TEXT_VAL[Math.floor(i / 3)];
textclassNames = CLASS_NAME_LOOKUP[pos];
var Textdiv = "<p class='hide " + textclassNames + "'>" + textVal + "</p>";
var div = "<div class='" + classNames + "'>" + Textdiv + "</div>";
boxesHTML += div;
++i;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Angular
Games Schedule

Questions / Comments: