No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso Práctico de JavaScript

Curso Práctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Interactuando con JavaScript desde HTML

8/24
Recursos

Aportes 472

Preguntas 59

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Implemetando css + html + js + reponsive

Yo intenté hacer un tipo de asistente matematico, le iré agregando mas funcionalidades a medida avancemos con los demas talleres del curso 😅

Por ahora comento captura, luego lo subo a guthub y comparto el enlace :3
.

Así va quedando el ejercicio, le falta unos detallitos de transiciones.

VERSIÓN MOBILE

VERSIÓN DESKTOP

Llevo unos 3 meses en Platzi y ver todo este crecimiento personal me llena de orgullo 🥳. Quise inventar un poco en la parte visual, hice el diseño con Figma y luego procedi a desarrollar. Si desean ver la pagina en vivo hagan clic aqui. y el enlace al repositorio.


Asi está quedando mi primer taller, me falta validar que no este el input vacío al darle al botón… y me falta el reto de la proxima clase… pero alli va…

Quiero hacer una aclaración que puede ser de gran ayuda para todos:

  • Recuerden que todo lo que entra en un formulario es tipo string, el input type=“number” lo que hace es que solamente reciba caracteres tipo número. Pero no significa que lo que entra JS lo tome como Number en las funciones.

  • Para ello se debe hacer coerción de lo que queda en los values o hacer la coerción en las funciones mismas al definirlas.

  • Si esto no se hace, el resultado va a ser muy diferente a lo esperado. Por ejemplo la función de perimetro de triángulo. Si ponemos que estos valores trianglePerimeter(5, 5, 5); al llamar la función el resultado será 555

function trianglePerimeter(side1, side2, base) {
    return (side1 + side2 + base);
}
trianglePerimeter(5, 5, 5);
// Output 555
  • Si hacemos la coerción quedaría así
function trianglePerimeter(side1, side2, base) {
    return (Number(side1) + Number(side2) + Number(base));
}
trianglePerimeter(5, 5, 5);
// Output 15

Espero les sirva este dato.

Saludos

//codigo cuadrado:
function perimetroCuadrado (lado){
    return lado * 4;
}

function areaCuadrado (lado){
    return lado * lado;
} 


//codigo triangulo:
function perimetroTriangulo (lado1,lado2,base){
    return (lado1 + lado2 + base);
}

function areaTriangulo (lado1,lado2,base){
    const sP = (lado1 + lado2 + base) / 2; 
    return Math.sqrt(sP * (sP - lado1) * (sP - lado2) * (sP - base));
} 


//codigo circulo:
const PI = Math.PI;

function diametroCirculo(radio){
    return radio * 2; 
}

function perimetroCirculo(radio){
    const diametro = diametroCirculo(radio); 
    return diametro * PI;
}

function areaCirculo(radio){
    return (radio * radio) * PI;
}


//Aqui nos conectamos con el HTML:
function calcularPerimetroCuadrado(){
    const input = document.getElementById("InputCuadrado");
    const value = input.value;
    const perimetro = perimetroCuadrado(value);
    alert("El perimetro del cuadrado es:" + perimetro);
}

function calcularAreaCuadrado(){
    const input = document.getElementById("InputCuadrado");
    const value = input.value;
    const area = areaCuadrado(value);
    alert("El area del cuadrado es:" + area);
}

function calcularPerimetroTriangulo(){
    const input1 = document.getElementById("InputTriangulo1");
    const value1 = Number(input1.value);
    const input2 = document.getElementById("InputTriangulo2");
    const value2 = Number(input2.value);
    const base = document.getElementById("InputBaseTriangulo");
    const value3 = Number(base.value);
    const perimetro = perimetroTriangulo(value1,value2,value3);
    alert("El perimetro del triangulo es: " + perimetro);
}

function calcularAreaTriangulo(){
    const input1 = document.getElementById("InputTriangulo1");
    const value1 = Number(input1.value);
    const input2 = document.getElementById("InputTriangulo2");
    const value2 = Number(input2.value);
    const base = document.getElementById("InputBaseTriangulo");
    const value3 = Number(base.value);
    const area = areaTriangulo(value1,value2,value3);
    alert("El area del triangulo es: " + area);
}

function calcularPerimetroCirculo(){
    const input = document.getElementById("InputCirculo");
    const value = input.value;
    const perimetro = perimetroCirculo(value);
    alert("El perimetro del circulo es: " + perimetro);
}
function calcularAreaCirculo(){
    const input = document.getElementById("InputCirculo");
    const value = input.value;
    const area = areaCirculo(value);
    alert("El area del circulo es: " + area);
}

Luego de un arduo trabajo así quedó mí versión:

Aquí 🎈 les dejo el link por si desean ver el código.

Para entender mas del document.getElementByID recomiendo ver este video.

https://platzi.com/clases/2193-dom/34857-leer-nodos/

Hola les comparto mi ejercicio

Se recarga la página en el minuto 5:50 porque el boton calcular esta dentro de las etiquetas form y html entiende que es el boton para enviar un formulario y por defecto los formularios hacen que se recargue la página para poder enviar su contenido

Platzinautas 💚. Si están trabajando con VSCode y desean que automáticamente les salga 2 etiquetas o más de lo que ustedes quieran. Solo deben de escribir la etiqueta + * + n(número de veces que quieren que se repita) ejemplo:
<button>*2 y se les creará con emmet abv 2 etiquetas button. ✨
Espero les sirva. 😃

¿Quieres ver cómo se veria este taller como una página web?
Acá podras verlo e interactuar con botones. tambien puedes ver el código en GitHub Aquí.

Asi quedo el mio con SASS y responsive 😃

Cambiando un poco el diseño para trabajar mas cómodo! Saludos

function perimetroTriangulo(lado1, lado2, base){

    return Number(lado1) + Number(lado2) + Number(base);
}

Para la función que calcula el triangulo… si no los concatena. A mi me funciono.

Reto:
Página: Click aquí
Código: Click aquí

Espero les guste

Si alguien tiene problemas con la suma del perímetro del triángulo. Solo parseen sus datos así: const lado = parseInt(input.value)

Implementando lo aprendido.

Despues de casi, muchas horas ya no recuerdo XD, les comparto lo que hice, basicamente es solo para calcular el area de un cuadrado, pero hice el html, css y js, con mas detalles internos, claro que una ves que aprendes a hacer uno el resto es casi lo mismo, espero que a alguien le ayude a aprender cositas y programar mas rapido! :3

https://domakedev.github.io/js-practico-taller1/

Les comparto mi código
Página
Repositorio

Así está quedando el proyecto 😁😁

Así se ve en Desktop

Y así en Mobile


Implemenando CSS
Mobile

Desktop

Hola! este estilo elimina las flechitas horribles del input!

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

Por qué en el minuto 4:57 de la clase le deja poner una E en el input tipo number???

.
E, no solo es una letra sino también un número!
.
Aquí tienes el articulo de wikipedia que lo explica
.
Tomado de https://stackoverflow.com/questions/31706611/why-does-the-html-input-with-type-number-allow-the-letter-e-to-be-entered-in/31706796#:~:text=The number input can accept,be a " - " character.

Hola este es mi proyecto para este taller, el repositorio se los dejo aquí, todas sus sugerencias son bienvenidas

Fea pero funciona xD

Hola Aquí dejo mi aporte implementando :

  • HTML

  • JavaScript

  • css

  • Bootstrap

Reto increíble!!

GitHub

https://andrescanizales2.github.io/Platzi-curso-practico-javascript/figuras.html

Este es mi ejercicio, ahora solo me falta hacer que todo el JS funciones jeje

Aqui mi aporte, esta algo basico en el css pero pienso que quedo bien
Ahora a hacer el reto de la sig clase

documen.getEl…What?

.
Tranquilo! Sí estás igual de perdido como yo con esto puedes probar hacer el curso de manipulación del dom donde te lo explicaran con lujo de detalles!💚

un pequeño truco es que si metes el input que tu quieras dentro el label ya no tienes por que agregar un for

les dejo un ejemplo:

 <label>
                Escribe cuánto mide cada lado del cuadrado
                <input id="inputCuadrado" type="number">
            </label>

Este fue mi resultado, integré también HTML y CSS

Si puede ahorrar una linea si se obtiene el value de una:
const input = document.getElementById(“inputCuadrado”).value;

Solución para el cuadrado y triangulo:

Hola, les comparto como me quedo el reto:

Aqui mi ejercicio practico.

Quiero compartir con ustedes el resultado de mi desarrollo tras usar un poco de css.

No es mucho pero es trabajo honesto :v

link de la pagina Visitar
link del repositorio Repositorio

les comparto un poco de mi avance, lo estoy tratando de hacer con efecto 3D al pasar el cursor sobre la card que genera la operación :

Así me quedo después de aplicar CSS e innerHTML en JS para mostrar en pagina el resultado

Reto completado. Como la mayoría, me demoré en la función de los triángulos, pues imprimía un error, ya que al hacer la suma de (lado + lado + base) JS entendía esto como una concatenación de 3 strings y me tocó hacer la conversión.

Anexo, quizás sea de ayuda para alguien con el mismo problema (si tienen alguna sugerencia, con gusto, la recibo)

HTML

JS

function CalcularPerimetroTriangulo(){
    const lado1 = document.getElementById("Lado1");
    const valuelado1 = lado1.value;

    const lado2 = document.getElementById("Lado2");
    const valuelado2 = lado2.value;

    const base = document.getElementById("Base");
    const valuebase = base.value;

    const perimetro = perimetroTriangulo(valuelado1, valuelado2, valuebase);
    alert(perimetro);
}

function CalcularAreaTriangulo(){
    const base = document.getElementById("Base");
    const valuebase = base.value;

    const altura = document.getElementById("Altura");
    const valuealtura = altura.value;

    const area = areaTriangulo(valuebase, valuealtura);
    alert(area);
}


function CalcularPerimetroCirculo(){
    const input = document.getElementById("InputCirculo");
    const value = input.value;

    const perimetro = perimetroCirculo(value);
    alert(perimetro);
}

function CalcularAreaCirculo(){
    const input = document.getElementById("InputCirculo");
    const value = input.value;

    const area = areaCirculo(value);
    alert(area);
}

Creo que es la primera vez que comparto algo por aca, pero me gusto el resultado.

Lo dejaré así por ahora, Luego lo mejoramos 😄

Es una versión muy beta que hice en una hora xD

Al final lo que mas me cuesta siempre es el CSS. Les dejo El link por si quieren verlo
.

No es el mas bonito, pero es trabajo honesto.
![Figuras Geometricas](

Al usar la etiqueta form y dentro de ella tener un botón que al momento de ser presionado carga la página, esto ocurre debido a que es un proceso por defecto, es decir, cada vez que se presione al boton se cargara la página.

Me gusta este ejercicio mañana lo comienzo dándole forma y estilos. ✅🚀✌🤓

Así me quedo haciendo el del triangulo y el círculo

// triangulo perimetro
function calcularPerimetroTriangulo() {
    const Lado1 = document.getElementById("InputTrianguloLado1");
    const L1 = parseFloat(Lado1.value);


    const Lado2 = document.getElementById("InputTrianguloLado2");
    const L2 = parseFloat(Lado2.value);


    const Base = document.getElementById("InputTrianguloBase");
    const B = parseFloat(Base.value);


    const perimetro = perimetroTriangulo(L1, L2, B)
    alert("El Perimetro del triangulo es de: " + perimetro + " cm");
}

// triangulo area
function calcularAreaTriangulo() {
    const Base = document.getElementById("InputTrianguloBase");
    const B = parseFloat(Base.value);


    const Altura = document.getElementById("InputTrianguloAltura");
    const A = parseFloat(Altura.value);

    const perimetro = areaTriangulo(A,B);
    alert("El area del triangulo es de: " + perimetro + " cm");
}

// circulo Diametro
function calcularDiametroCirculo() {
    const Diametro = document.getElementById("InputCirculoDiametro");
    const D = parseFloat(Diametro.value);

    const diametro = diametroCirculo(D);
    alert("El Diametro de tu circulo es de: " + diametro + " cm");
}
 //Circulo Area
function calcularAreaCirculo() {
    const Area = document.getElementById("InputCirculoArea");
    const A = parseFloat(Area.value);

    const area = Math.round(areaCirculo(A));
    alert("El Area de tu circulo es de: " + area + " cm");
}
//Circulo Circunferencia
function calcularCircunferenciaCirculo() {
    const Circunferencia = document.getElementById("InputCirculoCircunferencia");
    const C = parseFloat(Circunferencia.value);

    const circunferencia = Math.round( perimetroCirculo(C));
    alert("La Circunferencia de tu circulo es de: " + circunferencia + " cm");
}

Mi proyecto, aún falta el repsonsive, ya vendrá, pero por lo pronto: https://figuras-geometricas-db29b.web.app/

Reto hecho con TypeScript:
TS:

//* Código del cuadrado
const perimetroCuadrado = (lado: number): number => {
  return lado * 4;
}

const areaCuadrado = (lado: number): number => {
  return Math.pow(lado, 2);
}

//*Código del triángulo
const perimetroTriangulo = (lado1: number, lado2: number, base: number): number => {
  return lado1 + lado2 + base;
}

const areaTriangulo = (base: number, altura: number): number =>{
  return (base*altura) / 2;
}

//* Código del círculo
const perimetroCirculo = (radio: number): number => {
  return Math.PI * (radio * 2);
}

const areaCirculo = (radio: number): number => {
  return Math.PI * Math.pow(radio, 2);
}


//* Interactuando con HTML
function calcularPerimetroCuadrado() {
  const inputCuadrado = document.getElementById('inputCuadrado') as HTMLInputElement;
  const value = inputCuadrado?.value;
  const perimetro = perimetroCuadrado(Number.parseInt(value));
  alert(perimetro);
}

function calcularAreaCuadrado() {
  const inputCuadrado = document.getElementById('inputCuadrado') as HTMLInputElement;
  const value = inputCuadrado?.value;
  const area = areaCuadrado(Number.parseInt(value));
  alert(area);
}

function calcularPerimetroTriangulo() {
  const ladoT1 = document.getElementById('lado1T') as HTMLInputElement;
  const value1 = ladoT1?.value;

  const ladoT2 = document.getElementById('lado2T') as HTMLInputElement;
  const value2 = ladoT2?.value;

  const base = document.getElementById('baseT') as HTMLInputElement;
  const value3 = base?.value;

  const perimetro = perimetroTriangulo(Number.parseInt(value1), Number.parseInt(value2), Number.parseInt(value3));
  alert(perimetro);
}

function calcularAreaTriangulo() {
  const base = document.getElementById('baseT') as HTMLInputElement;
  const value_b = base?.value;

  const altura = document.getElementById('alturaT') as HTMLInputElement;
  const value_a = altura?.value;

  const area = areaTriangulo(Number.parseInt(value_b), Number.parseInt(value_a));
  alert(area);
}

function calcularPerimetroCirculo() {
  const radio = document.getElementById('radioC') as HTMLInputElement;
  const value = radio?.value;

  const perimetro = perimetroCirculo(Number.parseInt(value));
  alert(perimetro);
}

function calcularAreaCirculo() {
  const radio = document.getElementById('radioC') as HTMLInputElement;
  const value = radio?.value;

  const area = areaCirculo(Number.parseInt(value));
  alert(area);
}

HTML:

<!DOCTYPE html>
<html lang="es">
<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>Figuras geométricas</title>
</head>
<body>
  <header>
    <h1>Figuras geométricas</h1>
    <p>Primer taller del curso práctico de JS</p>
  </header>

  <section>
    <h2>Calcula el área y el perímetro de un cuadrado</h2>
    <form action="">
      <label for="inputCuadrado">Escribe cuánto mide cada lado de tu cuadrado: </label>
      <input type="number" name="" id="inputCuadrado">
      <button type="button" onclick="calcularPerimetroCuadrado()">Calcular perímetro</button>
      <button type="button" onclick="calcularAreaCuadrado()">Calcular área</button>

      <br>
      <br>
      <br>

      <label for="lado1T">Escribe cuánto mide el lado 1 de tu triángulo: </label>
      <input type="number" name="" id="lado1T">
      <label for="lado2T">Escribe cuánto mide el lado 2 de tu triángulo: </label>
      <input type="number" name="" id="lado2T">
      <label for="baseT">Escribe cuánto mide la base de tu triángulo: </label>
      <input type="number" name="" id="baseT">
      <label for="alturaT">Escribe cuánto mide la altura del tu triángulo: </label>
      <input type="number" name="" id="alturaT">
      <button type="button" onclick="calcularPerimetroTriangulo()">Calcular perímetro</button>
      <button type="button" onclick="calcularAreaTriangulo()">Calcular área</button>

      <br>
      <br>
      <br>

      <label for="radioC">Escribe cuánto mide el radio de tu círculo</label>
      <input type="number" name="" id="radioC">
      <button type="button" onclick="calcularPerimetroCirculo()">Calcular perímetro</button>
      <button type="button" onclick="calcularAreaCirculo()">Calcular área</button>
    </form>
  </section>
  <script src="figuras_geometricas.js"></script>
</body>
</html>

Les comparto esta cálculadora en GitHub, esta hecha en firts Mobile, no para escritorio.

https://hafrancol.github.io/GeometriaCalc/

Aquí dejo mi solución del ejercicio para calcular todos los valores de cuadrados, triángulos y círculos

HTML

<!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>Figuras Geométricas</title>
  </head>
  <body>
    <header>
      <h1>Figuras Geométricas</h1>
      <p>Bienvenido a la calculadora matemática</p>
    </header>
    <section>
      <h2>Calcula el área y perímetro de un cuadrado</h2>
      <form action="">
        <label for="inputCuadrado"
          >Escribe cuanto mide cada lado de tu cuadrado:</label
        >
        <input id="inputCuadrado" type="number" />
        <button id="perimetroCuadrado" type="button">
          Cacular el perímetro
        </button>
        <button id="areaCuadrado" type="button">Calcular el área</button>
      </form>
      <h2>Calcula el perímetro de un triángulo</h2>
      <form action="">
        <label for="inputTriangulolado1">Medida lado 1:</label>
        <input type="number" name="" id="inputTriangulolado1" />
        <label for="inputTriangulolado2">Medida lado 2:</label>
        <input type="number" name="" id="inputTriangulolado2" />
        <label for="inputTrianguloBase">Medida base:</label>
        <input type="number" name="" id="inputTrianguloBase" />
        <input
          type="button"
          value="Calcular el perímetro"
          id="perimetroTriangulo"
        />
      </form>
      <h2>Calcula el área de un triángulo</h2>
      <form action="">
        <label for="inputTrianguloBasePerimetro">Medida de la base:</label>
        <input type="number" name="" id="inputTrianguloBasePerimetro" />
        <label for="inputTrianguloAlturaPerimetro">Medida de la altura:</label>
        <input type="number" name="" id="inputTrianguloAlturaPerimetro" />
        <input type="button" value="Calcular el área" id="areaTriangulo" />
      </form>
      <h2>Calcula el diámetro, el perímetro y el área de un círculo</h2>
      <form action="">
        <label for="radioCirculo">Medida del radio:</label>
        <input type="number" name="" id="radioCirculo" />
        <input type="button" value="Calcular el diámetro" id="diametroBoton" />
        <input type="button" value="Calcular el perímetro" id="perimetroBoton" />
        <input type="button" value="Calcular el área" id="areaBoton" />
      </form>
    </section>
    <script src="./figuras.js"></script>
  </body>
</html>

JS

const PI = Math.PI;
let ladoCuadrado = document.getElementById("inputCuadrado").value;

const perimetroCuadrado = (ladoCuadrado) => ladoCuadrado * 4;

const areaCuadrado = (ladoCuadrado) => ladoCuadrado * ladoCuadrado;

const perimetroTriangulo = (lado1, lado2, base) => lado1 + lado2 + base;

const areaTriangulo = (base, altura) => (base * altura) / 2;

const diametroCirculo = (radio) => radio * 2;

const perimetroCirculo = (radio) => diametroCirculo(radio) * PI;

const areaCirculo = (radio) => PI * (radio * radio);

const calcularPerimetroCuadrado = () => {
  const input = document.getElementById("inputCuadrado").value;
  const perimetro = perimetroCuadrado(input);
  alert(perimetro);
};
const calcularAreaCuadrado = () => {
  const input = document.getElementById("inputCuadrado").value;
  const area = areaCuadrado(input);
  alert(area);
};

document.getElementById("perimetroCuadrado").onclick =
  calcularPerimetroCuadrado;
document.getElementById("areaCuadrado").onclick = calcularAreaCuadrado;

const calcularPerimetroTriangulo =()=>{
  const lado1 = parseInt(document.getElementById("inputTriangulolado1").value)
  const lado2 = parseInt(document.getElementById("inputTriangulolado2").value)
  const base = parseInt(document.getElementById("inputTrianguloBase").value)
  alert(perimetroTriangulo(lado1, lado2, base));
}

document.getElementById("perimetroTriangulo").onclick = calcularPerimetroTriangulo;

const calcularAreaTriangulo =()=>{
    const altura = parseInt(document.getElementById("inputTrianguloBasePerimetro").value)
  const base = parseInt(document.getElementById("inputTrianguloAlturaPerimetro").value)
  alert(areaTriangulo(base, altura));
}

document.getElementById("areaTriangulo").onclick = calcularAreaTriangulo;



const calcularDiametroCirculo = ()=>{
  radio = parseFloat(document.getElementById("radioCirculo").value)
  alert(diametroCirculo(radio));
}

document.getElementById("diametroBoton").onclick = calcularDiametroCirculo;

const calcularPerimetroCirculo = ()=>{
  radio = parseFloat(document.getElementById("radioCirculo").value)
  alert(perimetroCirculo(radio));
}

document.getElementById("perimetroBoton").onclick = calcularPerimetroCirculo;

const calcularAreaCirculo = ()=>{
  radio = parseFloat(document.getElementById("radioCirculo").value)
  console.log(radio);
  alert(areaCirculo(radio));
}

document.getElementById("areaBoton").onclick = calcularAreaCirculo;

No esta terminado aun pero comparto lo que llevo, inspirado en MathBot de Obed Paz.![](# Geometry
Calc area and perimeter
)
REPO:
https://github.com/RafaelLozano/practical_course_JS

Listo 😉

<!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>Figuras Geométricas | Curso Práctico de JavaScript Platzi</title>
</head>
<body>
    <header>
        <h1>Figuras Geométricas</h1>
        <p>Este es el primer taller del curso práctico de JS</p>
    </header>

    <!-- Cuadrado -->
    <section>
        <h2>Calcula el área y perimetro de un cuadrado</h2>
        <form>
            <label for="InputCuadrado">
                Escribe cuánto mide un lado de tu cuadrado: 
            </label>
            <input id="InputCuadrado" type="number"/>
            <button type="button" onclick="calcularAreaCuadrado()">
                Calcular área
            </button>
            <button type="button" onclick="calcularPerimetroCuadrado()">
                Calcular el perimetro
            </button>
        </form>
    </section>

    <!-- Triángulo -->
    <section>
        <h2>Calcula el área y perimetro de un triángulo</h2>
        <form>
            <label for="InputLado1">
                Escribe cuánto mide el primer lado de tu triángulo: 
            </label>
            <input id="InputLado1" type="number"/>
            <br><br>

            <label for="InputLado2">
                Escribe cuánto mide el segundo lado de tu triángulo: 
            </label>
            <input id="InputLado2" type="number"/>
            <br><br>

            <label for="InputBase">
                Escribe cuánto mide la base de tu triángulo: 
            </label>
            <input id="InputBase" type="number"/>
            <br><br>

            <label for="InputAltura">
                Escribe cuánto mide la altura de tu triángulo: 
            </label>
            <input id="InputAltura" type="number"/>
            <br><br>

            <button type="button" onclick="calcularAreaTriangulo()">
                Calcular área
            </button>
            <button type="button" onclick="calcularPerimetroTriangulo()">
                Calcular el perimetro
            </button>
        </form>
    </section>

    <!-- Círculo -->
    <section>
        <h2>Calcula el área y perimetro de un círculo</h2>
        <form>
            <label for="InputCirculo">
                Escribe cuánto mide el radio de tu círculo: 
            </label>
            <input id="InputCirculo" type="number"/>
            <button type="button" onclick="calcularAreaCirculo()">
                Calcular área
            </button>
            <button type="button" onclick="calcularPerimetroCirculo()">
                Calcular el perimetro
            </button>
        </form>
    </section>

    <script src="./figuras_funciones.js"></script>
</body>
</html>
//CON ARROW FUNCTIONS

// Cuadrado
const perimetroCuadrado = (lado) => lado * 4;
const areaCuadrado = (lado) => lado * lado;

// Triángulo
const perimetroTriangulo = (lado1, lado2, base) => lado1 + lado2 + base;
const areaTriangulo = (base, altura) => (base * altura) / 2;

// Círculo
const diametroCirculo = (radio) => radio * 2;
const PI = Math.PI;
const perimetroCirculo = (radio) => diametroCirculo(radio) * PI;
const areaCirculo = (radio) => PI * radio ** 2;



// Aquí interactuamos con HTML

// Sección Cuadrado
function calcularPerimetroCuadrado(){
    const input = document.getElementById("InputCuadrado");
    const value = input.value;
    const perimetro = perimetroCuadrado(value);
    alert(perimetro);
}

function calcularAreaCuadrado(){
    const input = document.getElementById("InputCuadrado");
    const value = input.value;
    const area = areaCuadrado(value);
    alert(area);
}


// Sección Triángulo
function calcularPerimetroTriangulo(){
    var input = document.getElementById("InputLado1");
    const lado1 = Number(input.value);
    var input = document.getElementById("InputLado2");
    const lado2 = Number(input.value);
    var input = document.getElementById("InputBase");
    const base = Number(input.value);
    const perimetro = perimetroTriangulo(lado1, lado2, base);
    alert(perimetro);
}

function calcularAreaTriangulo(){
    var input = document.getElementById("InputBase");
    const base = input.value;
    var input = document.getElementById("InputAltura");
    const altura = input.value;
    const area = areaTriangulo(base, altura);
    alert(area);
}


// Sección Círculo
function calcularPerimetroCirculo(){
    const input = document.getElementById("InputCirculo");
    const value = input.value;
    const perimetro = perimetroCirculo(value);
    alert(perimetro);
}

function calcularAreaCirculo(){
    const input = document.getElementById("InputCirculo");
    const value = input.value;
    const area = areaCirculo(value);
    alert(area);
}

Por aquí les dejo el código súper simplificado y fácil de entender que se utilizó en la clase:
HTML

<!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>Figuras Geométricas | Curso Práctico de JavaScript</title>
  </head>
  <body>
    <header>
      <h1>Figuras geométricas</h1>
      <p>Este es el primer taller del curso práctico de JavaScript</p>
    </header>
    <section>
      <h2>Calcula el área y perímetro de un cuadrado</h2>
      <form>
        <label for="InputCuadrado"
          >Escribe cuánto mide cada lado de tu cuadrado</label
        >
        <input type="number" id="InputCuadrado" />
        <button type="button" onclick="calcularPerimetroCuadrado()">
          Calulcar Perímetro
        </button>
        <button type="button" onclick="calcularAreaCuadrado()">
          Calulcar Área
        </button>
      </form>
    </section>
    <section>
      <h2>Calcula el área y perímetro de un triángulo</h2>
      <form>
        <label for="InputTrianguloLado1"
          >Escribe cuánto mide el lado 1 de tu triángulo</label
        >
        <input type="number" id="InputTrianguloLado1" />
        <label for="InputTrianguloLado2"
          >Escribe cuánto mide el lado 2 de tu triángulo</label
        >
        <input type="number" id="InputTrianguloLado2" />
        <label for="InputTrianguloBase"
          >Escribe cuánto mide la base de tu triángulo</label
        >
        <input type="number" id="InputTrianguloBase" />
        <label for="InputTrianguloAltura"
          >Escribe cuánto mide la altura de tu triángulo</label
        >
        <input type="number" id="InputTrianguloAltura" />
        <button type="button" onclick="calcularPerimetroTriangulo()">
          Calulcar Perímetro
        </button>
        <button type="button" onclick="calcularAreaTriangulo()">
          Calulcar Área
        </button>
      </form>
    </section>
    <section>
      <h2>Calcula el área y perímetro de un círculo</h2>
      <form>
        <label for="InputCiculo"
          >Escribe cuánto mide el radio de tu círculo</label
        >
        <input type="number" id="InputCiculo" />
        <button type="button" onclick="calcularPerimetroCirculo()">
          Calulcar Perímetro
        </button>
        <button type="button" onclick="calcularAreaCirculo()">
          Calulcar Área
        </button>
      </form>
    </section>
    <script src="./figuras.js"></script>
  </body>
</html>

JavaScript

//Código del cuadrado

//perimetro cuadrado
const perimetroCuadrado = (lado) => lado * 4;

//area cuadrado
const areaCuadrado = (lado) => lado * lado;

//Código del triángulo

//perimetro triangulo
const perimetroTriangulo = (lado1, lado2, base) => lado1 + lado2 + base;

//area triangulo
const areaTriangulo = (base, altura) => (base * altura) / 2;

//Código del círculo

//circunferencia
const perimetroCirculo = (radio) => radio * 2 * Math.PI;

//area circulo
const areaCirculo = (radio) => Math.PI * (radio * radio);

//interactuar con HTML
//imprimir perimetro de cuadrado
function calcularPerimetroCuadrado() {
  const inputLado = parseFloat(document.getElementById("InputCuadrado").value);
  const perimetro = perimetroCuadrado(inputLado);
  alert(perimetro);
}

//imprimir area de cuadrado
function calcularAreaCuadrado() {
  const inputLado = parseFloat(document.getElementById("InputCuadrado").value);
  const area = areaCuadrado(inputLado);
  alert(area);
}

//imprimir el perimetro del triangulo
function calcularPerimetroTriangulo() {
  const inputLado1 = parseFloat(
    document.getElementById("InputTrianguloLado1").value
  );
  const inputLado2 = parseFloat(
    document.getElementById("InputTrianguloLado2").value
  );
  const inputBase = parseFloat(
    document.getElementById("InputTrianguloBase").value
  );
  const perimetro = perimetroTriangulo(inputLado1, inputLado2, inputBase);
  alert(perimetro);
}

//imprimir el area del triangulo
function calcularAreaTriangulo() {
  const inputBase = parseFloat(
    document.getElementById("InputTrianguloBase").value
  );
  const inputAltura = parseFloat(
    document.getElementById("InputTrianguloAltura").value
  );
  const area = areaTriangulo(inputBase, inputAltura);
  alert(area);
}

//imprimir el perimetro de un circulo
function calcularPerimetroCirculo() {
  const inputRadio = parseFloat(document.getElementById("InputCiculo").value);
  const perimetro = perimetroCirculo(inputRadio);
  alert(perimetro);
}

//imprimir el perimetro de un circulo
function calcularAreaCirculo() {
  const inputRadio = parseFloat(document.getElementById("InputCiculo").value);
  const area = areaCirculo(inputRadio);
  alert(area);
}

Espero les sirva gente.

Saludos.

Comparto mi proyecto, quise agregar figuras para practicar 😄 https://jpablux.github.io/practico-javascript/

No se parece al extraordinario trabajo que han hecho otros, pero lo he logrado.

Le copie el disenio a alguien de aqui
Pero aqui esta el resultado, por el momento es solo mobile first, me falta hacerle responsive poco a poco ire actualizando. Pues por el momento dejo el repo 😉

https://github.com/DavidGD616/Geometric-Calculator
https://davidgd616.github.io/Geometric-Calculator/

Buenas tardes dejo mi desafio terminado!!
pror aca dejo en enlace por si alguien lo quiere ver!!
y por aca el repo!
Desktop

Mobile

Después de un buen rato y con ayuda de los compañeros pude completar el reto.

// CUADRADO

// PERIMETRO

function calcularPerimetroCuadrado() {
const input = document.getElementById(“InputCuadrado”);
const value = input.value;

const perimetro = perimetroCuadrado(value);
alert(perimetro);

}

// ÁREA

function calcularAreaCuadrado() {
const input = document.getElementById(“InputCuadrado”);
const value = input.value;

const area = areaCuadrado(value);
alert(area);

}

// TRIANGULO

// PERIMETRO

function calcularPerimetroTriangulo() {
const inputLado1 = document.getElementById(“inputTriangulo1”);
const inputLado2 = document.getElementById(“inputTriangulo2”);
const inputBase = document.getElementById(“inputTriangulo3”);
const valueLado1 = Number(inputLado1.value);
const valueLado2 = Number(inputLado2.value);
const valueBase = Number(inputBase.value);

const perimetro = perimetroTriangulo(valueLado1,valueLado2,valueBase);

alert(perimetro);

}

// ÁREA

function CalcularAreaTriangulo() {
const inputBase = document.getElementById(“inputTriangulo3”);
const inputAltura = document.getElementById(“inputTriangulo4”);
const valueBase = inputBase.value;
const valueAltura = inputAltura.value;

const area = areaTriangulo(valueBase, valueAltura);

alert(area);

}

// CIRCULO

// PERIMETRO

function calcularPerimetroCirculo() {
const input = document.getElementById(“input_radio”);
const value = input.value;

const perimetro = perimetroCirculo(value);

alert(perimetro);

}

//ÁREA

function calcularAreaCirculo() {
const input = document.getElementById(“input_area”);
const value = input.value;

const area = areaCirculo(value);

alert(area);

}

Aunque sencillo me ha costado un montón espero ir aprendiendo más con cada clase, genial curso.

Lo que importa es el intento

aqui el codigo

Reto Cumplido y responsive:

HTML:

<!DOCTYPE html>
<html lang="es">
<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">
    <link rel="stylesheet" href="./figuras.css">
    <title>Figuras Geométricas</title>
</head>
<body>
    <header class="header">
        <h1 class="header__title">Figuras Geométricas</h1>
        <p class="header__description">Este es el primer taller del curso práctico de JavaScript</p>
    </header>
    <main class="main-container">
        <section class="cuadrado-container">
            <h2 class="cuadrado__title">Cuadrardo</h2>
            <form action="" class="cuadrado__form">
                <label for="inputCuadrado" class="form__label--lado">Lado:</label>
                <input id="inputCuadrado" type="number" class="form__input--lado">
                <button type="button" onclick="calcularPerimetroCuadrado()" class="form__boton--perimetro">Calcular perímetro</button>
                <button type="button" onclick="calcularAreaCuadrado()" class="form__boton--area">Calcular área</button>
            </form>
        </section>
        <section class="triangulo-container">
            <h2 class="triangulo__title">Triángulo</h2>
            <form action="" class="triangulo__form">
                <label for="input--lado1" class="form__label--lado lado1">1er Lado:</label>
                <input type="number" id="input--lado1" class="form__input--lado lado1">
                <label for="input--lado2" class="form__label--lado lado2">2do Lado:</label>
                <input type="number" id="input--lado2" class="form__input--lado lado2">
                <label for="input--lado3" class="form__label--lado lado3">3er Lado:</label>
                <input type="number" id="input--lado3" class="form__input--lado lado3">
                <button type="button" class="form__boton--perimetro">Calcular perímetro</button>
                <button type="button" class="form__boton--area">Calcular área</button>
            </form>
        </section>
        <section class="circulo-container">
            <h2 class="circulo__title">Círculo</h2>
            <form action="" class="circulo__form">
                <label for="input--radio" class="form__label--radio">Radio:</label>
                <input type="number" id="input--radio" class="form__input--radio">
                <button type="button" class="form__boton--perimetro">Calcular perimetro</button>
                <button type="button" class="form__boton--area">Calcular área</button>
            </form>
        </section>
    </main>
    <footer></footer>
    <!-- <script src="./figuras.js"></script> -->
    <script src="./figuras2.js"></script>
</body>
</html>

CSS:

:root {
    --color--primary: #181818;
    --color--secundary: #152337;
    --color--tertiary: #2E5183;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

html {
    font-size: 62.5%;
}

body {
    width: 100%;
    min-width: 300px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    font-size: 1.6rem;
}

/* ========================================= */
/*                  HEADER                   */
/* ========================================= */

header {
    width: 100%;
    min-height: 100px;
    padding: 30px 20px;
    text-align: center;
    color: white;
    background: linear-gradient(180deg, var(--color--primary), var(--color--secundary));
}

.header__title {
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 3.4rem;
}

.header__description {
    max-width: 300px;
    margin: 0 auto;
    font-size: 1.8rem;
    line-height: 2.4rem;
}

/* ========================================= */
/*                  MAIN                     */
/* ========================================= */

main {
    width: 100%;
    padding: 20px;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    background-color: var(--color--tertiary);
}

section {
    width: 250px;
    max-width: 400px;
    height: 300px;
    margin: 20px;
    padding: 20px;
    color: white;
    border-radius: 20px;
    /* border: 1px solid red; */
}

/* --------- Cuadrado ----------- */
.cuadrado-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.cuadrado__title {
    position: relative;
    margin-bottom: 10px;
    text-align: center;
}
.cuadrado__title::after {
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,50px);
    background-color: var(--color--primary);
    box-shadow: 0 0 5px white;
}
.cuadrado__form {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 25px repeat(2,1fr);
}
.cuadrado__form .form__label--lado {
    justify-self: left;
    align-self: center;
    margin-left: 10px;
    margin-bottom: 20px;
}
.cuadrado__form .form__input--lado {
    margin-bottom: 20px;
    width: 100%;
    padding: 2px 10px;
    align-self: center;
    text-align: center;
    outline: none;
    border-radius: 10px;
}
.form__boton--perimetro {
    grid-column: 1/ span 2;
}
.form__boton--area {
    grid-column: 1/ span 2;
}
.cuadrado__form button {
    margin: 3px 0px;
    padding: 10px 5px;
    border-radius: 20px;
    border: none;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    /* background-color: red; */
}

/* ------------- Triángulo ---------- */
.triangulo-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.triangulo__title {
    position: relative;
    text-align: center;
}
.triangulo__title::after {
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,40px);
    background: linear-gradient(112deg,transparent 50%,rgba(255,255,255,0.5) 50%,var(--color--primary) 56%) -15px 0, linear-gradient(66deg,var(--color--primary) 50%, transparent 50%) 25px 0;
    background-size: 40px 80px;
    background-repeat: no-repeat;
}
.triangulo__form {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 25px 25px 25px repeat(2,1fr);
}
.triangulo__form .form__label--lado {
    width: 80px;
    justify-self: left;
    align-self: center;
    margin-left: 10px;
}
.triangulo__form .form__input--lado {
    width: 100%;
    padding: 2px 10px;
    align-self: center;
    text-align: center;
    outline: none;
    border-radius: 10px;
    margin-bottom: 5px;
}
.triangulo__form button {
    margin: 3px 0px;
    padding: 10px 5px;
    border-radius: 20px;
    border: none;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

/* -------------- Círculo ----------- */
.circulo-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.circulo__title {
    position: relative;
    text-align: center;
}
.circulo__title::after {
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,50px);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    background-color: var(--color--primary);
}
.circulo__form {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 25px repeat(2,1fr);
}
.circulo__form .form__label--radio {
    justify-self: left;
    align-self: center;
    margin-left: 10px;
    margin-bottom: 20px;
}
.circulo__form .form__input--radio {
    margin-bottom: 20px;
    width: 100%;
    padding: 2px 10px;
    align-self: center;
    text-align: center;
    outline: none;
    border-radius: 10px;
}
.circulo__form button {
    margin: 3px 0px;
    padding: 10px 5px;
    border-radius: 20px;
    border: none;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}


/* ========================================= */
/*                  FOOTER                   */
/* ========================================= */

footer {
    width: 100%;
    height: 60px;
    background-color: var(--color--primary);
}

ASÍ ME QUEDÓ A MÍ:
Es completamente responsivo y cuenta con validaciones 🙋🏻‍♂️

  • Vista mobile
  • Vista desktop

Pueden ir a ver el proyecto aquí
Pueden ir a ver el repositorio aquí

Creo que se le paso mencionar que los input aunque sean tipo number el value al momento de obtenerlo este es de tipo string. Es recomendado hacer coerción del dato para que no se presente errores.

Por ejemplo:

Si colocas los input para ingresar el lado1, lado2 y lado3 y quieres tomar el valor y vas a sumar estos tres valores no te va a dar el resultado esperado.

lado1 = 5
lado2 = 5
lado3 = 5

cuando realices la suma de los lados y lo imprimas, este da un valor de “555” porque son string y en vez de sumar te va a concadenar.

Para que tu resultado sea correcto lo recomendado es hacer coerción del valor.

Entonces tienes que hacer coerción ya sea con u +

Estuve viendo los super aportes que hicieron muchos estudiantes, me causo envidia. Lo bueno es que me dieron mas ganas de aprender para estar a ese nivel. Por el momento mi aporte me sirvió para recordar algunas cosas que había aprendido en anteriores cursos. Espero desarrollar esa habilidad que tienen el resto de estudiantes.
INTERFAZ

HTML

<!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>CALCULADORA DE AREA Y PERIMETRO</title>
</head>
<body>
    <h1>
        <b>ELIGE TU FIGURA</b><br><hr>
    </h1>
    <p>
        
        1 = Cuadrado    (lado)<br>
        2 = Rectangulo  (base, altura)<br>
        3 = Circulo     (radio)<br>
        4 = Triangulo   (base, altura, lado)<br>
        <hr><b>ELIGE</b><br>
        <input type="text" id = "figura" /><hr>
    </p>
    <p id = "base">
        <b>Base</b><br>
        <input type="text" id = "valorBase" /><br>
    </p>

    <p id = "altura">
        <b>Altura</b><br>
        <input type="text" id = "valorAltura" /><br>
    </p>

    <p id = "lado">
        <b>Lado</b><br>
        <input type="text" id = "valorLado" /><br>
    </p>

    <p id = "valor">
        <b>Radio</b><br>
        <input type ="text" id = "valorRadio" /></br>
    </p>

    <p id = "respuesta"></p><hr>

    <input type="button" id = "boton" value= "Enviar"/>

    <script src="formulas.js"></script>
</body>
</html>

JS

boton = document.getElementById("boton");
figura = document.getElementById("figura");
base = document.getElementById("valorBase")
altura = document.getElementById("valorAltura")
radio = document.getElementById("valorRadio")
lado = document.getElementById("valorLado")
boton.addEventListener("click", main )
var respuesta = document.getElementById("respuesta");

function mostrarRespuesta(nombreFigura, perimetroFigura, areaFigura)
{
    respuesta.innerHTML = "<b>" + nombreFigura + "</b>" + "<br>" + "Perimetro: " + perimetroFigura + "<br>Area: " + areaFigura  
}


function cuadrado(ladoUsuario)
{
    var perimetroCuadrado = ladoUsuario * 4
    var areaCuadrado = ladoUsuario * ladoUsuario
    mostrarRespuesta("CUADRADO", perimetroCuadrado, areaCuadrado)
}


function rectangulo(baseUsuario, alturaUsuario)
{
    var perimetroRectangulo = 2*baseUsuario + 2*alturaUsuario;
    var areaRectangulo = baseUsuario * alturaUsuario;
    mostrarRespuesta("RECTANGULO", perimetroRectangulo, areaRectangulo)
}

function circulo(radioUsuario)
{
    perimetroCirculo = 2 * Math.PI * radioUsuario
    areaCirculo = Math.PI * radioUsuario**2
    mostrarRespuesta("CIRCULO", perimetroCirculo, areaCirculo)
}

function triangulo(alturaUsuario, baseUsuario, ladoUsuario)
{
    var perimetroTriangulo = ladoUsuario * 3
    var areaTriangulo = (baseUsuario * alturaUsuario) / 2
    mostrarRespuesta("TRIANGULO", perimetroTriangulo, areaTriangulo)

}

function main()
{
    var opcionUsuario = parseInt(figura.value);
    var ladoUsuario = parseInt(lado.value);
    var baseUsuario = parseInt(base.value)
    var alturaUsuario = parseInt(altura.value)
    var radioUsuario = parseInt(radio.value)

    if (opcionUsuario == 1)
    {        
        cuadrado(ladoUsuario)
    }
    else if (opcionUsuario == 2)
    {
        rectangulo(baseUsuario, alturaUsuario)
    }

    else if (opcionUsuario == 3)
    {
        circulo(radioUsuario)
    }
    else if (opcionUsuario == 4)
    {
      
        triangulo(baseUsuario, alturaUsuario, ladoUsuario)
    }
}

Asì va mi código, ahora a añadir css

// cuadrado
function calcularPerimetroCuardrado(){
     const input = document.getElementById("InputCuadrado");
     const value = input.value;

     const perimetro = perimetroCuadrado(value);
     alert (perimetro);
}
function calcularAreaCuardrado(){
    const input = document.getElementById("InputCuadrado");
     const value = input.value;

     const area = areaCuadrado(value);
     alert (area);
}

// triangulo
function calcularPerimetroTriangulo(){
    const input1 = document.getElementById("InputTriangulo1");
    const value1 = Number(input1.value);
    const input2 = document.getElementById("InputTriangulo2");
    const value2 = Number(input2.value);
    const input3 = document.getElementById("InputTriangulo3");
    const value3 = Number(input3.value);

    const perimetro = perimetroTriangulo(value1,value2,value3);
    alert (perimetro);
}
 function calcularAreaTriangulo(){
    const altura = document.getElementById("InputTriangulo1");
    const value1 = altura.value;
    const Base = document.getElementById("InputTriangulo2");
    const value2 = Base.value;

     const area = areaTriangulo(value1, value2);
     alert (area);
}

// circulo

function calcularPerimetroCirculo(){
    const input = document.getElementById("InputCirculo");
    const value = Number(input.value);

    const perimetro = perimetroCirculo(value);
    alert (perimetro);
}

function calcularAreaCirculo(){
    const input = document.getElementById("InputCirculo");
    const value = Number(input.value);

    const area = areaCirculo(value);
    alert (area);
}

Repositorio por si quieren echar un vistazo para saber como esta hecho:
https://github.com/CamiloRami/proyecto-basico-javascript


Asi quedo el mío, fue divertido



cuando unes el curso anterior con este 😁😁😁😁😁😁😁😁😁😁😁😁😁😁😁😁😁😁😁😁😁

No se si lo que hice sea la mejor forma de hacerlo pero me funcionó, aquí les dejo el código del html y del js por si les sirve de apoyo.

JS

function perimetroCuadraro(lado) {
    return lado * 4;
}


function AreaCuadrado(lado){
    return lado * lado;
}

function calcularPerimetroCuadrado(){
    const input = document.getElementById("InputCuadrado");
    const value = input.value;
    
    const perimetro = perimetroCuadraro(value);
    alert(perimetro);
}

function calcularAreaCuadrado(){
    const input = document.getElementById("InputCuadrado");
    const value = input.value;
    
    const area = AreaCuadrado(value);
    alert(area);
}
// triangulo 

function PerimetroTriangulo() {
    var lado1 = document.getElementById("InputLado1Triangulo");
    var lado2 = document.getElementById("InputLado2Triangulo");
    var base = document.getElementById("InputBaseTriangulo");

    var perimetroT = (parseInt(lado1.value) + parseInt(lado2.value) + parseInt(base.value));
    alert(perimetroT);
}

function areaTriangulo() {
  var base = document.getElementById("InputBaseTriangulo");
  var altura = document.getElementById("InputAltura");
  
  var AreaT = ((parseInt(base.value) * parseInt(altura.value)) /2) 
    alert(AreaT);
}

// Circulo

function DiametroCriculo() {
    var radio = document.getElementById("RadioCirculo");
    var diametroC = (parseInt(RadioCirculo.value) * 2);
    alert(diametroC);
}

function AreaCirculo() {
    var radio = document.getElementById("RadioCirculo");
    var pi = Math.PI;
    var areaC = ((parseInt(RadioCirculo.value) * parseInt(RadioCirculo.value)) * pi);
    alert(areaC);
}

function PerimetroCirculo() {
    var radio = document.getElementById("RadioCirculo");
    var pi = Math.PI;
    var diametroC = (parseInt(RadioCirculo.value) * 2);
    var perimetroC = (diametroC * pi);
    alert(perimetroC);
}


Html

<!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>Figuras</title>
</head>
<body>
    <header>
        <h1>Figuras Geométricas</h1>
        <p>LLena el formulario</p>
    </header>
    <section>
        <h2>Calcula el área y perimetro de un cuadrado</h2>

            <form>
                <label for="InputCuadrado">Escribe cuanto mide cada lado de tu cuadrado</label>
                <input type="number" id="InputCuadrado">
                <button type="button" onclick="calcularPerimetroCuadrado()">Calcula el perimetro del cuadrado</button>

                <button type="button" onclick="calcularAreaCuadrado()">Calcula el area del cuadrado</button>
            </form>
<br>
<br>
    </section>
    <div>
        <form>
            <label for="InputLado1Triangulo">Escribe el lado 1</label>
            <Input type="number" id="InputLado1Triangulo"></Input> <br>
            <label for="InputLado2Triangulo">Escribe el lado 2</label>
            <Input type="number" id="InputLado2Triangulo"></Input><br>
            <label for="InputBaseTriangulo">Escribe la base del triangulo</label>
            <Input type="number" id="InputBaseTriangulo"></Input><br>
            <label for="InputAltura">Escribe la altura del triangulo</label>
            <Input type="number" id="InputAltura"></Input><br>
            <br>
            <button type="button" onclick="PerimetroTriangulo()">Calcular Primetro del triangulo</button>
            <button type="button" onclick="areaTriangulo()">Calcular Area del triangulo</button>
        </form>
    </div>

    <div>
        <br>
        <form>
            <label  for="RadioCirculo">Ingresa el radio del circulo</label>
            <input type="number" id="RadioCirculo">
            <button type="button" onclick="PerimetroCirculo()">Calvular el perimetro del circulo</button>
            <button type="button" onclick="AreaCirculo()">Calvular el area del circulo</button>
            <button type="button" onclick="DiametroCriculo()">Calvular el diametro del circulo</button>
        </form>
    </div>
    <script src="./figuras.js">
        
    </script>
</body>
</html>

Hola a todos!
Ya que estamos… también decidí hacer del curso una aplicación web.
Aquí les dejo unas capturas de como va el proyecto tratando de implementar Responsive Design.


Hola [email protected] 😃
Aquí comparto mi proyecto con lo aprendido aquí, la verdad aprendí muchísimo de JavaScript y me divertí muchísimo
Con el diseño de esta app me inspiré en diseños de mis talentosos compañeros 💚
.
Seguramente halla errores en la parte de cálculo, discúlpenme soy malo en geometría 😂
Les dejo el repositorio en GitHub aquí: https://github.com/AlloyFox/Calculator_geometric_figures
Lo subí a Netlify también para que cualquiera pueda verlo: https://silly-easley-82178d.netlify.app/

  • Les dejo la versión móvil aquí:

  • Y la versión de escritorio y tablet

¡Reto completado agregando CSS al HTML!
Mobile:

Tablet:

Desktop:

por defecto los botones son de tipo summit en html

veo tantos proyectos tan geniales y hermosos y me pregunto si algún día podré hacer algo asi 😅
![](

Muy buena clase pero recomiendo que las palabras en ingles sean pronunciadas correctamente para que las personas que no sepan hablarlo se vayan familiarizando con la pronunciación


Como lo ven banda?

Que emoción la de tener el reto completado y seguir aprendiendo 😄😄 https://pedroalexdev.github.io/practica-javascript.github.io/

Les paso una modificación que le hice al código. En vez del Alert, uso el sintetizador de voz que ya trae JavaScript

function calcularPerimetroCuadrado(){
const input = document.getElementById(“InputCuadrado”);
const value = input.value;
const perimetro = perimetroCuadrado(value);
hablar("El perímetro del cuadrado es de " + perimetro + “cm”);
//alert(perimetro);
}

function calcularAreaCuadrado(){
const input = document.getElementById(“InputCuadrado”);
const value = input.value;
const area = areaCuadrado(value);
hablar("El área del cuadrado es " + area + “cm2”);
//alert(area);
}

function hablar(texto){
var utterance = new SpeechSynthesisUtterance(texto);
window.speechSynthesis.speak(utterance);

}

Que les parece

Aca mi aporte! html/css/js. Cada imagen es un botón que te lleva a un form en donde calculas dependiendo de la forma. También puedes elegir entre perímetro o área.

https://jrigoo.github.io/FigurasGeometricas/figuras.html

Aún existe mucho código repetido, pero es el trabajo de la clase.

const PI = Math.PI;
const squarePerimeter = (side) => side * 4;
const squareArea = side => side * side;
const triangleHeight = base => Math.sqrt((base/2) ** 2 + 6 ** 2);
// Como se puede dejar sin parentesis, pero únicamente cuando es solo un argumento.
// Se puede dejar con parentesis cuando pasamos valores en las  arrow function
const trianglePerimeter = (sideA,sideB,base) => parseInt(sideA) + parseInt(sideB) + parseInt(base);
const triangleArea = (base, height) => (1/2) * base * height;
const circleDiameter = radio => 2 * radio;
const circleCircumference = diameter => diameter * PI;
const circleArea = radio => (radio * radio) * PI;

const calculateSquarePerimeter = () => {
  const side = parseInt(document.getElementById('square_side').value);
  console.log(`Square: the perimeter is: ${squarePerimeter(side)}cm`);
}
const calculateSquareArea = () => {
  const side = document.getElementById('square_side').value;
  console.log(`Square: the Area is: ${squareArea(side)}cm2`);
}

const calculateTrianglePerimeter = () => {
  const sideA = document.getElementById('triangle_side_A').value;
  const sideB = document.getElementById('triangle_side_B').value;
  const base = document.getElementById('triangle_base').value;
  console.log(`Triangle Perimeter: 
  ${trianglePerimeter(sideA, sideB, base)}cm`);
}
const calculateTriangleArea = () => {
  const base = parseInt(document.getElementById('triangle_base').value);
  const height = triangleHeight(base);
  console.log(`Triangle Area: ${triangleArea(base,height)}cm2`);
}

const calculateCirclePerimeter = () => {
  const radio = parseInt(document.getElementById('circle_radio').value);
  const diameter = circleDiameter(radio);
  console.log(`Circle Diameter: ${diameter}cm`);
  console.log(`Circle Circumference/Perimeter:
    ${circleCircumference(diameter)}cm`);
}
const calculateCircleArea = () => {
  const radio = parseInt(document.getElementById('circle_radio').value);
  console.log(`Circle Area: ${circleArea(radio)}cm2`);
}

tambien puedes utilzar un placeholder por si quieres poner texto dentro de tus inputs

 <input placeholder="lado del cuadrado" id="inputCuadrado" type="number">

Así me quedó…

Hice el ejercicio responsive.
Me tardé en hacer la página pero la acabé.

Mobile

Desktop
Tanto en mobile como en desktop le agregué un menú desplegable haciendo hover.

Aquí mi taller:

Y así, culminamos este primer ejercicio!

Después de un par de días de pensar el diseño más que nada, he conseguido hacer esto, admito que me ha gustado bastante el resultado final que he conseguido. Pueden repositorio haciendo Click Acá o ver la versión en vivo y en directo desde la Pagina Web
.

Desktop

.

Mobile

Les comparto mi resultado, pueden consultar el código aquí

Para numeros decimales:

<input type="number" step="0.01" id="inputCuadrado">

Les dejo mi avance en el proyecto…

Y les comparto mi repositorio… Cada aporte de los compañeros es de mucha ayuda. Muchas gracias.
https://github.com/libian19/javascript_practico

Por si alguien se pregunta como calcule el area del triangulo dejo aqui el código. Tuve que repasar acerca del teorema de pitadoras.

function areaTriangulo (lado) {
    const Lado1 = lado;
    const base1 = lado/2;
    const altura = Math.sqrt((lado * lado) - (base1 * base1));
    const areaTriangulo = (base1 * altura);
    return Math.round(areaTriangulo * 100)/100;
}

Compañeros les comparto mi pagina con el taller implementado, es responsive.


https://juan2579.github.io/Curso-Practico-JavaScript/primerTaller/figuras.html

getElementsByClassName('" ") para leer por ejemplo del input