CS3300-JavaScript-MagicSquare/index.html at master · rachelhuddles/CS3300-JavaScript-MagicSquare · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Rachel's Magic Square</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../style.css"> <!-- Link to external style sheet -->
		<link href="https://fonts.googleapis.com/css?family=Song+Myung" rel="stylesheet"> <!-- Google fonts -->

		<script>
		/* Declare the 2D array */
		var RachelMagic = [];

		function input() {

			/*Fill the two-dimensional array with the users input using nested for loops*/
			for (i = 0; i <= 2; i++) {
				RachelMagic[i] = [];
			  	for (j = 0; j <= 2; j++) {
					var num = prompt("Enter a number for row " + (i + 1) + ", column " + (j + 1) + ":", " ");
					var input = parseInt(num);
					RachelMagic[i][j] = input;
				}
			}

			/* Display the input numbers in the 9 table cells*/
			document.getElementById("sq1").innerHTML = RachelMagic[0][0];
			document.getElementById("sq2").innerHTML = RachelMagic[0][1];
			document.getElementById("sq3").innerHTML = RachelMagic[0][2];
			document.getElementById("sq4").innerHTML = RachelMagic[1][0];
			document.getElementById("sq5").innerHTML = RachelMagic[1][1];
			document.getElementById("sq6").innerHTML = RachelMagic[1][2];
			document.getElementById("sq7").innerHTML = RachelMagic[2][0];
			document.getElementById("sq8").innerHTML = RachelMagic[2][1];
			document.getElementById("sq9").innerHTML = RachelMagic[2][2];
		}

		function checkForMagic() {

			/* Check to make sure all numbers are positive */
			var magicPos = true;

			for (i = 0; i <= 2; i++) {
				for (j = 0; j <= 2; j++) {
					if (RachelMagic[i][j] < 0) {
						magicPos = false;
					}
				}
			}

			/* Check to see if rows and columns equal the same number */
			var row1 = RachelMagic[0][0] + RachelMagic[0][1] + RachelMagic[0][2];
			var row2 = RachelMagic[1][0] + RachelMagic[1][1] + RachelMagic[1][2];
			var row3 = RachelMagic[2][0] + RachelMagic[2][1] + RachelMagic[2][2];
			var col1 = RachelMagic[0][0] + RachelMagic[1][0] + RachelMagic[2][0];
			var col2 = RachelMagic[0][1] + RachelMagic[1][1] + RachelMagic[2][1];
			var col3 = RachelMagic[0][2] + RachelMagic[1][2] + RachelMagic[2][2];
			var magicSum = false;

			if (row1 === row2 && row2 === row3 && row3 === col1 && col1 === col2 && col2 === col3) {
				magicSum = true;
			}

			/*Check to see if the two diagonals are equal (and equal to rows/ columns) */
			var diag1 = RachelMagic[0][0] + RachelMagic[1][1] + RachelMagic[2][2];
			var diag2 = RachelMagic[2][0] + RachelMagic[1][1] + RachelMagic[0][2];
			var magicDiag = false;

			if (diag1 === diag2 && diag2 === row1) {
				magicDiag = true;
			}

			/*If the square passes all checks, it is a magic square */
			if (magicPos === true && magicSum === true && magicDiag === true) {
				document.getElementById("results").innerHTML = "Wow! This is a magic square!";
			}
			else {
				document.getElementById("results").innerHTML = "Sorry, your square is not a magic square.";
			}

			/*To label the results box */
			document.getElementById("title").innerHTML = "Result: ";
		}
		</script>
	</head>

	<body>
		<header>
			<h1>Rachel's Magic Square</h1> <!-- Page header -->
		</header>

		<section>
		<div class="magic-numbers">
			<h2>Solve the Magic Square puzzle! Enter nine numbers, and Rachel will check if the numbers form a magic square. A magic square exists when all the rows, columns, and diagonals of a square add up
			to the same number.</h2>

			<!-- This button is a call to JS function input() -->
			<p><button type="button" onclick="input()">Enter the magic numbers</button></p>

			<!-- Create a table with three rows and three columns, plus space to display the answers -->
			<table>
				<tr>
					<td><span id="sq1"> </span></td>
					<td><span id="sq2"> </span></td>
					<td><span id="sq3"> </span></td>
				</tr>
				<tr>
					<td><span id="sq4"> </span></td>
					<td><span id="sq5"> </span></td>
					<td><span id="sq6"> </span></td>
				</tr>
				<tr>
					<td><span id="sq7"> </span></td>
					<td><span id="sq8"> </span></td>
					<td><span id="sq9"> </span></td>
				</tr>
			</table>

			<p><button type="button" onclick="checkForMagic()">Check if it is a magic square</button></p>
			<h2><span id="title"> </span></h2>
			<h2><span id="results"> </span></h2>

		</div>
		</section>
	</body>
</html>