CS3300-JavaScript-Arrays/index.html at master · rachelhuddles/CS3300-JavaScript-Arrays · 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
<!DOCTYPE html>
<!--
	Author: Rachel Lewis
	CS3300
	Assignment 7
-->

<html lang="en">
	<head>
		<title>Arithmetic & Arrays</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>
		function myFunction() {
			/* Declare the array */
			var math = [];

			/* Find out how many data values the user has */
			var x = prompt("How many data values do you have?", " ");
			var numValues = parseInt(x);

			/* Use a for loop to gather all of the data values and add them to the array */
			for (var i = 1; i <= numValues; i++) {
				var j = prompt("Enter data value Number " + i + ":", " ");
				var value = parseInt(j)
				math[math.length] = value;
			}

			/* Display the numbers in the array */
			document.getElementById("data").innerHTML = "Your data: " + math;

			/* A for loop to calculate the sum of all numbers in the array */
			var mLength = math.length;
			var sum = 0; /* An accumulator to hold the sum */
			for (i = 0; i < mLength; i++) {
				sum += math[i];
			}

			/* Display the sum of the array */
			document.getElementById("sum").innerHTML = "The sum of all numbers is: " + sum;

			/* A loop to find the largest number in the array */
			var largest = math[0];
			for (i = 0; i < mLength; i++){
				if (math[i] > largest) {
					largest = math[i];
				}
			}

			/* Display the largest number in the array */
			document.getElementById("large").innerHTML = "The largest number is: " + largest;

			/* A loop to find the smallest number in the array */
			var smallest = math[0];
			for (i = 0; i < mLength; i++){
				if (math[i] < smallest) {
					smallest = math[i];
				}
			}

			/* Display the smallest number in the array */
			document.getElementById("small").innerHTML = "The smallest number is: " + smallest;

			/* Calculate and display the average of the numbers */
			var average = sum / mLength;
			document.getElementById("avg").innerHTML = "The mean (average) of this data is: " + average.toFixed(2);

			/* Count the numbers that are greater than the mean of the array */
			var greater = 0;
			for (i = 0; i < mLength; i++) {
				if (math[i] > average) {
					greater++;
				}
			}

			/* Display the results */
			document.getElementById("bigger").innerHTML = greater + " number(s) are bigger than the mean number.";

			/* Count the numbers that are less than than the mean of the array */
			var lessThan = 0;
			for (i = 0; i < mLength; i++) {
				if (math[i] < average) {
					lessThan++;
				}
			}

			/* Display the results */
			document.getElementById("smaller").innerHTML = lessThan + " number(s) are smaller than the mean number.";
		}
		</script>
	</head>

	<body>
		<header>
			<h1>Arithmetic & Arrays</h1> <!-- Page header -->
		</header>

		<section> <!-- Section semantic element -->
		<h2>Enter any set of numbers you would like. The numbers will be stored in an array and used for calculations.<br><br>

		<!-- This button is a call to JS function myFunction() -->
		<button type="button" onclick="myFunction()">Enter your numbers</button><br><br>

		<!-- Display the results of JS function -->
		<span id="data"> </span><br>
		<span id="sum"> </span><br>
		<span id="large"> </span><br>
		<span id="small"> </span><br>
		<span id="avg"> </span><br>
		<span id="bigger"> </span><br>
		<span id="smaller"> </span></h2>
		</section>
	</body>
</html>