Skip to content

Instantly share code, notes, and snippets.

@choopi24

choopi24/buttonCheck.html

Last active April 29, 2018 18:56
Show Gist options
  • Save choopi24/bb576ee8803c648379692fa1861f4bfb to your computer and use it in GitHub Desktop.
Save choopi24/bb576ee8803c648379692fa1861f4bfb to your computer and use it in GitHub Desktop.
Download ZIP
New FourInRow Beta
Raw
buttonCheck.html
<html>
<head>
<title>Just Checkin</title>
<script>
</script>
<style>
body{
background-color:lightcyan;
}
.container{
position:absolute;
top: 0%;
width:100%;
height:150%;
}
.navBar{
position:absolute;
top: 0%;
width:100%;
height:15.5%;
}
.pOne, .pTwo{
position:absolute;
text-align:center;
height:15.5%;
width:50%;
}
.pOne{
display:none;
left:0%;
background-color:deepskyblue;
}
.pTwo{
display:none;
left:50%;
background-color:crimson;
}
.preGame{
display:none;
}
.board, .preGame{
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid blue;
max-height: 755px;
max-width: 715px;
}
.buttons{
border:1px solid black;
display:block;
background-color: beige;
padding: 30px;
margin:5px;
margin-left:15px;
margin-top:15px;
margin-bottom:5px;
width: 80px;
height: 80px;
border-radius:50px;
float:left;
}
.stTeam{
background-color: deepskyblue;
}
.ndTeam{
background-color: crimson;
}
</style>
</head>
<body>
<div class="container" id = "iContain">
<div class="navBar"> </div>
<div class="pOne" id="ONE"> <h1>Player 1 Turn...</h1></div>
<div class="pTwo" id="TWO"><h1>Player 2 Turn...</h1> </div>
<div class="preGame"></div>
<div class = "board"></div>
</div>
<script>
var turn = 2;
var TOP,LEFT;
TOP = 75;
for (var i = 1; i < 8; i++) {
for (var j = 1; j < 8; j++) {
LEFT+=80;
const button = document.createElement('button');
button.id = `(${i},${j})`;
button.className = 'buttons'
button.innerText = `(${i},${j})`;
//button.setAttribute("top",TOP);
//button.setAttribute("left",LEFT);
button.addEventListener('click', Game)
document.querySelector('.board').appendChild(button);
}
}
function Game(){
var id1=this.id;
if(document.getElementById(id1).className == 'buttons stTeam' || document.getElementById(id1).className == 'buttons ndTeam'){
return "";
}
if (turn%2==0){
document.getElementById(id1).className+=" stTeam";
turn++;
}
else{
document.getElementById(id1).className+=" ndTeam";
turn++;
}
if(turn%2==0){
document.getElementById('ONE').style.display = "none";
document.getElementById('TWO').style.display = "block";
}else{
document.getElementById('ONE').style.display = "block";
document.getElementById('TWO').style.display = "none";
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment