Triángulo recto - Calculadora de área en línea
Dadas tres dimensiones: longitudes de 2 patas y longitud de hipotenusa, respectivamente, calcule el área.
Si las dimensiones no son posibles para formar un triángulo recto, alerta.
Contenido
- Pruébalo
- Cómo funciona
- Referencias externas
Pruébalo
El sitio web consta de 5 archivos: index.html, result.php, style.css, resultados de la hoja de resultados y script.js.
Descárguelos aquí.
En su directorio raíz, cree una carpeta. Nómbrelo "Triángulo correcto". Guarde esos archivos en esa carpeta.
Luego, inicie un servidor virtual. En su navegador web, ingrese esta dirección: Localhost/Right Triangle/Index.html
(Suponiendo que está utilizando XAMPP en Windows)
Ahora está en la página de entrada.
En la página de entrada, verá el título "¡Triángulo correcto!" En la parte superior, tres círculos, un botón de envío,
y un triange azul en la parte inferior de la página. Esos 3 círculos en realidad son campos de entrada.
Intenta hacer las siguientes cosas:
- Pase el cursor de su mouse sobre uno de los círculos
- Casta el cursor de tu mouse sobre el botón Enviar
- Casta tu cursor de mouse cerca del triángulo
- Deje uno o todos los campos vacíos y luego presione el botón Enviar
- No deje el campo vacío pero ingrese un carácter alfabético a uno de los campos y luego presione el envío
Una vez que haya terminado con eso, intente ingresar números a esos 3 círculos y presione el botón Enviar.
Son la longitud de la pierna, la pierna y la hipotenusa, respectivamente.
Debería redirigirlo a la página de resultados. Si ingresa 3, 4 y 5 respectivamente, debe obtener
Algo como "Área: 6". Si ingresa 10, 9 y 4, debe obtener algo como "Dimensiones dadas
no son apropiados para un triángulo recto ".
Cómo funciona
Cuando pasa el cursor de su ratón cerca del triángulo, el triángulo gira y se mueve hacia arriba, su color se vuelve rojo.
Esto se hace por su estilo en un selector CSS con una clase de pseudo.
#Triangle: Hover {
borde: sólido 65px;
color de borde: transparente transparente #F12F2F transparente;
margen-top: 0px;
transformación: rotar (180 grados) escalax (-1);
}
Observe la última
transform: rotate(180deg) scaleX(-1);
lo que hace que el triángulo gire en el flotador.
A continuación, consulte el archivo script.js. Hay 2 declaraciones if en él, lo que indica si las entradas no son válidas.
Comprueba si el usuario tiene entrada algo comparándolo con
null
. Recuerde que NULL es un tipo de datos
que básicamente significa "nada".
También tenemos la función
isNan
para verificar si las entradas son numéricas. Nan representa
a N ot
A n Umber.
Si ingresa entradas válidas, el código en aquellos si las declaraciones no se ejecutarán. Javascript crea 3 cookies
con los nombres A, B, C respectivamente, que almacenan las entradas que envió anteriormente. Luego te redirige al
página de resultados, que es resultado.php
En la página de resultados, PHP hace los matemáticos. Primero, llama a los valores de las cookies creadas por JavaScript anteriormente,
y almacene esos valores en tres variables, a saber,
$a
,
$b
,
$c
.
Luego usa el teorema de las Pitágoras para verificar si esos valores (que son las dimensiones del triángulo) pueden compensar un
Triángulo derecho. Si pueden, la página de resultados muestra el texto "área:" con el área del triángulo junto.
Si no pueden, la página de resultados muestra el texto "Las dimensiones dadas no son adecuadas para un triángulo recto".
Referencias externas
- Servidor virtual
- Manejo de galletas con JavaScript
- Php's $ _cookie
- Teorema de Pitágoras