choopi24/buttonCheck.css

## buttonCheck.css
            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:block;
                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;
            }
            .fourInRow{
                display:block;
            }

## buttonCheck.html
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="buttonCheck.css">
        <title>Just Checkin</title>
    </head>
    <body>
        <div class="container" id = "iContain">
            <div class="fourInRow" id="FIAR">
                <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>
        </div>
        <script src="buttonCheck.js"></script>
    </body>
</html>

## buttonCheck.js
var turn = 2;
var x;
const None='none',BLUE='blue',RED='red';
//Creating Board
const Board = new Array(7);
for (var i = 0;i<7;i++){
    Board[i]= new Array(7).fill(None);
}
//Buttons Making
for (var i = 1; i < 8; i++) {
	for (var j = 1; j < 8; j++) {
	    const button = document.createElement('button');
	    button.id = `(${i},${j})`;
        button.className = 'buttons';
        //button.innerText = `(${i},${j})`;
        button.addEventListener('click', Game);
		document.querySelector('.board').appendChild(button);
	}
}
//Four in row Game
function Game(){
    if (x==666){
        throw "";
    }
    var id1=this.id;
    //var row = id1.charAt(1), col = id1.charAt(3);
    var row = parseInt(id1.charAt(1))-1;
    var col = parseInt(id1.charAt(3))-1;
    if(document.getElementById(id1).className == 'buttons stTeam' || document.getElementById(id1).className == 'buttons ndTeam'){
        return "";
    }
    if (turn%2==0){
        document.getElementById(id1).className+=" stTeam";
        Board[row][col] = BLUE;
        turn++;
    }
    else{
        document.getElementById(id1).className+=" ndTeam";
        Board[row][col] = RED;
        turn++;
    }
    if(turn%2==0){
        document.getElementById('ONE').style.display = "block";
        document.getElementById('TWO').style.display = "none";
    }else{
        document.getElementById('ONE').style.display = "none";
        document.getElementById('TWO').style.display = "block";
    }
    x = checkIt(row,col);
}
function checkIt(row,col){
    var checkWin;
    if(Board[row][col]!=None){
        var colors = Board[row][col];
        if(Board[row][col]==colors){
            //rows check
            checkWin=0;
            for(var i = 0;i<7;i++){
                if(Board[i][col]!=colors){checkWin=0;}
                if(Board[i][col]==colors){
                    checkWin++;
                }
                if(checkWin>=4){
                    if(colors==BLUE){alert("Blue Won");}
                    if(colors==RED){alert("Red Won");}
                    return 666;
                }
            }
            checkWin=0;
            //columns check
            for(var i = 0;i<7;i++){
                if(Board[row][i]!=colors){checkWin=0;}
                if(Board[row][i]==colors){
                    checkWin++;
                }
                if(checkWin>=4){
                    if(colors==BLUE){alert("Blue Won");}
                    if(colors==RED){alert("Red Won");}
                    return 666;
                }
            }
        }
    }
        //alert ("in diago check");
        var aa,bb,cc,dd,ee;

        for(var i = 0;i<7;i++){
            for (var j = 0;j<7;j++){
                if(Board[j][i]!=None){
                    aa=Board[j][i];
                    ee = checkNow(j,i,aa);
                    dd = checkNowRight(j,i,aa);
                }
                if(dd == true){
                    alert("we have a winner");
                    return 666;
                }
            }
        }
    //alert("Diago ended");
    }

function checkNow(x,y,color){
    var check=0;
    if (Board[x][y]==color){
        //alert("first match");
        for(var count=0;count<3;count++){
            x++,y++;
            if(Board[x][y]==color){
                //alert("another match");
                check++;
            }
            else{
                count=4;
            }
        }
        if (check==3){
            if(color==BLUE){alert("BlueWon")}
            if(color==RED){alert("RedWon")}
            return true;
        }
    }
    else{
        return false;
    }
}
function checkNowRight(x,y,color){
    var checkRight=0;
    if (Board[x][y]==color){
        //alert(Board[x][y]);
        //alert("first match");
        for(var count1=0;count1<3;count1++){
            if(x<6){x++;}
            if(y>0){y--;}
            if(Board[x][y]==color){
                //alert(Board[x][y]);
                //alert("another match");
                checkRight++;
            }
            else{
                count1=4;
            }
        }
        if (checkRight==3){
            if(color==BLUE){alert("BlueWon")}
            if(color==RED){alert("RedWon")}
            return true;
        }
    }
}
	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:block;
	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;
	}
	.fourInRow{
	display:block;
	}
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="buttonCheck.css">
	<title>Just Checkin</title>
	</head>
	<body>
	<div class="container" id = "iContain">
	<div class="fourInRow" id="FIAR">
	<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>
	</div>
	<script src="buttonCheck.js"></script>
	</body>
	</html>
	var turn = 2;
	var x;
	const None='none',BLUE='blue',RED='red';
	//Creating Board
	const Board = new Array(7);
	for (var i = 0;i<7;i++){
	Board[i]= new Array(7).fill(None);
	}
	//Buttons Making
	for (var i = 1; i < 8; i++) {
	for (var j = 1; j < 8; j++) {
	const button = document.createElement('button');
	button.id = `(${i},${j})`;
	button.className = 'buttons';
	//button.innerText = `(${i},${j})`;
	button.addEventListener('click', Game);
	document.querySelector('.board').appendChild(button);
	}
	}
	//Four in row Game
	function Game(){
	if (x==666){
	throw "";
	}
	var id1=this.id;
	//var row = id1.charAt(1), col = id1.charAt(3);
	var row = parseInt(id1.charAt(1))-1;
	var col = parseInt(id1.charAt(3))-1;
	if(document.getElementById(id1).className == 'buttons stTeam' \|\| document.getElementById(id1).className == 'buttons ndTeam'){
	return "";
	}
	if (turn%2==0){
	document.getElementById(id1).className+=" stTeam";
	Board[row][col] = BLUE;
	turn++;
	}
	else{
	document.getElementById(id1).className+=" ndTeam";
	Board[row][col] = RED;
	turn++;
	}
	if(turn%2==0){
	document.getElementById('ONE').style.display = "block";
	document.getElementById('TWO').style.display = "none";
	}else{
	document.getElementById('ONE').style.display = "none";
	document.getElementById('TWO').style.display = "block";
	}
	x = checkIt(row,col);
	}
	function checkIt(row,col){
	var checkWin;
	if(Board[row][col]!=None){
	var colors = Board[row][col];
	if(Board[row][col]==colors){
	//rows check
	checkWin=0;
	for(var i = 0;i<7;i++){
	if(Board[i][col]!=colors){checkWin=0;}
	if(Board[i][col]==colors){
	checkWin++;
	}
	if(checkWin>=4){
	if(colors==BLUE){alert("Blue Won");}
	if(colors==RED){alert("Red Won");}
	return 666;
	}
	}
	checkWin=0;
	//columns check
	for(var i = 0;i<7;i++){
	if(Board[row][i]!=colors){checkWin=0;}
	if(Board[row][i]==colors){
	checkWin++;
	}
	if(checkWin>=4){
	if(colors==BLUE){alert("Blue Won");}
	if(colors==RED){alert("Red Won");}
	return 666;
	}
	}
	}
	}
	//alert ("in diago check");
	var aa,bb,cc,dd,ee;

	for(var i = 0;i<7;i++){
	for (var j = 0;j<7;j++){
	if(Board[j][i]!=None){
	aa=Board[j][i];
	ee = checkNow(j,i,aa);
	dd = checkNowRight(j,i,aa);
	}
	if(dd == true){
	alert("we have a winner");
	return 666;
	}
	}
	}
	//alert("Diago ended");
	}

	function checkNow(x,y,color){
	var check=0;
	if (Board[x][y]==color){
	//alert("first match");
	for(var count=0;count<3;count++){
	x++,y++;
	if(Board[x][y]==color){
	//alert("another match");
	check++;
	}
	else{
	count=4;
	}
	}
	if (check==3){
	if(color==BLUE){alert("BlueWon")}
	if(color==RED){alert("RedWon")}
	return true;
	}
	}
	else{
	return false;
	}
	}
	function checkNowRight(x,y,color){
	var checkRight=0;
	if (Board[x][y]==color){
	//alert(Board[x][y]);
	//alert("first match");
	for(var count1=0;count1<3;count1++){
	if(x<6){x++;}
	if(y>0){y--;}
	if(Board[x][y]==color){
	//alert(Board[x][y]);
	//alert("another match");
	checkRight++;
	}
	else{
	count1=4;
	}
	}
	if (checkRight==3){
	if(color==BLUE){alert("BlueWon")}
	if(color==RED){alert("RedWon")}
	return true;
	}
	}
	}