Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

W1D(Weekend) #2

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

W1D(Weekend) #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
177da59
starting lab
Nov 21, 2015
c015b16
With many Thanks to Colbert, got reset button up-&-running as well as…
Nov 22, 2015
c1c24ae
Added variable X's & O's functionality
Nov 22, 2015
1b63d26
Game over!
Nov 22, 2015
5de094c
Time to put lipstick on this pig
Nov 22, 2015
47a8dd3
Some changes
Nov 23, 2015
902ca1d
Don't know what change(s) happened since last commit
Nov 23, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 32 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,51 +7,67 @@
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">


<!-- custom styles -->
<link rel="stylesheet" href="main.css">
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<title>Tic Tac Toe</title>
</head>
</head>
<body>

<div class="container text-center">
<div class="row">
<div class="col-md-12">
<h1>Tic Tac Toe</h1>
<h1>Tic Tac Potato!</h1>
<hr>
</div>
</div>
<div class="row">

<div class="row">

<!-- a column represents our game board -->
<!-- the `offset` class helps us center the board -->
<div class="col-md-6 col-md-offset-3" id="board">

<!-- you can nest rows inside of columns! -->
<!-- our board has 3 rows, each with 3 columns inside -->
<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="row" id="row">
<div class="col-xs-4 box" id="1"></div>
<div class="col-xs-4 box" id="2"></div>
<div class="col-xs-4 box" id="3"></div>
</div>

<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="row" id="row">
<div class="col-xs-4 box" id="4"></div>
<div class="col-xs-4 box" id="5"></div>
<div class="col-xs-4 box" id="6"></div>
</div>

<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="row" id="row">
<div class="col-xs-4 box" id="7"></div>
<div class="col-xs-4 box" id="8"></div>
<div class="col-xs-4 box" id="9"></div>
</div>
</div>
</div>

<div class="btn">
<img src = "http://i.imgur.com/HmyRKBU.gif">
</div>

</div>

<!-- jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

<!-- custom script -->
<script src="main.js"></script>

</body>
</html>
</html>


<!-- http://i.imgur.com/DZtKcvZ.jpg - static 'splosion -->
24 changes: 23 additions & 1 deletion main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,29 @@
margin-top: 10px;
}

h1 {
font-family: Lobster;
}

.box {
border: 1px solid black;
height: 150px;
}
padding-top: 20px;
}

/*.box {
vertical-align: middle;
}*/

/*What I was trying to achieve was for the onClick player icons within the
individual boxes to be relative-position-centered when placed. Couldn't figure it out,
so went with simply padding the top of the box :'( */



.btn {
margin-top: 10px;
}

/*I tried to get the reset gif to only animate and run once per click, but
/*none of the solutions I found on the interwebs panned out unfortunately.*/
25 changes: 24 additions & 1 deletion main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,29 @@
// wait for DOM to load before running JS
$(function() {
console.log("Sanity Check = Eez Alive");
$(window).ready( function ( event ) {

// your code here
$('.btn').on("click", function handleClick() {
count = 0;
$('.box').empty();
});

var dog = '<img src="http://i.imgur.com/tbtS98N.png">';
var cat = '<img src="http://i.imgur.com/17mhzBU.png">';

var count = 0;
$('.box').click(function() {
if($(this).html() === "") {
if (count % 2 === 0) {
$(this).html(dog);
} else {
$(this).html(cat);
}
count++;
// console.log(count); used for debugging to make sure clicks were countified
} else {
alert("Negative, Ghost Rider, the pattern is full!");
}
});

});