iambasilk/magicksquare.html

## magicksquare.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>MAGIC SQUARE</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
        <style type="text/css">
            .values {
			width: 50px;
			height: 50px;
			float: left;
			background-color: yellow;
			align-content: center;
            }
            .clear {
			clear: both;
		}
        </style>
		<script type="text/javascript">

			$(document).ready(function () {


			$('#title').css({"color":"red", "background-color":"blue"});
		    var result = $('#result');
		    $('#result1').css({"color":"black", "background-color":"green","font-size": "180%"});
		    $('#result2').css({"color":"black", "background-color":"red","font-size": "180%"});
		    $('#result3').css({"color":"black", "background-color":"orange","font-size": "160%"});

		        var size = 3;
<!--		        result.html('');-->
		   		//for loop to creating input field 3*3
		        for (i = 0; i < size; i++) {
		            for (j = 0; j < size; j++) {
		                result.append('<input type="text" class="values"/>');
		            }
		            result.append('<div class="clear"></div>');
		        }
		        result.append('<button id="button_2">CHECK</button>');
		        result.append('<div class="clear"></div>');
		        $("#button_2").click(function () {
		            var result3 = $('#result3');

		    var values = $('.values');
		    r = []
		    for (k=0;k<9;k++){
		        num1=parseInt(values.get(k).value);
		            r.push(num1);
		        }
		        num=r[0]
		        res=0;
		        for(m=0;m<9;m++){
		            num=r[m]
               for (k=m+1;k<9;k++){
                    if(num == r[k]){
                        res=1;
                        break;
                        }
                        }
                        }
               if(res==1){
            $("#result3").text("THERE IS A DUPLICATION..PLEASE AVOID IT AND TRY AGAIN!");
            }
<!--            else{-->
<!--            flag = 0;-->
<!--            for (k=0;k<9;k++){-->
<!--                    if(r[k] == ''){-->
<!--                        flag=1;-->
<!--                        break;-->
<!--                        }-->
<!--                        }-->
<!--             if(flag==1){-->
<!--            $("#result3").text("THERE IS A NULLFIELD..PLEASE FILL IT AND TRY AGAIN!");-->
<!--            }-->
            else{


		    var arr = [];
		    for (i = 0; i < size; i++) {
		        var innerarray = [];
		        for (j = 0; j < size; j++) {
		            num1=parseInt(values.get(i * size + j).value);
		            innerarray.push(num1);
		        }
		        arr.push(innerarray);
		    }


		    //checking of magic square
		    var magic = true;
		    var magic_number = 0;
		    var total = 0;

		    //find the sum that makes the square magic
		    for (c = 0; c < size; c++) {
		        magic_number += arr[0][c];
		    }
		    //checking of every row total is equal or not the magic number
		     for (r = 1; r < size; r++) {
		        for (c = 0; c < size; c++) {
		            total += arr[r][c];
		        }
		        if (total != magic_number)
		        	magic = false;
		        total = 0;
		    }
		    //checking of every column total is equal or not the magic number
		    for (c = 0; c < size; c++) {
		        for (r = 0; r < size; r++) {
		            total += arr[r][c];
		        }
		        if (total != magic_number)
		        	magic = false;
		        total = 0;
		    }
		    //checking sum of the diagonals
		   for (i = 0; i < size; i++) {
		        total += arr[i][i];
		    }
		    if (total != magic_number)
		    	magic = false;
		    total = 0;

		    for (i = 0; i < size; i++) {
		        total += arr[i][size - i - 1];
		    }
		    if (total != magic_number) {
		        magic = false;
		    }
		    total = 0;
		    if (magic) {
		        $("#result2").hide();
		        $("#result3").hide();
		        $("#result1").text("CONGRATS...IT'S A MAGIC SQUARE!");
		    } else {
		        $("#result1").hide();
		        $("#result3").hide();
		        $("#result2").text("OOPS...IT'S NOT A MAGIC SQUARE....TRY AGAIN!");
		    }
		    }
		    });

			//basil start

				$(".values").click(function () {
					console.log($(this).val());
					$(this).val('');
				});

			//basil end
		});


	</script>
</head>
<body>
<h1 id='title' >MAGIC SQUARE</h1>
<p id="result"></p>
<p id="result1"></p>
<p id="result2"></p>
<p id="result3"></p>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>MAGIC SQUARE</title>
	<script type = "text/javascript"
	src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
	</script>
	<style type="text/css">
	.values {
	width: 50px;
	height: 50px;
	float: left;
	background-color: yellow;
	align-content: center;
	}
	.clear {
	clear: both;
	}
	</style>
	<script type="text/javascript">

	$(document).ready(function () {






	$('#title').css({"color":"red", "background-color":"blue"});
	var result = $('#result');
	$('#result1').css({"color":"black", "background-color":"green","font-size": "180%"});
	$('#result2').css({"color":"black", "background-color":"red","font-size": "180%"});
	$('#result3').css({"color":"black", "background-color":"orange","font-size": "160%"});

	var size = 3;
	<!-- result.html('');-->
	//for loop to creating input field 3*3
	for (i = 0; i < size; i++) {
	for (j = 0; j < size; j++) {
	result.append('<input type="text" class="values"/>');
	}
	result.append('<div class="clear"></div>');
	}
	result.append('<button id="button_2">CHECK</button>');
	result.append('<div class="clear"></div>');
	$("#button_2").click(function () {
	var result3 = $('#result3');

	var values = $('.values');
	r = []
	for (k=0;k<9;k++){
	num1=parseInt(values.get(k).value);
	r.push(num1);
	}
	num=r[0]
	res=0;
	for(m=0;m<9;m++){
	num=r[m]
	for (k=m+1;k<9;k++){
	if(num == r[k]){
	res=1;
	break;
	}
	}
	}
	if(res==1){
	$("#result3").text("THERE IS A DUPLICATION..PLEASE AVOID IT AND TRY AGAIN!");
	}
	<!-- else{-->
	<!-- flag = 0;-->
	<!-- for (k=0;k<9;k++){-->
	<!-- if(r[k] == ''){-->
	<!-- flag=1;-->
	<!-- break;-->
	<!-- }-->
	<!-- }-->
	<!-- if(flag==1){-->
	<!-- $("#result3").text("THERE IS A NULLFIELD..PLEASE FILL IT AND TRY AGAIN!");-->
	<!-- }-->
	else{


	var arr = [];
	for (i = 0; i < size; i++) {
	var innerarray = [];
	for (j = 0; j < size; j++) {
	num1=parseInt(values.get(i * size + j).value);
	innerarray.push(num1);
	}
	arr.push(innerarray);
	}


	//checking of magic square
	var magic = true;
	var magic_number = 0;
	var total = 0;

	//find the sum that makes the square magic
	for (c = 0; c < size; c++) {
	magic_number += arr[0][c];
	}
	//checking of every row total is equal or not the magic number
	for (r = 1; r < size; r++) {
	for (c = 0; c < size; c++) {
	total += arr[r][c];
	}
	if (total != magic_number)
	magic = false;
	total = 0;
	}
	//checking of every column total is equal or not the magic number
	for (c = 0; c < size; c++) {
	for (r = 0; r < size; r++) {
	total += arr[r][c];
	}
	if (total != magic_number)
	magic = false;
	total = 0;
	}
	//checking sum of the diagonals
	for (i = 0; i < size; i++) {
	total += arr[i][i];
	}
	if (total != magic_number)
	magic = false;
	total = 0;

	for (i = 0; i < size; i++) {
	total += arr[i][size - i - 1];
	}
	if (total != magic_number) {
	magic = false;
	}
	total = 0;
	if (magic) {
	$("#result2").hide();
	$("#result3").hide();
	$("#result1").text("CONGRATS...IT'S A MAGIC SQUARE!");
	} else {
	$("#result1").hide();
	$("#result3").hide();
	$("#result2").text("OOPS...IT'S NOT A MAGIC SQUARE....TRY AGAIN!");
	}
	}
	});

	//basil start

	$(".values").click(function () {
	console.log($(this).val());
	$(this).val('');
	});

	//basil end
	});



	</script>
	</head>
	<body>
	<h1 id='title' >MAGIC SQUARE</h1>
	<p id="result"></p>
	<p id="result1"></p>
	<p id="result2"></p>
	<p id="result3"></p>
	</body>
	</html>