Skip to content

Instantly share code, notes, and snippets.

@ewathedoer

ewathedoer/Tic Tac Toe game.markdown

Last active June 15, 2016 17:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ewathedoer/e2734b668cf5f6913bfa09bdc38cb501 to your computer and use it in GitHub Desktop.
Save ewathedoer/e2734b668cf5f6913bfa09bdc38cb501 to your computer and use it in GitHub Desktop.
Download ZIP
Tic Tac Toe game
Raw
index.html
<!-- pen in creation -->
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Tic Tac Toe</title>
<meta name="author" content="Designed and coded by the doer.">
<meta name="description" content="The project created during Free Code Camp course according to Tic Tac Toe specification">
</head>
<body>
<section class="container-fluid">
<div id="symbol-choice" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Tic Tac Toe</h4>
</div>
<div class="modal-body">
<p>Play with</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">O</button>
<button type="button" class="btn btn-primary">X</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</section>
<!-- board-->
<section class="game-board">
<div class="game-name">
<h1>
Tic Tac Toe
</h1>
</div>
<div class="board-area">
<div id="one-left" class="board-box border-right"><span>1</span></div>
<div id="one-middle" class="board-box border-right"><span>2</span></div>
<div id="one-right" class="board-box"><span>3</span></div>
<div id="two-left" class="board-box border-right border-top"><span>4</span></div>
<div id="two-middle" class="board-box border-right border-top"><span>5</span></div>
<div id="two-right" class="board-box border-top"><span>6</span></div>
<div id="three-left" class="board-box border-right border-top"><span>7</span></div>
<div id="three-middle" class="board-box border-right border-top"><span>8</span></div>
<div id="three-right" class="board-box border-top"><span>9</span></div>
</div>
<!-- setings buttons-->
<div class="settings">
<div id="score" class="settings-button border-wide">
<h2>score</h2>
</div>
<div id="symbol" class="settings-button border-wide border-settings-top">
<h2>symbol</h2>
</div>
<div id="mode" class="settings-button border-settings-top">
<h2>mode</h2>
</div>
</div>
</section>
</body>
</html>
Raw
script.js
// pen in creation
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
style.css
/* pen in creation */
body {
color: #fff;
}
.game-board {
height: 100vh;
}
.game-name {
height: 10%;
background-color: #03a9f4;
color: #fff;
padding: 1em;
text-align: center;
}
.board-area {
height: 75%;
background-color: #b3e5fc;
position: relative;
text-align: center;
}
.settings {
height: 15%;
background-color: #607d8b;
}
h1 {
margin: 0;
}
.board-box {
position: absolute;
width: 33.33%;
height: 33.33%;
display: table;
}
.board-box span {
display: table-cell;
vertical-align: middle;
}
#one-left {
top: 0;
left: 0;
}
#one-middle {
top: 0;
left: 33.33%;
}
#one-right {
top: 0;
left: 66.66%;
}
#two-left {
top: 33.33%;
left: 0;
}
#two-middle {
top: 33.33%;
left: 33.33%;
}
#two-right {
top: 33.33%;;
left: 66.66%;
}
#three-left {
top: 66.66%;
left: 0;
}
#three-middle {
top: 66.66%;
left: 33.33%;
}
#three-right {
top: 66.66%;
left: 66.66%;
}
.settings {
position: relative;
}
.settings-button {
position: absolute;
width: 33.33%;
height: 100%;
text-align: center;
border-radius: 20px 0;
text-transform: uppercase;
}
#score {
top: 0;
left: 0;
}
#symbol {
top: 0;
left: 33.33%;
}
#mode {
top: 0;
left: 66.66%;
}
.border-right {
border-right: 3px solid white;
}
.border-top {
border-top: 3px solid white;
}
.border-wide {
border-right: 3px solid black;
}
h2 {
font-size: 1.2em;
}
/* media queries */
@media screen and (min-width: 1025px){
.board-area {
height: 90%;
width: 60%;
}
.settings {
position: absolute;
top: 10%;
right: 0;
left: 60%;
bottom: 0;
height: auto;
}
#score {
right: 0;
width: 100%;
height: 33.33%;
}
#symbol {
right: 0;
width: 100%;
height: 33.33%;
top: 33.33%;
left: 0;
}
#mode {
right: 0;
width: 100%;
height: 33.33%;
left: 0;
top: 66.66%;
}
.border-wide {
border-right: 0;
}
.border-settings-top {
border-top: 3px solid black;
}
.settings-button {
border-radius: 0 20px;
}
}
@media screen and (max-width: 767px) and (orientation: landscape) {
.game-name {
padding:0;
font-size: 1.8em;
}
}
@media screen and (min-width: 768px) {
h2 {
font-size: 1.5em;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Raw
Tic Tac Toe game.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment