diff --git a/index.html b/index.html index 6f3f220..b7cce9a 100644 --- a/index.html +++ b/index.html @@ -7,20 +7,26 @@ + + + + Tic Tac Toe - + +
-

Tic Tac Toe

+

Tic Tac Potato!

-
+ +
@@ -28,30 +34,40 @@

Tic Tac Toe

-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
+ +
+ +
+
+ + - \ No newline at end of file + + + + \ No newline at end of file diff --git a/main.css b/main.css index 07adaf9..0845d60 100644 --- a/main.css +++ b/main.css @@ -2,7 +2,29 @@ margin-top: 10px; } +h1 { + font-family: Lobster; +} + .box { border: 1px solid black; height: 150px; -} \ No newline at end of file + 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.*/ \ No newline at end of file diff --git a/main.js b/main.js index efa9d74..69233d9 100644 --- a/main.js +++ b/main.js @@ -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 = ''; +var cat = ''; + +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!"); + } +}); }); \ No newline at end of file