cursoPracticoJavaScriptPlatzi/figuras.html at main · Nerfe5/cursoPracticoJavaScriptPlatzi · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Figura geométricas | Curso Práctico de JS</title>
</head>
<body>
    <header>
    <h1>
        Figuras geométricas
    </h1>
    <p></p>
</header>
<section>
    <h2>Calcula el área y perímetro de un cuadrado </h2>
    <form action="">
        <label for="InputCuadrado">
            Escribe cuánto mide cada lado de tú cuadrado
        </label> <!--*EL atributo for nos sirve para tener la relación entre el label y el input y debe de ser idéntico que el id-->
        <input id="InputCuadrado" type="number"> <!--*EL atributo id es un identificador unico para dos cosas: 1.- conectar el label con el for 2.- Al dar click se conecta con el for-->
        <button type="button" onclick= calcularPerimetroCuadrado()> <!--*se llama a la función-->
                Calcular el perímetro
        </button>
        <button  type="button" onclick=calcularAreaCuadrado()>
                Calcular el área
        </button>
    </form>
</section>
<section>
<form>

<h2>Calcula el perímetro de un Triangulo </h2>
<form >

    <label for="Input1">
        Escribe cuánto miden el lado 1
    </label>
    <input id="Input1" type="number">
    <br>

    <label for="Input2">
        Escribe cuánto miden el lado 2
    </label>
    <input id="Input2" type="number">
    <br>

    <label for="Base">
        Escribe cuánto miden la base
    </label>
    <input id="Base" type="number">

    <button type="button" onclick= calcularPerimetroTriangulo()>
            Calcular el perímetro
    </button>
</form>
</section>

<section>
 <h2>Calcula el área del Triánglo</h2>

 <label for="baseTriangulo">
    Escribe la base del triángulo
 </label>
 <input id="baseTriangulo" type="number">
 <br>
    <label for="altura">

        Escribe la alatura del triángulo
    </label>
    <input id="altura" type="number">
    <button type="button" onclick=calcularAreaTriangulo() >
        Calcula el área del triangulo
    </button>
</section>

<section>
    <h2>Calcula el perimetro del circulo</h2>
    <label for="radio">
        Escribe cuánto mide el radio
    </label>
    <input id= "radio" type="number">
    <button type="button" onclick= calcularPerimetroCirculo()>
        Calcular el perimetro del circulo</button>
</section>

<section>
    <h2>Calcula el área del circulo</h2>
    <label for="ratio">
        Escribe cuánto mide el radio
    </label>
    <input id= "ratio" type="number">
    <button type="button" onclick= calcularAreaCirculo()>
        Calcular el área del circulo</button>

    </section>

    <section>
        <h2>Calcula la altura del triángulo isósceles</h2>
        <label for="cateto_a">
            Escribe el lado a
        </label>
        <input id="cateto_a" type="number">
        <br>
        <label for="cateto_b">
            Escribe le lado b
        </label>
        <input id="cateto_b" type="number">
        <br>
        <label for="cateto_c">
            Escribe la base
        </label>
        <input id="cateto_c"type="number">
        <button type="button" onclick= calculaAlturaIsosceles() >
            Calcular la altura del Isósceles
        </button>
    </section>
<script src="./funcionesFiguras.js"></script>

</body>
</html>