JavaScript/part2.html at master · marbleindex/JavaScript · 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
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
	<head>
		<!--Kristian Reyes 9/12/2020 -->
		<title>CNIT 133 Homework 2</title>
		<meta charset="utf-8">
			<meta name="description" content="homework 2 for CCSF CNIT 133">
				<meta name="keywords" content="HTML, CSS, Javascript, CCSF, Student">
					<meta name="author" content="Kristian Reyes">
						<meta name="viewport" content="width=device-width, initial-scale=1">
							<!--bootstrap 	 -->
							<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
								<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
								<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
								<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
								<!--bootstrap 	 -->
								<!-- jquery script for fade effect -->
								<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
								<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#fadearea").fadeTo("slow", 0.30);

  });
});
</script>
								<!-- javascript for function and variables -->
								<script>
    function process() {
    var number1, number2, number3, n1, n2, n3, sum, average, product, smallest, largest;

    number1 = document.forms["myform"].elements["num1"].value;
    number2 = document.forms["myform"].elements["num2"].value;
    number3 = document.forms["myform"].elements["num3"].value;

    n1 = parseInt(number1); // first number entered
    n2 = parseInt(number2); // second number entered
    n3 = parseInt(number3); // second number entered

// input test using isNan function, which checks if integer is a number.

if (isNaN(n1) == true || isNaN(n2) == true || isNaN(n3) == true) // returns true if the variable does NOT contain a valid number
	    {
	    	alert ("All entries must be NUMBERS! Click RESET and try again.") //user is presented with alert that has them retry
	    }
else          // if NaN validation passed, then the rest of the function proceeeds

{    //calculations for each of the operations
	sum = n1 + n2 + n3;
    average = sum / 3;
    product = n1 * n2 * n3;
    smallest = Math.min(n1, n2, n3);
    largest = Math.max(n1, n2, n3);


	//print statement condensed into one document.forms functions. Displays a new line for each sentence/operation.
	document.forms["myform"].elements["results"].value = ("The sum of the numbers is " + sum + "." + "\nThe average of the numbers is " + average + "."+ "\nThe product of the numbers is " + product + "." + "\nThe smallest number is " + smallest + "." + "\nThe largest number is " + largest + ".");
	    }


    }


</script>
							</head>
							<body>
								<main class="grid">
									<header  class="grid-area grid-area-1">
										<h1>CNIT 133 Homework 2 - Basic Operations </h1>
									</header>
									<nav class="grid-area grid-area-2">
										<ul>
											<li>
												<a href="homework2.html" title="CNIT 133 - HW 2">
						Return to CNIT 133 Homework 2 - Basic Operations
					</a>
											</li>
										</ul>
									</nav>
									<section class="grid-area grid-area-3">
										<h2>Part 2 </h2>
										<p> Please enter three numbers below!</p>
										<form name="myform">
											<!-- form for user input -->
											<table>
												<tr>
													<td>First Number:</td>
													<td>
														<input type="text" name="num1" size="10">
														</td>
													</tr>
													<tr>
														<td>Second Number:</td>
														<td>
															<input type="text" name="num2" size="10">
															</td>
														</tr>
														<tr>
															<td>Third Number:</td>
															<td>
																<input type="text" name="num3" size="10">
																</td>
															</tr>
														</table>
														<br>
															<input type="button" onclick="process()" value="SUBMIT">
																<input type="reset" value="RESET">
																	<br>
 Results:

																		<br>
																			<br>
																				<textarea rows="8" cols="40" id="fadearea" name="results">

																				</textarea>
																				<br>
																					<br>
																						<button type="button">Click to fade results :) </button>
																						<!-- fade button -->
																					</form>
																				</section>
																				<footer class="grid-area grid-area-4">
																					<p>
					&#169; 2020 Kristian Reyes
				</p>
																				</footer>
																			</main>
																		</body>
																	</html>