right triangle calculator

Right Triangle - Online Area Calculator

Given three dimensions - lengths of 2 legs and length of hypotenuse, respectively, calculate the area.
If the dimensions are not possible to form a right triangle, alert.

Contents

1. Try it out
2. How it works
3. External References

---

Try it out

The website consists of 5 files: index.html, result.php, style.css, resultsheet.css, and script.js.
Download them here.
Under your root directory, create a folder. Name it "Right Triangle". Save those files in that folder.
Then, start a virtual server. On your web browser, enter this address: localhost/Right Triangle/index.html
(Assuming that you are using Xampp on Windows)
You are now on the input page.
On the input page, you will see the title "Right Triangle!" at the top, three circles, a submit button,
and a blue triange at the bottom of the page. Those 3 circles are actually input fields.
Try to do the following things:

• Hover your mouse cursor over one of the circles
• Hover your mouse cursor over the submit button
• Hover your mouse cursor near the triangle
• Leave one or all of the fields empty and then hit the submit button
• Leave no field empty but input an alphabetical character to one of the fields then hit submit

Once you're done with that, try to enter numbers to those 3 circles and hit the submit button.
They are the lengths of leg, leg, and hypotenuse, respectively.
It should redirect you to the result page. If you input 3, 4, and 5 respectively, you should get
something like "Area: 6". If you input 10, 9, and 4, you should get something like "Given dimensions
are not proper for a right triangle".

---

How it works

When you hover your mouse cursor near the triangle, the triangle rotates and moves up, its color turns to red.
This is done by its styling in a CSS selector with a pseudo class.

#triangle:hover {
    border: solid 65px;
    border-color: transparent transparent #F12F2F transparent;
    margin-top: 0px;
    transform: rotate(180deg) scaleX(-1);
}

Notice the last line transform: rotate(180deg) scaleX(-1); which makes the triangle rotates on hover.
Next, check the script.js file. There are 2 if statements in it, which tells if the inputs are invalid.
It checks if the user has input something by comparing it to null. Recall that null is a data type
which basically means "nothing."
We also have the isNan function to check if the inputs are numeric. NaN stands for Not a Number.
If you enter valid inputs, the code in those if statements won't get executed. JavaScript then creates 3 cookies
with the names a, b, c respectively, that store the inputs you submitted earlier. It then redirects you to the
result page, which is result.php
On the result page, PHP does the math. First, it calls the values of cookies which were created by JavaScript earlier,
and store those values in three variables, namely $a, $b, $c.
It then uses the Pythagoras's theorem to check if those values (which are the triangle's dimensions) can make up a
right triangle. If they can, the result page displays the text "Area: " with the triangle's area alongside.
If they cannot, the result page displays the text "Given dimensions are not proper for a right triangle".

---

External References

1. Virtual Server
2. Cookies handling with JavaScript
3. PHP's $_COOKIE
4. Pythagoras's theorem