Table of contents
- Overview
- Materials
- What is the Pythagorean Theorem
- Procedure
- How to make the Homepage.html
- How to start creating the Form Pages
- Creating the Form on each HTML Webpage
- enter_side1_side2.html
- enter_side1_hypo.html
- enter_side2_hypo.html
- enter_side1_α.html
- enter_side2_α.html
- enter_hypo_α.html
- enter_side1_β.html
- enter_side2_β.html
- enter_hypo_β.html
- no_values_inputted.html
- not_valid_hypotenuse.html
- Sources
- Source Code
Overview
This article will explain how to create a Pythagorean Theorem Calculator in JavaScript. This calculator either asks for:
Two sides to calculate the Hypotenuse and the angles
One side and the Hypotenuse to calculate the missing side and angles
One side and one angle to calculate the missing side, Hypotenuse and the missing angle
One side and the Hypotenuse to calculate the missing side and angles
Materials
Computer
IDE or Text Editor
What is the Pythagorean Theorem
The Pythagorean Theorem (1) is when a right triangle's two sides equal the diagonal side or the Hypotenuse using this formula:
a^2 + b^2 = c^2
where a and b are the two sides, and c is the Hypotenuse
A right triangle has three angles since each of the three sides intersect with one another at three different points, and one angle is always a right angle or 90 degrees. The other two angles, alpha and beta always sum up to 90 degrees, and the three angles together always sums up to 180 degrees. The angles can be found using trigonometry or the trigonometric identities (2).
Procedure
How to make the Homepage.html
To create the app, a homepage is needed. The file for the homepage in this tutorial is called "homepage.html".
The homepage consists of the title, some text, a picture of a right triangle and more text and options to select what has been given to solve either the missing sides or angles.
Every html page should have the following format:
<html>
<title> </title>
<head>
</head>
<body>
</body>
</html>
First, insert the words "Pythagorean Theorem Calculator" as the title between the title tags. When the application is open, the title of the tab in the internet browser should now say "Pythagorean Theorem Calculator".
This tutorial uses inline CSS, and all the CSS is written in the style tags which are within the head tags. The background color of the entire document can be changed by modifying the color of the body tag.
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
</style>
</head>
<body>
</body>
</html>
Next, the title on the webpage and a description explaining what the Pythagorean Theorem is, will be written on the webpage. The title is "Welcome to the Pythagorean Theorem Calculator!" and is placed within the <title> tags. The following italicized text below is placed within <p> tags
Text in <p> tag:
The Pythagorean Theorem is when a right triangle's two sides equal the diagonal side by using the format a2 + b2 = c2. a and b are the two sides that equal c or the diagonal side. By knowing two values of a right triangle, the missing side can be calculated using this formula.
A right triangle can also have one of the three sides be given with one angle. Every triangle has three sides, where each of the lines intersects and makes a point where an angle is created. Since it is a right triangle, one angle is always 90 degrees and the other two angles sum up to be 90 degrees since, every triangle's angles sum to 180 degrees. The trigonometric identities sin, cos, tan or csc, sec or cot can be used to find the missing sides or angles.
For the inline CSS, h1 and p tags color and font-family were changed to green and Arial, Helvetica, sans-serif respectively. The title and description were also centered using <center> tags.
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
p {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<center> <h1>Welcome to the Pythagorean Theorem Calculator! </h1> </center>
<center>
<p> The Pythagorean Theorem is when a right triangle's two sides equal the diagonal side by using the format a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>. a and b are the two sides that equal c or the diagonal side. By knowing two values of a right triangle, the missing side can be calculated using this formula.
<br>
<br>
A right triangle can also have one of the three sides be given with one angle. Every triangle has three sides, where each of the lines intersects and makes a point where an angle is created. Since it is a right triangle, one angle is always 90 degrees and the other two angles sum up to be 90 degrees since, every triangle's angles sum to 180 degrees. The trigonometric identities sin, cos, tan or csc, sec or cot can be used to find the missing sides or angles.
</p> </center>
</body>
</html>
Next an image of a right triangle is inserted into the webpage. The image was made in paint with the same color background. A new class called container is created and within the tag, the image is inserted within it by using img src. Within the class and below inserting the image, more classes are made to write the text and angles that are displayed on the triangle. Within the inline CSS, the margins are specified and the text position as absolute for the text to be displayed correctly on the right triangle when the window is minimized or maximized. The inner classes use the original class as a reference where its positioning should be.
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
p {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 50%;
}
.alpha_letter {
position: absolute;
margin-left: 105px;
margin-top: -60px;
width: 50%;
font-size: 18px;
color: green;
}
.beta_letter {
position: absolute;
margin-left: -90px;
margin-top: -307px;
width: 50%;
font-size: 18px;
color: green;
}
.letter_a_and_side1 {
position: absolute;
margin-left: -170px;
margin-top: -200px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_b_and_side2 {
position: absolute;
margin-left: 10px;
margin-top: -10px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_c_and_hypotenuse {
position: absolute;
margin-left: 130px;
margin-top: -220px;
width: 50%;
font-size: 24px;
color: green;
}
</style>
</head>
<body>
<center> <h1>Welcome to the Pythagorean Theorem Calculator! </h1> </center>
<center>
<p> The Pythagorean Theorem is when a right triangle's two sides equal the diagonal side by using the format a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>. a and b are the two sides that equal c or the diagonal side. By knowing two values of a right triangle, the missing side can be calculated using this formula.
<br>
<br>
A right triangle can also have one of the three sides be given with one angle. Every triangle has three sides, where each of the lines intersects and makes a point where an angle is created. Since it is a right triangle, one angle is always 90 degrees and the other two angles sum up to be 90 degrees since, every triangle's angles sum to 180 degrees. The trigonometric identities sin, cos, tan or csc, sec or cot can be used to find the missing sides or angles.
</p> </center>
<center>
<div class="container">
<img src="right_triangle.png" width="350" height="350">
<div class="alpha_letter">α</div>
<div class="beta_letter">β</div>
<div class="letter_a_and_side1"> a <br> (Side 1) </div>
<div class="letter_b_and_side2"> b <br> (Side 2) </div>
<div class="letter_c_and_hypotenuse"> c <br> (Hypotenuse) </div>
</div>
</center>
</body>
</html>
Next, a form with more text is inserted to choose an option for the user to pick from depending on what they have given for to solve the Pythagorean Theorem. In-line JavaScript code is also added to make the form fully functional.
A form is declared by specifying the id, action, and method. The id name is used to identify which form is being changed if more than one form is in the document. If an option is chosen from the form, it redirects to another page by using action. Since this form has many options to choose from, the JavaScript code implements if and else statements to see which option is chosen from the form and redirects it to a certain webpage afterwards by respecifying the action. The method is set to GET as that is used to retrieve the information from the JavaScript code and send it back and update the HTML code.
In the JavaScript code, a function is used to implement all the if and else statements. Within the if and else statements, the "document.getElementById('').checked" is used to see if which option and its specific id is checked or selected from the form. Then the document.getElementById("the_form").action will update the action to the correct webpage.
The button on the homepage is designed with some CSS and connected to the same function that uses the if and else statements, which after being clicked, redirects to another webpage when a choice is chosen from the form.
<html>
<title> Pythagorean Theorem Calculator</title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
p {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#the_form {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#homepage_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
.container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 50%;
}
.alpha_letter {
position: absolute;
margin-left: 105px;
margin-top: -60px;
width: 50%;
font-size: 18px;
color: green;
}
.beta_letter {
position: absolute;
margin-left: -90px;
margin-top: -307px;
width: 50%;
font-size: 18px;
color: green;
}
.letter_a_and_side1 {
position: absolute;
margin-left: -170px;
margin-top: -200px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_b_and_side2 {
position: absolute;
margin-left: 10px;
margin-top: -10px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_c_and_hypotenuse {
position: absolute;
margin-left: 130px;
margin-top: -220px;
width: 50%;
font-size: 24px;
color: green;
}
</style>
</head>
<body>
<center> <h1>Welcome to the Pythagorean Theorem Calculator! </h1> </center>
<center>
<p> The Pythagorean Theorem is when a right triangle's two sides equal the diagonal side by using the format a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>. a and b are the two sides that equal c or the diagonal side. By knowing two values of a right triangle, the missing side can be calculated using this formula.
<br>
<br>
A right triangle can also have one of the three sides be given with one angle. Every triangle has three sides, where each of the lines intersects and makes a point where an angle is created. Since it is a right triangle, one angle is always 90 degrees and the other two angles sum up to be 90 degrees since, every triangle's angles sum to 180 degrees. The trigonometric identities sin, cos, tan or csc, sec or cot can be used to find the missing sides or angles.
</p> </center>
<center>
<div class="container">
<img src="right_triangle.png" width="350" height="350">
<div class="alpha_letter">α</div>
<div class="beta_letter">β</div>
<div class="letter_a_and_side1"> a <br> (Side 1) </div>
<div class="letter_b_and_side2"> b <br> (Side 2) </div>
<div class="letter_c_and_hypotenuse"> c <br> (Hypotenuse) </div>
</div>
</center>
<br>
<br>
<br>
<center> <h2> Select One of the Options Below: </h2> </center>
<center>
<form id="the_form" action=".html" method="GET">
<input type="radio" id="side1_side2" name="which_option" value="Side 1 and Side 2">
<label for="side1_side2"> Side 1 and Side 2 </label>
<br>
<input type="radio" id="side1_hypotenuse" name="which_option" value="Side 1 and Hypotenuse">
<label for="side1_hypotenuse"> Side 1 and Hypotenuse </label>
<br>
<input type="radio" id="side2_hypotenuse" name="which_option" value="Side 2 and Hypotenuse">
<label for="side2_hypotenuse"> Side 2 and Hypotenuse </label>
<br>
<input type="radio" id="side1_α" name="which_option" value="Side 1 and α">
<label for="side1_α"> Side 1 and α </label>
<br>
<input type="radio" id="side2_α" name="which_option" value="Side 2 and α">
<label for="side2_α"> Side 2 and α </label>
<br>
<input type="radio" id="hypotenuse_α" name="which_option" value="Hypotenuse and α">
<label for="hypotenuse_α"> Hypotenuse and α </label>
<br>
<input type="radio" id="side1_β" name="which_option" value="Side 1 and β">
<label for="side1_β"> Side 1 and β </label>
<br>
<input type="radio" id="side2_β" name="which_option" value="Side 2 and β">
<label for="side2_β"> Side 2 and β </label>
<br>
<input type="radio" id="hypotenuse_β" name="which_option" value="Hypotenuse and β">
<label for="hypotenuse_β"> Hypotenuse and β </label>
<br>
<br>
<button onclick="which_page()" id="homepage_button">Next</button>
</form>
</center>
</body>
<script>
function which_page() {
if(document.getElementById('side1_side2').checked) {
document.getElementById("the_form").action = "enter_side1_side2.html";
}
else if(document.getElementById('side1_hypotenuse').checked) {
document.getElementById("the_form").action = "enter_side1_hypo.html";
}
else if(document.getElementById('side2_hypotenuse').checked) {
document.getElementById("the_form").action = "enter_side2_hypo.html";
}
else if(document.getElementById('side1_α').checked) {
document.getElementById("the_form").action = "enter_side1_α.html";
}
else if(document.getElementById('side2_α').checked) {
document.getElementById("the_form").action = "enter_side2_α.html";
}
else if(document.getElementById('hypotenuse_α').checked) {
document.getElementById("the_form").action = "enter_hypo_α.html";
}
else if(document.getElementById('side1_β').checked) {
document.getElementById('the_form').action = "enter_side1_β.html";
}
else if(document.getElementById('side2_β').checked) {
document.getElementById('the_form').action = "enter_side2_β.html";
}
else if(document.getElementById('hypotenuse_β').checked) {
document.getElementById('the_form').action = "enter_hypo_β.html"
}
}
</script>
</html>
How to start creating the Form Pages
Any option that is chosen from the form, displays an HTML file that contains a title, the picture of the right triangle, two text boxes to enter the values of what is being asked for, a calculate button and another button to return to the homepage.
As stated, every html page is recommended to start with this structure:
<html>
<title> </title>
<head>
</head>
<body>
</body>
</html>
The title of the tab, on any page of this application is called, Pythagorean Theorem Calculator. Insert the words "Pythagorean Theorem Calculator" between the title tags.
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
</head>
<body>
</body>
</html>
Next, is to change the background color of the webpage to tan. That can be done by inserting a style tag between the <head> tags. Within the style tag, the body background color can be edited to tan to change the document's color.
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
</style>
</head>
<body>
</body>
</html>
Next, the title on the webpage must be inserted. Within the body tags, h1 tags is inserted. Within this header, the words "Pythagorean Theorem Calculator" is written. Its style has also been edited for it to be green, and the font is changed to Arial.
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<center> <h1>Pythagorean Theorem Calculator</h1> </center>
</body>
</html>
The image of the right triangle is now inserted similarly like the homepage. The styling code for the buttons were also inserted down below.
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 50%;
}
.alpha_letter {
position: absolute;
margin-left: 105px;
margin-top: -60px;
width: 50%;
font-size: 18px;
color: green;
}
.beta_letter {
position: absolute;
margin-left: -90px;
margin-top: -307px;
width: 50%;
font-size: 18px;
color: green;
}
.letter_a_and_side1 {
position: absolute;
margin-left: -170px;
margin-top: -200px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_b_and_side2 {
position: absolute;
margin-left: 10px;
margin-top: -10px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_c_and_hypotenuse {
position: absolute;
margin-left: 130px;
margin-top: -220px;
width: 50%;
font-size: 24px;
color: green;
}
#the_form {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#next_page_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
#homepage_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
</style>
</head>
<body>
<center> <h1>Pythagorean Theorem Calculator</h1> </center>
<center>
<div class="container">
<img src="right_triangle.png" width="350" height="350">
<div class="alpha_letter">α</div>
<div class="beta_letter">β</div>
<div class="letter_a_and_side1"> a <br> (Side 1) </div>
<div class="letter_b_and_side2"> b <br> (Side 2) </div>
<div class="letter_c_and_hypotenuse"> c <br> (Hypotenuse) </div>
</div>
</center>
</body>
</html>
Creating the Form on each HTML Webpage
Every html page also has another header below the triangle image that specifies to enter the values into the two text boxes that are needed to complete the Pythagorean Theorem.
Below shows source code from the "enter_side1_side2.html" to explain the general process of how the forms were created in this application.
The form is created by specifying a form tag.
<html>
<title> </title>
<head>
</head>
<body>
<center>
<form id="the_form" action="" method="GET">
</form>
</center>
</body>
</html>
The form id is necessary and must be used in JavaScript to retrieve data from that particular form. The action specifies what webpage will appear next after the data is retrieved. "Method = GET" means some data is received from JavaScript and will be sent back to HTML. In this case, there will be JavaScript code that updates the action data, which will specify which webpage should be returned after receiving the data.
One textbox is created by using a <label for> tag. Two <label for> tags are used to make the text boxes.
<html>
<title> </title>
<head>
</head>
<body>
<center>
<form id="the_form" action="" method="GET">
<label for="side1"> Side 1: </label>
<br>
<br>
<label for="side2"> Side 2: </label>
</form>
</center>
</body>
</html>
The textbox can be specified to take a value of a certain data type. Textbox can take integers, if the input type is specified to take numbers. Every textbox can and should be given a name, for the JavaScript code to read the values. Its optional to specify a minimum or maximum value for each number. Every box's minimum value that accepts a value for either the side or angle is 1. The maximum value for any angle box is 89.
<html>
<title> </title>
<head>
</head>
<body>
<center>
<form id="the_form" action="" method="GET">
<label for="side1"> Side 1: </label>
<input type="number" name="first_box" min="1">
<br>
<br>
<label for="side2"> Side 2: </label>
<input type="number" name="second_box" min="1">
</form>
</center>
</body>
</html>
For the HTML code to be compatible with JavaScript code, <script> tags are inserted in the HTML file where the JavaScript code can be written and read. All the JavaScript code is written into a function, and the function's name can be read by making a button in HTML to read the code.
<html>
<title> </title>
<head>
</head>
<body>
<center>
<form id="the_form" action="" method="GET">
<label for="side1"> Side 1: </label>
<input type="number" name="first_box" min="1">
<br>
<br>
<label for="side2"> Side 2: </label>
<input type="number" name="second_box" min="1">
<button onclick="next_page()" id="next_page_button">Calculate</button>
<br>
<br>
</form>
<button onclick="return_to_homepage()" id="homepage_button">Return to Homepage</button>
</center>
</body>
</html>
The button is declared to read a function that has the name "next_page()", therefore, the function that is declared in JavaScript will be named "next_page()".
Another button is also created in order to return to the homepage if the user wants to.
<html>
<title> </title>
<head>
</head>
<body>
<center>
<form id="the_form" action="" method="GET">
<label for="side1"> Side 1: </label>
<input type="number" name="first_box" min="1">
<br>
<br>
<label for="side2"> Side 2: </label>
<input type="number" name="second_box" min="1">
<button onclick="next_page()" id="next_page_button">Calculate</button>
<br>
<br>
</form>
<button onclick="return_to_homepage()" id="homepage_button">Return to Homepage</button>
</center>
<script>
function next_page() {
var tri_side1 = document.forms["the_form"]["first_box"].value;
var tri_side2 = document.forms["the_form"]["second_box"].value;
var hypotenuse = Math.sqrt(tri_side1 * tri_side1 + tri_side2 * tri_side2);
var angle_alpha = Math.atan(tri_side1 / tri_side2) * (180 / Math.PI);
var angle_beta = Math.atan(tri_side2 / tri_side1) * (180 / Math.PI);
}
</script>
</body>
</html>
Here, new variables are declared in JavaScript to read the HTML form data by using "document.forms___.value", where ___ is a placeholder to insert the name of the form's id and its label's name. Each form has its own id, and every label or textbox has its own name. Both the id and name are needed to read each individual textbox value for "document.forms___.value" to work. By retrieving two values, either the sides or angles can be calculated by using the Pythagorean Theorem or trigonometric identities.
Depending what values were submitted for either the sides or angles, can result in an error or an illogical solution, therefore, if and else statements were implemented to forward to an error page if an incorrect result occurs. The code "localStorage.setItem()" is also used to send the calculated values onto the next directed webpage. The calculated values are displayed on the right triangle image. Another HTML button and <script> tags is inserted onto the page, if the user wants to return to the homepage. The buttons are styled by modifying the button's id in the <style> tags.
<html>
<title> </title>
<head>
</head>
<body>
<center>
<form id="the_form" action="" method="GET">
<label for="side1"> Side 1: </label>
<input type="number" name="first_box" min="1">
<br>
<br>
<label for="side2"> Side 2: </label>
<input type="number" name="second_box" min="1">
<button onclick="next_page()" id="next_page_button">Calculate</button>
<br>
<br>
</form>
<button onclick="return_to_homepage()" id="homepage_button">Return to Homepage</button>
</center>
<script>
function next_page() {
var tri_side1 = document.forms["the_form"]["first_box"].value;
var tri_side2 = document.forms["the_form"]["second_box"].value;
var hypotenuse = Math.sqrt(tri_side1 * tri_side1 + tri_side2 * tri_side2);
var angle_alpha = Math.atan(tri_side1 / tri_side2) * (180 / Math.PI);
var angle_beta = Math.atan(tri_side2 / tri_side1) * (180 / Math.PI);
if ( tri_side1 == "" || tri_side1 == null || tri_side2 == "" || tri_side2 == null) {
alert("There are empty text boxes. Please submit two numbers.")
}
else {
document.getElementById("the_form").action = "get_values.html";
localStorage.setItem('side1_value', tri_side1);
localStorage.setItem('side2_value', tri_side2);
localStorage.setItem('hypotenuse_value', hypotenuse);
localStorage.setItem('alpha_value', angle_alpha);
localStorage.setItem('beta_value', angle_beta);
}
}
</script>
<script>
function return_to_homepage() {
location.replace("homepage.html")
}
</script>
</body>
</html>
Below is the complete source code for all the webpages:
enter_side1_side2.html
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 50%;
}
.alpha_letter {
position: absolute;
margin-left: 105px;
margin-top: -60px;
width: 50%;
font-size: 18px;
color: green;
}
.beta_letter {
position: absolute;
margin-left: -90px;
margin-top: -307px;
width: 50%;
font-size: 18px;
color: green;
}
.letter_a_and_side1 {
position: absolute;
margin-left: -170px;
margin-top: -200px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_b_and_side2 {
position: absolute;
margin-left: 10px;
margin-top: -10px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_c_and_hypotenuse {
position: absolute;
margin-left: 130px;
margin-top: -220px;
width: 50%;
font-size: 24px;
color: green;
}
#the_form {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#next_page_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
#homepage_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
</style>
</head>
<body>
<center> <h1>Pythagorean Theorem Calculator</h1> </center>
<center>
<div class="container">
<img src="right_triangle.png" width="350" height="350">
<div class="alpha_letter">α</div>
<div class="beta_letter">β</div>
<div class="letter_a_and_side1"> a <br> (Side 1) </div>
<div class="letter_b_and_side2"> b <br> (Side 2) </div>
<div class="letter_c_and_hypotenuse"> c <br> (Hypotenuse) </div>
</div>
</center>
<br>
<br>
<br>
<center> <h2>Enter Both Side Values Below:</h2> </center>
<center>
<form id="the_form" action="" method="GET">
<label for="side1"> Side 1: </label>
<input type="number" name="first_box" min="1">
<br>
<br>
<label for="side2"> Side 2: </label>
<input type="number" name="second_box" min="1">
<br>
<br>
<button onclick="next_page()" id="next_page_button">Calculate</button>
<br>
<br>
</form>
<button onclick="return_to_homepage()" id="homepage_button">Return to Homepage</button>
</center>
<script>
function next_page() {
var tri_side1 = document.forms["the_form"]["first_box"].value;
var tri_side2 = document.forms["the_form"]["second_box"].value;
var hypotenuse = Math.sqrt(tri_side1 * tri_side1 + tri_side2 * tri_side2);
var angle_alpha = Math.atan(tri_side1 / tri_side2) * (180 / Math.PI);
var angle_beta = Math.atan(tri_side2 / tri_side1) * (180 / Math.PI);
if ( tri_side1 == "" || tri_side1 == null || tri_side2 == "" || tri_side2 == null) {
alert("There are empty text boxes. Please submit two numbers.")
}
else {
document.getElementById("the_form").action = "get_values.html";
localStorage.setItem('side1_value', tri_side1);
localStorage.setItem('side2_value', tri_side2);
localStorage.setItem('hypotenuse_value', hypotenuse);
localStorage.setItem('alpha_value', angle_alpha);
localStorage.setItem('beta_value', angle_beta);
}
}
</script>
<script>
function return_to_homepage() {
location.replace("homepage.html")
}
</script>
</body>
</html>
enter_side1_hypo.html
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 50%;
}
.alpha_letter {
position: absolute;
margin-left: 105px;
margin-top: -60px;
width: 50%;
font-size: 18px;
color: green;
}
.beta_letter {
position: absolute;
margin-left: -90px;
margin-top: -307px;
width: 50%;
font-size: 18px;
color: green;
}
.letter_a_and_side1 {
position: absolute;
margin-left: -170px;
margin-top: -200px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_b_and_side2 {
position: absolute;
margin-left: 10px;
margin-top: -10px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_c_and_hypotenuse {
position: absolute;
margin-left: 130px;
margin-top: -220px;
width: 50%;
font-size: 24px;
color: green;
}
#the_form {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#homepage_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
#calculate_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
</style>
</head>
<body>
<center> <h1>Pythagorean Theorem Calculator</h1> </center>
<center>
<div class="container">
<img src="right_triangle.png" width="350" height="350">
<div class="alpha_letter">α</div>
<div class="beta_letter">β</div>
<div class="letter_a_and_side1"> a <br> (Side 1) </div>
<div class="letter_b_and_side2"> b <br> (Side 2) </div>
<div class="letter_c_and_hypotenuse"> c <br> (Hypotenuse) </div>
</div>
</center>
<br>
<br>
<br>
<center> <h2>Enter the Side and Hypotenuse Values below:</h2> </center>
<center>
<form id="the_form" action="" method="GET">
<label for="side"> Side 1: </label>
<input type="number" name="first_box" min="1">
<br>
<br>
<label for="hypotenuse"> Hypotenuse: </label>
<input type="number" name="second_box" min="1">
<br>
<br>
<button onclick="next_page()" id="calculate_button">Calculate</button>
<br>
<br>
</form>
<button onclick="return_to_homepage()" id="homepage_button">Return to Homepage</button>
</center>
<script>
function next_page() {
var tri_side1 = document.forms["the_form"]["first_box"].value;
var hypotenuse = document.forms["the_form"]["second_box"].value;
var angle_alpha = Math.asin(tri_side1 / hypotenuse) * (180 / Math.PI);
var angle_beta = Math.acos(tri_side1 / hypotenuse) * (180 / Math.PI);
if ( tri_side1 == "" || tri_side1 == null || hypotenuse == "" || hypotenuse == null) {
alert("There are empty text boxes. Please submit two numbers.")
}
else {
if (Number(hypotenuse) > Number(tri_side1)) {
var tri_side2 = Math.sqrt(hypotenuse * hypotenuse - tri_side1 * tri_side1);
document.getElementById("the_form").action = "get_values.html";
localStorage.setItem('side1_value', tri_side1);
localStorage.setItem('side2_value', tri_side2);
localStorage.setItem('hypotenuse_value', hypotenuse);
localStorage.setItem('alpha_value', angle_alpha);
localStorage.setItem('beta_value', angle_beta);
}
else {
document.getElementById("the_form").action = "not_valid_hypotenuse.html";
}
}
}
</script>
<script>
function return_to_homepage() {
location.replace("homepage.html")
}
</script>
</body>
</html>
enter_side2_hypo.html
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 50%;
}
.alpha_letter {
position: absolute;
margin-left: 105px;
margin-top: -60px;
width: 50%;
font-size: 18px;
color: green;
}
.beta_letter {
position: absolute;
margin-left: -90px;
margin-top: -307px;
width: 50%;
font-size: 18px;
color: green;
}
.letter_a_and_side1 {
position: absolute;
margin-left: -170px;
margin-top: -200px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_b_and_side2 {
position: absolute;
margin-left: 10px;
margin-top: -10px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_c_and_hypotenuse {
position: absolute;
margin-left: 130px;
margin-top: -220px;
width: 50%;
font-size: 24px;
color: green;
}
#the_form {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#homepage_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
#calculate_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
</style>
</head>
<body>
<center> <h1>Pythagorean Theorem Calculator</h1> </center>
<center>
<div class="container">
<img src="right_triangle.png" width="350" height="350">
<div class="alpha_letter">α</div>
<div class="beta_letter">β</div>
<div class="letter_a_and_side1"> a <br> (Side 1) </div>
<div class="letter_b_and_side2"> b <br> (Side 2) </div>
<div class="letter_c_and_hypotenuse"> c <br> (Hypotenuse) </div>
</div>
</center>
<br>
<br>
<br>
<center> <h2>Enter the Side and Hypotenuse Values below:</h2> </center>
<center>
<form id="the_form" action="" method="GET">
<label for="side"> Side 2: </label>
<input type="number" name="first_box" min="1">
<br>
<br>
<label for="hypotenuse"> Hypotenuse: </label>
<input type="number" name="second_box" min="1">
<br>
<br>
<button onclick="next_page()" id="calculate_button">Calculate</button>
<br>
<br>
</form>
<button onclick="return_to_homepage()" id="homepage_button">Return to Homepage</button>
</center>
<script>
function next_page() {
var tri_side2 = document.forms["the_form"]["first_box"].value;
var hypotenuse = document.forms["the_form"]["second_box"].value;
var angle_alpha = Math.acos(tri_side2 / hypotenuse) * (180 / Math.PI);
var angle_beta = Math.asin(tri_side2 / hypotenuse) * (180 / Math.PI);
if ( tri_side2 == "" || tri_side2 == null || hypotenuse == "" || hypotenuse == null) {
alert("There are empty text boxes. Please submit two numbers.")
}
else {
if (Number(hypotenuse) > Number(tri_side2)) {
var tri_side1 = Math.sqrt(hypotenuse * hypotenuse - tri_side2 * tri_side2);
document.getElementById("the_form").action = "get_values.html";
localStorage.setItem('side1_value', tri_side1);
localStorage.setItem('side2_value', tri_side2);
localStorage.setItem('hypotenuse_value', hypotenuse);
localStorage.setItem('alpha_value', angle_alpha);
localStorage.setItem('beta_value', angle_beta);
}
else {
document.getElementById("the_form").action = "not_valid_hypotenuse.html";
}
}
}
</script>
<script>
function return_to_homepage() {
location.replace("homepage.html")
}
</script>
</body>
</html>
enter_side1_α.html
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 50%;
}
.alpha_letter {
position: absolute;
margin-left: 105px;
margin-top: -60px;
width: 50%;
font-size: 18px;
color: green;
}
.beta_letter {
position: absolute;
margin-left: -90px;
margin-top: -307px;
width: 50%;
font-size: 18px;
color: green;
}
.letter_a_and_side1 {
position: absolute;
margin-left: -170px;
margin-top: -200px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_b_and_side2 {
position: absolute;
margin-left: 10px;
margin-top: -10px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_c_and_hypotenuse {
position: absolute;
margin-left: 130px;
margin-top: -220px;
width: 50%;
font-size: 24px;
color: green;
}
#the_form {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#homepage_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
#calculate_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
</style>
</head>
<body>
<center> <h1>Pythagorean Theorem Calculator</h1> </center>
<center>
<div class="container">
<img src="right_triangle.png" width="350" height="350">
<div class="alpha_letter">α</div>
<div class="beta_letter">β</div>
<div class="letter_a_and_side1"> a <br> (Side 1) </div>
<div class="letter_b_and_side2"> b <br> (Side 2) </div>
<div class="letter_c_and_hypotenuse"> c <br> (Hypotenuse) </div>
</div>
</center>
<br>
<br>
<br>
<center> <h2>Enter the Side and α Values below:</h2> </center>
<center>
<form id="the_form" action="" method="GET">
<label for="side"> Side 1: </label>
<input type="number" name="first_box" min="1">
<br>
<br>
<label for="α_angle"> α: </label>
<input type="number" name="second_box" min="1" max="89">
<br>
<br>
<button onclick="next_page()" id="calculate_button">Calculate</button>
<br>
<br>
</form>
<button onclick="return_to_homepage()" id="homepage_button">Return to Homepage</button>
</center>
<script>
function next_page() {
var tri_side1 = document.forms["the_form"]["first_box"].value;
var angle_alpha = document.forms["the_form"]["second_box"].value;
if ( tri_side1 == "" || tri_side1 == null || angle_alpha == "" || angle_alpha == null) {
alert("There are empty text boxes. Please submit two numbers.");
}
else {
var angle_beta = 90 - angle_alpha;
angle_beta_radians = angle_beta * Math.PI/180;
var tri_side2 = tri_side1 * Math.tan(angle_beta_radians);
var hypotenuse = Math.sqrt(tri_side1 * tri_side1 + tri_side2 * tri_side2);
document.getElementById("the_form").action = "get_values.html";
localStorage.setItem('side1_value', tri_side1);
localStorage.setItem('side2_value', tri_side2);
localStorage.setItem('hypotenuse_value', hypotenuse);
localStorage.setItem('alpha_value', angle_alpha);
localStorage.setItem('beta_value', angle_beta);
}
}
</script>
<script>
function return_to_homepage() {
location.replace("homepage.html")
}
</script>
</body>
</html>
enter_side2_α.html
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 50%;
}
.alpha_letter {
position: absolute;
margin-left: 105px;
margin-top: -60px;
width: 50%;
font-size: 18px;
color: green;
}
.beta_letter {
position: absolute;
margin-left: -90px;
margin-top: -307px;
width: 50%;
font-size: 18px;
color: green;
}
.letter_a_and_side1 {
position: absolute;
margin-left: -170px;
margin-top: -200px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_b_and_side2 {
position: absolute;
margin-left: 10px;
margin-top: -10px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_c_and_hypotenuse {
position: absolute;
margin-left: 130px;
margin-top: -220px;
width: 50%;
font-size: 24px;
color: green;
}
#the_form {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#homepage_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
#calculate_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
</style>
</head>
<body>
<center> <h1>Pythagorean Theorem Calculator</h1> </center>
<center>
<div class="container">
<img src="right_triangle.png" width="350" height="350">
<div class="alpha_letter">α</div>
<div class="beta_letter">β</div>
<div class="letter_a_and_side1"> a <br> (Side 1) </div>
<div class="letter_b_and_side2"> b <br> (Side 2) </div>
<div class="letter_c_and_hypotenuse"> c <br> (Hypotenuse) </div>
</div>
</center>
<br>
<br>
<br>
<center> <h2>Enter the Side and α Values below:</h2> </center>
<center>
<form id="the_form" action="" method="GET">
<label for="side"> Side 2: </label>
<input type="number" name="first_box" min="1">
<br>
<br>
<label for="α_angle"> α: </label>
<input type="number" name="second_box" min="1" max="89">
<br>
<br>
<button onclick="next_page()" id="calculate_button">Calculate</button>
<br>
<br>
</form>
<button onclick="return_to_homepage()" id="homepage_button">Return to Homepage</button>
</center>
<script>
function next_page() {
var tri_side2 = document.forms["the_form"]["first_box"].value;
var angle_alpha = document.forms["the_form"]["second_box"].value;
if ( tri_side2 == "" || tri_side2 == null || angle_alpha == "" || angle_alpha == null) {
alert("There are empty text boxes. Please submit two numbers.");
}
else {
var angle_beta = 90 - angle_alpha;
angle_alpha_radians = angle_alpha * Math.PI/180;
var tri_side1 = tri_side2 * Math.tan(angle_alpha_radians);
var hypotenuse = Math.sqrt(tri_side1 * tri_side1 + tri_side2 * tri_side2);
document.getElementById("the_form").action = "get_values.html";
localStorage.setItem('side1_value', tri_side1);
localStorage.setItem('side2_value', tri_side2);
localStorage.setItem('hypotenuse_value', hypotenuse);
localStorage.setItem('alpha_value', angle_alpha);
localStorage.setItem('beta_value', angle_beta);
}
}
</script>
<script>
function return_to_homepage() {
location.replace("homepage.html")
}
</script>
</body>
</html>
enter_hypo_α.html
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 50%;
}
.alpha_letter {
position: absolute;
margin-left: 105px;
margin-top: -60px;
width: 50%;
font-size: 18px;
color: green;
}
.beta_letter {
position: absolute;
margin-left: -90px;
margin-top: -307px;
width: 50%;
font-size: 18px;
color: green;
}
.letter_a_and_side1 {
position: absolute;
margin-left: -170px;
margin-top: -200px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_b_and_side2 {
position: absolute;
margin-left: 10px;
margin-top: -10px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_c_and_hypotenuse {
position: absolute;
margin-left: 130px;
margin-top: -220px;
width: 50%;
font-size: 24px;
color: green;
}
#the_form {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#homepage_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
#calculate_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
</style>
</head>
<body>
<center> <h1>Pythagorean Theorem Calculator</h1> </center>
<center>
<div class="container">
<img src="right_triangle.png" width="350" height="350">
<div class="alpha_letter">α</div>
<div class="beta_letter">β</div>
<div class="letter_a_and_side1"> a <br> (Side 1) </div>
<div class="letter_b_and_side2"> b <br> (Side 2) </div>
<div class="letter_c_and_hypotenuse"> c <br> (Hypotenuse) </div>
</div>
</center>
<br>
<br>
<br>
<center> <h2>Enter the Hypotenuse and α Values below:</h2> </center>
<center>
<form id="the_form" action="" method="GET">
<label for="hypotenuse"> Hypotenuse: </label>
<input type="number" name="first_box" min="1">
<br>
<br>
<label for="α_angle"> α: </label>
<input type="number" name="second_box" min="1" max="89">
<br>
<br>
<button onclick="next_page()" id="calculate_button">Calculate</button>
<br>
<br>
</form>
<button onclick="return_to_homepage()" id="homepage_button">Return to Homepage</button>
</center>
<script>
function next_page()
{
var hypotenuse = document.forms["the_form"]["first_box"].value;
var angle_alpha = document.forms["the_form"]["second_box"].value;
var angle_beta = 90 - angle_alpha;
angle_alpha_radians = angle_alpha * Math.PI / 180;
if ( hypotenuse == "" || hypotenuse == null || angle_alpha == "" || angle_alpha == null)
{
alert("There are empty text boxes. Please submit two numbers.")
}
else
{
var tri_side1 = Math.sin(angle_alpha_radians) * hypotenuse;
var tri_side2 = Math.sqrt(hypotenuse * hypotenuse - tri_side1 * tri_side1);
document.getElementById("the_form").action = "get_values.html";
localStorage.setItem('side1_value', tri_side1);
localStorage.setItem('side2_value', tri_side2);
localStorage.setItem('hypotenuse_value', hypotenuse);
localStorage.setItem('alpha_value', angle_alpha);
localStorage.setItem('beta_value', angle_beta);
}
}
</script>
<script>
function return_to_homepage() {
location.replace("homepage.html")
}
</script>
</body>
</html>
enter_side1_β.html
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 50%;
}
.alpha_letter {
position: absolute;
margin-left: 105px;
margin-top: -60px;
width: 50%;
font-size: 18px;
color: green;
}
.beta_letter {
position: absolute;
margin-left: -90px;
margin-top: -307px;
width: 50%;
font-size: 18px;
color: green;
}
.letter_a_and_side1 {
position: absolute;
margin-left: -170px;
margin-top: -200px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_b_and_side2 {
position: absolute;
margin-left: 10px;
margin-top: -10px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_c_and_hypotenuse {
position: absolute;
margin-left: 130px;
margin-top: -220px;
width: 50%;
font-size: 24px;
color: green;
}
#the_form {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#homepage_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
#calculate_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
</style>
</head>
<body>
<center> <h1>Pythagorean Theorem Calculator</h1> </center>
<center>
<div class="container">
<img src="right_triangle.png" width="350" height="350">
<div class="alpha_letter">α</div>
<div class="beta_letter">β</div>
<div class="letter_a_and_side1"> a <br> (Side 1) </div>
<div class="letter_b_and_side2"> b <br> (Side 2) </div>
<div class="letter_c_and_hypotenuse"> c <br> (Hypotenuse) </div>
</div>
</center>
<br>
<br>
<br>
<center> <h2>Enter the Side and β Values below:</h2> </center>
<center>
<form id="the_form" action="" method="GET">
<label for="side"> Side 1: </label>
<input type="number" name="first_box" min="1">
<br>
<br>
<label for="α_angle"> β: </label>
<input type="number" name="second_box" min="1" max="89">
<br>
<br>
<button onclick="next_page()" id="calculate_button">Calculate</button>
<br>
<br>
</form>
<button onclick="return_to_homepage()" id="homepage_button">Return to Homepage</button>
</center>
<script>
function next_page()
{
var tri_side1 = document.forms["the_form"]["first_box"].value;
var angle_beta = document.forms["the_form"]["second_box"].value;
var angle_alpha = 90 - angle_beta;
angle_beta_radians = angle_beta * Math.PI / 180;
if ( tri_side1 == "" || tri_side1 == null || angle_beta == "" || angle_beta == null)
{
alert("There are empty text boxes. Please submit two numbers.")
}
else
{
var tri_side2 = Math.tan(angle_beta_radians) * tri_side1;
var hypotenuse = Math.sqrt(tri_side1 * tri_side1 + tri_side2 * tri_side2);
document.getElementById("the_form").action = "get_values.html";
localStorage.setItem('side1_value', tri_side1);
localStorage.setItem('side2_value', tri_side2);
localStorage.setItem('hypotenuse_value', hypotenuse);
localStorage.setItem('alpha_value', angle_alpha);
localStorage.setItem('beta_value', angle_beta);
}
}
</script>
<script>
function return_to_homepage() {
location.replace("homepage.html")
}
</script>
</body>
</html>
enter_side2_β.html
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 50%;
}
.alpha_letter {
position: absolute;
margin-left: 105px;
margin-top: -60px;
width: 50%;
font-size: 18px;
color: green;
}
.beta_letter {
position: absolute;
margin-left: -90px;
margin-top: -307px;
width: 50%;
font-size: 18px;
color: green;
}
.letter_a_and_side1 {
position: absolute;
margin-left: -170px;
margin-top: -200px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_b_and_side2 {
position: absolute;
margin-left: 10px;
margin-top: -10px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_c_and_hypotenuse {
position: absolute;
margin-left: 130px;
margin-top: -220px;
width: 50%;
font-size: 24px;
color: green;
}
#the_form {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#homepage_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
#calculate_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
</style>
</head>
<body>
<center> <h1>Pythagorean Theorem Calculator</h1> </center>
<center>
<div class="container">
<img src="right_triangle.png" width="350" height="350">
<div class="alpha_letter">α</div>
<div class="beta_letter">β</div>
<div class="letter_a_and_side1"> a <br> (Side 1) </div>
<div class="letter_b_and_side2"> b <br> (Side 2) </div>
<div class="letter_c_and_hypotenuse"> c <br> (Hypotenuse) </div>
</div>
</center>
<br>
<br>
<br>
<center> <h2>Enter the Side and β Values below:</h2> </center>
<center>
<form id="the_form" action="" method="GET">
<label for="side"> Side 2: </label>
<input type="number" name="first_box" min="1">
<br>
<br>
<label for="β_angle"> β: </label>
<input type="number" name="second_box" min="1" max="89">
<br>
<br>
<button onclick="next_page()" id="calculate_button">Calculate</button>
<br>
<br>
</form>
<button onclick="return_to_homepage()" id="homepage_button">Return to Homepage</button>
</center>
<script>
function next_page()
{
var tri_side2 = document.forms["the_form"]["first_box"].value;
var angle_beta = document.forms["the_form"]["second_box"].value;
var angle_alpha = 90 - angle_beta;
angle_alpha_radians = angle_alpha * Math.PI / 180;
if ( tri_side2 == "" || tri_side2 == null || angle_beta == "" || angle_beta == null)
{
alert("There are empty text boxes. Please submit two numbers.")
}
else
{
var tri_side1 = Math.tan(angle_alpha_radians) * tri_side2;
var hypotenuse = Math.sqrt(tri_side1 * tri_side1 + tri_side2 * tri_side2);
document.getElementById("the_form").action = "get_values.html";
localStorage.setItem('side1_value', tri_side1);
localStorage.setItem('side2_value', tri_side2);
localStorage.setItem('hypotenuse_value', hypotenuse);
localStorage.setItem('alpha_value', angle_alpha);
localStorage.setItem('beta_value', angle_beta);
}
}
</script>
<script>
function return_to_homepage() {
location.replace("homepage.html")
}
</script>
</body>
</html>
enter_hypo_β.html
<html>
<title> Pythagorean Theorem Calculator </title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 50%;
}
.alpha_letter {
position: absolute;
margin-left: 105px;
margin-top: -60px;
width: 50%;
font-size: 18px;
color: green;
}
.beta_letter {
position: absolute;
margin-left: -90px;
margin-top: -307px;
width: 50%;
font-size: 18px;
color: green;
}
.letter_a_and_side1 {
position: absolute;
margin-left: -170px;
margin-top: -200px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_b_and_side2 {
position: absolute;
margin-left: 10px;
margin-top: -10px;
width: 50%;
font-size: 24px;
color: green;
}
.letter_c_and_hypotenuse {
position: absolute;
margin-left: 130px;
margin-top: -220px;
width: 50%;
font-size: 24px;
color: green;
}
#the_form {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#homepage_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
#calculate_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
</style>
</head>
<body>
<center> <h1>Pythagorean Theorem Calculator</h1> </center>
<center>
<div class="container">
<img src="right_triangle.png" width="350" height="350">
<div class="alpha_letter">α</div>
<div class="beta_letter">β</div>
<div class="letter_a_and_side1"> a <br> (Side 1) </div>
<div class="letter_b_and_side2"> b <br> (Side 2) </div>
<div class="letter_c_and_hypotenuse"> c <br> (Hypotenuse) </div>
</div>
</center>
<br>
<br>
<br>
<center> <h2>Enter the Hypotenuse and β Values below:</h2> </center>
<center>
<form id="the_form" action="" method="GET">
<label for="hypotenuse"> Hypotenuse: </label>
<input type="number" name="first_box" min="1">
<br>
<br>
<label for="β_angle"> β: </label>
<input type="number" name="second_box" min="1" max="89">
<br>
<br>
<button onclick="next_page()" id="calculate_button">Calculate</button>
<br>
<br>
</form>
<button onclick="return_to_homepage()" id="homepage_button">Return to Homepage</button>
</center>
<script>
function next_page()
{
var hypotenuse = document.forms["the_form"]["first_box"].value;
var angle_beta = document.forms["the_form"]["second_box"].value;
var angle_alpha = 90 - angle_beta;
angle_beta_radians = angle_beta * Math.PI / 180;
if ( hypotenuse == "" || hypotenuse == null || angle_beta == "" || angle_beta == null)
{
alert("There are empty text boxes. Please submit two numbers.")
}
else
{
var tri_side1 = Math.cos(angle_beta_radians) * hypotenuse;
var tri_side2 = Math.sin(angle_beta_radians) * hypotenuse;
document.getElementById("the_form").action = "get_values.html";
localStorage.setItem('side1_value', tri_side1);
localStorage.setItem('side2_value', tri_side2);
localStorage.setItem('hypotenuse_value', hypotenuse);
localStorage.setItem('alpha_value', angle_alpha);
localStorage.setItem('beta_value', angle_beta);
}
}
</script>
<script>
function return_to_homepage() {
location.replace("homepage.html")
}
</script>
</body>
</html>
Below are webpages that can show up depending on the error:
no_values_inputted.html
<html>
<title>Pythagorean Theorem Calculator</title>
<head>
</head>
<body>
<center>
<h1> Pythagorean Theorem Calculator </h1>
<p> No values were inserted or there was an invalid input. </p>
<button onclick="return_to_homepage()">Return to Homepage</button>
</center>
<script>
function return_to_homepage() {
location.replace("homepage.html")
}
</script>
</body>
</html>
not_valid_hypotenuse.html
<html>
<title>Pythagorean Theorem Calculator</title>
<head>
<style>
body {
background-color: tan;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
p {
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#homepage_button {
color: white;
background-color: gray;
padding: 8px 8px;
}
</style>
</head>
<body>
<center>
<h1> Pythagorean Theorem Calculator </h1>
<p> Invalid input. The hypotenuse value cannot be equal to or less than the triangle's two other sides. </p>
<button onclick="return_to_homepage()" id="homepage_button">Return to Homepage</button>
</center>
<script>
function return_to_homepage() {
location.replace("homepage.html")
}
</script>
</body>
</html>
Sources
https://www.mathsisfun.com/pythagoras.html (1)
https://www.mathsisfun.com/algebra/trigonometric-identities.html (2)