Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Calculando figuras geométricas en JavaScript

6/24
Recursos

Aportes 214

Preguntas 15

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Encapsula los console 😃

#Abres
console.group("nombre que desees");
#Cierras
console.groupEnd();

lo del console.group me voló la cabeza 😄

se puede incluir variables en el texto usando estas comillas `` y agregando la variable de este manera ${ladoCuadrado}

const ladoCuadrado = 5;
console.log(`los lados de cuadrado miden ${ladoCuadrado}`)

Comunidad, si tienen mucho código en una sola línea y tienen que hacer scroll para poder verlo todo como en el min 8:07. También pueden presionar Alt + Z si están en Windows. Esto les permitirá hacer wrap para que sea vea prolijo y ordenado. 💚

En vez de inicializar la variable altura, podemos utilizar el Teorema de Pitágoras para calcularla, ya que es un triángulo isósceles y conocemos la base y la altura. Esto funcionaria también con triángulos equiláteros.
El código quedaría de la siguiente manera:
const alturaTriangulo = Math.sqrt((base/2) * * 2 + 6 * * 2);

Les dejo también una foto para que se entienda mejor 😃

En js también se puede usar ** para calcular un exponente, ejm :

const areaCuadrado = ladoCuadrado ** 2;

Me encantó esta clase. 🙌

  • Para los que no desean tantos decimales en sus resultados el objeto Math tiene una propiedad que redondea el valor de una variable que le pasemos como argumento.
Math.round(areaCirculo)
  • Si quieren ser más exactos pueden usar el método toFixed que permite definir un número concreto de decimales. Luego solo queda convertirlo nuevamente a un valor numérico, ya que este método lo devuelve como un string.
parseFloat(areaCirculo.toFixed(4))

Adjunto el codigo trabajado en la clase: Calculando figuras geométricas en JavaScript

//Código del Cuadrado
console.group("Cuadrados")
//Lado del cuadrado
const ladoCuadrado = 5;
console.log("Los lados del cuadrado miden: " + ladoCuadrado + " cms");
//Perimetro del cuadrado
const perimetroCuadrado = ladoCuadrado * 4;
console.log("El perimetro del cuadrado mide: " + perimetroCuadrado + " cms");
//Area del cuadrado
const areaCuadrado = ladoCuadrado * ladoCuadrado;
console.log("El área del cuadrado mide: " + areaCuadrado + " cms^2");
console.groupEnd();


//Código del Triangulo
console.group("Triangulo");
//Lados de triangulo
const ladoTriangulo1 = 6;
const ladoTriangulo2 = 6;
const baseTriangulo = 4;
const alturaTriangulo =5;
console.log("Los lados del triángulo miden: " + ladoTriangulo1 + " cms, " + ladoTriangulo2 + " cms, " + baseTriangulo + "cms.");
console.log("La altura del triangulo mide: " + alturaTriangulo + " cms");
//Perimetro del triangul
const perimetroTriangulo = ladoTriangulo1 + ladoTriangulo2 + baseTriangulo;
console.log("El perimetro del triangulo mide: " + perimetroTriangulo + " cms");
//Area del triangulo
const areaTriangulo = (baseTriangulo * alturaTriangulo)/2;
console.log("El área del triangulo mide: " + areaTriangulo + " cms^2");
console.groupEnd();


//Código del Circulos
console.group("Circulos");
//Radio
const radioCirculo = 4;
console.log("El radio del circulo es " + radioCirculo + " cms.");
//Diametro
const diametroCirculo = radioCirculo * 2;
console.log("El diametro del circulo es " + diametroCirculo + " cms.");
// PI
const PI = Math.PI;
console.log("PI es " + PI + ".");
// Perimetro
const perimetroCirculo = diametroCirculo * PI;
console.log("El perimetro del circulo es " + perimetroCirculo + " cms.");
//Area
const areaCirculo = PI * (radioCirculo**2);
console.log("El area del circulo es " + areaCirculo + " cms.");
console.groupEnd();

Esta extensión es su mejor opción si no quieren tener la pestaña del navegador abierta con la consola.

Ejecuta solo el código seleccionado en la consola del propio editor.

Otra excelente manera de elevar al cuadrado un numero es usando la funcion pow() de la biblioteca Math que trae por defecto JavaScript

const radioCirculo = 4;

const areaCirculo = Math.pow(radioCirculo, 2) * PI;

//50.26548245743669cm2

La función toma dos argumentos: el primero es nuestra variable o valor objetivo, y el segundo es el número de veces que queremos multiplicarlo por sí mismo. En el caso de que queramos elevar ese número al cuadrado, enviaremos 2 como segundo argumento.

También se puede escribir de la siguiente forma:

Otras funciones además de console.log()

Fuente y para más información: https://lenguajejs.com/javascript/introduccion/consola-de-javascript/
Los recursos de esa página son bastante útiles 🙌 .

Para más usos curiosos de console te dejo la documentación de console
https://developer.mozilla.org/es/docs/Web/API/Console
.
(Console.time() y Console.table() me parecieron muy curiosas 👀)

el utilizar Template literals

console.log(`los lados del cuadrado miden ${ladoCuadrado} cm`)

es mas cómodo, que dices?

En Windows con Alt + 253 agregan el cuadrado de esta manera

cm²

Bien, creo que es neceserio conocer desde ya algunas cosas más de esta caja de herramientas Math, como aprender a redondear
|

Math es un objeto que posee constantes (como el valor de Pi) y metodos aplicables con fines matemáticos.

Algunos métodos útiles para cálculos geométricos serían:

Extraer raíz cuadrada:

  Math.sqrt(4)
  //retorna 2

Potencias:

  //Math.pow(numeroBase, exponente)

  Math.pow(4,2)
  //retorna 16

También lo podemos usar para extraer raíces:

  Math.pow(4,1/2);
  Math.pow(4,0.5);
  //ambos retornan 2

¿Cómo redondeamos?

Aunque JS tenga serios problemas con los decimales, podemos redondear con alguno de los siguientes 3 métodos:

  • Redondear al mínimo entero:
      Math.floor(6.9)
      //retorna 6
    
  • Redondear al entero mas cercano:
      Math.round(6.9)
      //retorna 7
    
      Math.round(5.5)
      //retorna 6
    
      Math.round(3.49)
      //retorna 3
    
  • Redondear con decimales:
    Para esto usaremos un método numérico en realidad:
      // objeto.toFixed(nDecimales)
    
      let nmroBase = 6.4891235;
      nmroBase.toFixed();
      //retorna "6" , nos damos cuenta que así se redondea al entero más cercano.
      nmroBase.toFixed(2);
      //retorna "6.49" , hemos indicado que redondee con 2 decimales
    
    Como podemos observar, este método nos entrega una cadena de texto “string” como resultado.
    Si necesitamos usar el valor devuelto como número, tendremos que pasar el resultado por la Función constructora Number()
    Number(nmroBase.toFixed(2))
    //retorna 6.49 , dato tipo número.
    

Referencias para Math y toFixed, echenles un ojo.

Para limitar el numero de decimales en el resultado podemos utilizar la función toFixed().

// Sin toFixed()
const perimetroCirculo = (diametroCirculo * PI) 
// Resultado 25.132741228718345

// con toFixed() en este caso lo limite a tres decimales 
const perimetroCirculo = (diametroCirculo * PI).toFixed(3);
// Resultado 25.133

Para los parámetros de la función tenemos dos opciones:

  1. toFixed(n): n debe ser un numero entero y muestra los n primeros números que deseamos.
  2. toFixed(): cuando no pasamos ningún parámetro elimina todos los decimales y deja solo la parte entera del número.

A lo mejor se menciona en un futuro del curso pero si no les gusta que el resultado sean muchos decimales pueden hacer esto.
Con .toFixed() le podemos especificar cuandos decimales queremos que tenga en mi caso sólo tres.

//Area
    const areaCircle = (radioCircle * radioCircle) * PI;
    console.log("The area of a circle: " + areaCircle.toFixed(3) + " cm");

Ayuda mucho ver el video en 1.5x

Que buen dato el del console.group () no lo conocia

Buena clase. Una oportunidad para jugar con Javascript y repasar matemáticas. 😀

si hacemos alt + z el codigo te queda todo en una pantalla sin hacer scroll

Y recuerden amiguitos, antes de cerrar el trabajo

git add .
git commit -m "tu mensajito"
git push

Adiós!

//codigo del cuadrado
console.group("cuadrados");

const lado_cuadrado = 5;

console.log("los lados del cuadrado son " + lado_cuadrado + "cm");

const perimetro_cuadrado = lado_cuadrado * 4;

console.log("El perimetro del cuadrado es " + perimetro_cuadrado + "cm");

const area_cuadrada = lado_cuadrado * lado_cuadrado;

console.log("El area del cuadrado es " + area_cuadrada + "cm²");

console.groupEnd();

//dodigo del triangulo
const lado_triangulo_1 = 6;
const lado_triangulo_2 = 6;
const base_triangulo_3 = 4;
const altura_triangulo = 5.5;

console.group("triangulos");

console.log("los lados del triangulo miden " + lado_triangulo_1 + "cm, " + lado_triangulo_2 + "cm, " + base_triangulo_3 + "cm");

console.log("la aultura del triangulo es de " +altura_triangulo + "cm");

const perimetro_triangulo = lado_triangulo_1 + lado_triangulo_2 + base_triangulo_3;

console.log("el perimetro del triangulo es de " + perimetro_triangulo + "cm");

const area_triangulo = base_triangulo_3 * altura_triangulo / 2;

console.log("el area del triangulo es de " + area_triangulo + "cm²");

console.groupEnd();

//codigo del circulo

console.group("circulos");
//radio
const radio_circulo = 4;
//diametro
const diametro_circulo = radio_circulo * 2;
//PI
const PI = Math.PI;
//circunferencia
 const perimetro_circulo = diametro_circulo * PI;
//area
const area_circulo = (radio_circulo * radio_circulo) * PI;

console.log("el radio del circulo es: " + radio_circulo);

console.log("el dia,etro cuadado del circulo es: " + diametro_circulo + "cm²");

console.log("PI es: " + PI);

console.log("el perimetro del circulo es: " + perimetro_circulo);

console.log("el area del circulo es de: " + area_circulo);

console.groupEnd();

Excelentes prácticas de programación, te felicito.

Por si han notado que su variable PI (En caso que usen el objeto Math) les deja un monton de cifras, para arreglar eso pueden usar el método toFixed() y el numero de decimales que quieren que tenga la cifra

Math.PI
// 3.141592653589793
Math.PI.toFixed(2)
//3.14

Vine a este curso con la esperanza de aprender algo nuevo y no me decepcioné; aprendí el console.group().
Gracias JuanDC

Alguien mas se emociono con console.group? 😲

Para obtener el superindice del cuadrado existe la combinación de teclas Alt + 253.

Otra forma de concatenar sin usar tantos + es …

const ladoCuadrado = 5
console.log(`Los lados del cuadrado miden ${ladoCuadrado}`)

En lugar de comillas normales se usan estas `` (ni idea como se llamen). Pueden hacerse con alt + 96. Y para poner variables es con signo de pesos y llaves ${}

Desconocía console.group y console.groupEnd…Aprendiendo 👌

Amigos les dejo unos bloquecitos de código para agregar atajos al console.log, console.group console.groupEnd.

ejemplo “cl + shift” se auto completa console.log
ejemplo “cg + shift” se auto completa console.group
ejemplo “cge + shift” se auto completa console.groupEnd

para tener estos atajos deben agregar las modificaciones a un .json presionando “ctrl + shift + p” y escriben “Configure user snippets” Seleccionan y buscan javascript.json

y agregan el siguiente código


  "Crea un console.log": {
    "prefix": "cl",
    "body": "console.log($1);"
  },

  "Crea un console.group": {
    "prefix": "cg",
    "body": "console.group($1);"
},

"Crea un console.groupEnd": {
    "prefix": "cge",
    "body": "console.groupEnd();"
}

Esto es muy útil para los que somos nuevos, espero les ayude!

creia que por ser un curso practico, seria algo mas practico del mundo real no esto, sumado a que si no lo pongo en 1.25x…

Pueden usar .toFixed(number) para especificar cuantos números quieren después de la coma.

// Perímetro

const perimetroCirculo = (diametroCirculo * PI).toFixed(2);
console.log("El perímetro del círculo es de: " + perimetroCirculo + " cm.");

// Área

const areaCirculo = ((radioCirculo * radioCirculo) * PI).toFixed(2);
console.log("El area del círculo es de: " + areaCirculo + " cm2.");

Si agregan la función .toFixed(3) pueden elegi la cantidad de decimales a mostrar.

Para que no se forme ese scroll a la derecha cuando una línea de código es muy larga pueden ir en visual studio code a configuración y buscan por la palabra wrap yen editor: Word Wrap lo colocan en "on" y así se ajustan las líneas y no tienen que hacer scroll a los lados. Espero les sirva, saludos

Pueden usar la extension de VSCode CodeRunner para ejecutar codigo JavaScript directo en la consola de VSCode

A partir del circulo, github copilot hizo todo, no tuve más que dar tab.

Que buena clase, se va el tiempo rapidisimo.

Pero que hermosa e increible clase.
De las mejores que he tomado hasta ahorita.

Hola Devs, tengo acceso a Github Copilot, y me autocompleto el 100% del codigo, obviamente tuve que hacer algun que otro arreglo, pero estuve genial.
Tambien destacar que siempre es bueno** entender como funcionan las cosas** antes de implementarlas.

El profesor explica genial!!!

Cuando vi el Console.group por primera vez me mando a volar la cabeza

Un pequeño atajo en visual Studio code seria presionar Alt + z para poder visualizar el código dentro del espacio en pantalla que tengamos disponible

Hola! para no generar ese scroll en vscode, nos podemos dirigir al apartado Ver -> darle click a Ajuste de palabra

O también usar la combinación de teclas (Alt + z), en caso de Windows

Otra manera bonita de hacer el ejercicio

var calcularAreas = {
    //Declaracion Variables
    ladoCuadrado: 5,
    ladoTriangulo: 6,
    baseTriangulo: 4,
    AlturaTriangulo: 5.5,
    //Círculo
    radioCirculo:4,
    PI:Math.PI,
    
    //Metodo Inicial
    init: function () {
        //eventos
        console.group("Cuadrado");
        calcularAreas.calcularPerimetroCuadrado();
        calcularAreas.calcularAreaCuadrado();
        console.groupEnd();


        console.group("Triángulo");
        calcularAreas.calcularPerimetroTriangulo();
        calcularAreas.calcularAreaTriangulo();
        console.groupEnd();

        console.group("Círculo");
        calcularAreas.calcularPerimetroCirculo();
        calcularAreas.calcularAreaCirculo();
        console.groupEnd();


    },// fin init

    //Operaciones para calculos 
   
    calcularPerimetroCuadrado: function () {
        let resulPerimetroCuadrado = calcularAreas.ladoCuadrado * 4;
        console.log(`Tu perimetro del cuadrado es : ${resulPerimetroCuadrado} cm`);
    },    
    
    calcularAreaCuadrado: ()=> {
        let resulAreaCuadrado = calcularAreas.ladoCuadrado * calcularAreas.ladoCuadrado;
        console.log(`Tu área del cuadrado es : ${resulAreaCuadrado} cm`);
    },    

    calcularPerimetroTriangulo: ()=> {
        let resulPeriTriangulo = calcularAreas.ladoTriangulo  + calcularAreas.ladoTriangulo + calcularAreas.baseTriangulo;
        console.log(`Los Lados del triángulo Miden : Lado ${calcularAreas.ladoTriangulo} cm, Base ${calcularAreas.ladoTriangulo} `);
        console.log(`La altura del triángulo : Altura ${calcularAreas.AlturaTriangulo}cm `);
        console.log(`El perímetro del triángulo :  ${resulPeriTriangulo}cm `);

    },    
    calcularAreaTriangulo: ()=> {
        let resulAreaTriangulo = (calcularAreas.baseTriangulo  * calcularAreas.AlturaTriangulo ) / 2;
        console.log(`La altura del triángulo : Altura ${calcularAreas.AlturaTriangulo}cm `);
        console.log(`La base del triángulo : Base ${calcularAreas.baseTriangulo}cm `);
        console.log(`El área del triángulo :  ${resulAreaTriangulo}cm `);
    },    
    calcularPerimetroCirculo: ()=> {
        let diametro = calcularAreas.radioCirculo  * 2;
        let resulPerimtroCirculo = ( diametro  * calcularAreas.PI );
        console.log(`El perimetro del Circulo :  ${resulPerimtroCirculo} cm `);
    },    
    calcularAreaCirculo: ()=> {
        let resulAreaCirculo = ( calcularAreas.radioCirculo  * calcularAreas.radioCirculo ) * calcularAreas.PI;
        console.log(`El área del Circulo :  ${resulAreaCirculo} cm `);
    },    

};//fin de la esctrutura


    calcularAreas.init();

😮 Genial esta clase, no sabia eso de

console.gorup() y console.groupEnd();

se pueden usar las comas para concatenar con consol.log

console.log(
    "Los lados del tríangulo son: ",
    ladoTriangulo1, "cm", 
    ladoTriangulo2, "cm",
    baseTriangulo, "cm"
);

Operadores Aritméticos
¿Como saber cuando es necesario o no el uso de los paréntesis en las operaciones?
Es importante conocer los operadores la jerarquía de los operadores aritméticos según su grado de prioridad.

Un ejemplo puede ser calcular el area del triangulo.
¿Son necesarios los paréntesis al calcular el área del triangulo?
Creo que al calcular el área del triangulo los paréntesis resultan innecesarios, ya que en este caso el jerarquía de los operadores aritméticos * y / es el mismo por lo tanto las operaciones se realizaran de izquierda a derecha. Se puede comprobar esto simplemente realizando la operación omitiendo los paréntesis por la que el resultado debería ser el mismo.

  • Código clase:
<
// Código del cuadrado
console.group("Cuadrados");
const ladoCuadrado = 5;
console.log("Los lados del cuadrado miden: " + ladoCuadrado + "cm");

const perimetroCuadrado = ladoCuadrado * 4;
console.log("El  perimetro del cuadrado es: " + perimetroCuadrado + "cm");

const areaCuadrado = ladoCuadrado * ladoCuadrado;
console.log("El área del cuadrado es: " + areaCuadrado + "cm^2");
console.groupEnd();

//Códgo del triangulo
console.group("Triangulos")
const ladoTriangulo1 = 6;

const ladoTriangulo2 = 6;

const baseTriangulo = 4;


console.log(
    "Los lados del triangulo miden: " 
    + ladoTriangulo1 
    + "cm, " 
    + ladoTriangulo2 
    +"cm, " 
    + baseTriangulo 
    + "cm"
    );

const alturaTriangulo= 5.5;
    console.log("La altura del triángulo es de: " + alturaTriangulo);

const perimetroTriangulo = ladoTriangulo1 + ladoTriangulo2 + baseTriangulo;
    console.log("El perimetro del triángulo es: " + perimetroTriangulo + "cm")

const areaTriangulo = (baseTriangulo * alturaTriangulo) / 2;
    console.log("El área del triángulo es: " + areaTriangulo + "cm^2");

    console.groupEnd();


//Códgo del triangulo
console.group("Círculos");

// Radio
const radioCirculo = 4;
    console.log("El radio del circulo es: " + radioCirculo + "cm");

// Diámetro
const diametroCirculo= radioCirculo * 2;
    console.log("El diámetro del circulo es: " + diametroCirculo + "cm");

// Pi
//const PI = 3.1415;
const PI = Math.PI;
    console.log("PI es: " + PI);

// Circunferencia
const perimetroCirculo = diametroCirculo * PI;
    console.log("El perímetro del círculo es: " + perimetroCirculo + "cm");

// Área
const areaCirculo = (diametroCirculo * radioCirculo) * PI;
    console.log("El área del círculo es: " + areaCirculo + "cm^2");

console.groupEnd();
> 

Resumen de la clase usando TEMPLATE LITERALS

// Medidas del cuadrado
console.group('Cuadrado');
    const ladoCuadrado = 5;
    console.log(`Los lados del cuadrado miden: ${ladoCuadrado}cm`);

    const perimetroCuadrado = ladoCuadrado * 4;
    console.log(`El perimetro del cuadrado es: ${perimetroCuadrado}cm`);

    const areaCuadrado = ladoCuadrado * ladoCuadrado;
    console.log(`El área del cuadrado es: ${areaCuadrado}cm2`);
console.groupEnd();

// Medidad del triangulo
console.group('Triangulo');
    const ladoTriangulo1 = 6;
    const ladoTriangulo2 = 6;
    const baseTriangulo  = 4;
    const alturaTriangulo= 5.5;

    console.log(`Los lados del triangulo miden ${ladoTriangulo1}cm, ${ladoTriangulo2}cm, y la base mide ${baseTriangulo}`);
    console.log(`La altura del triangulo es de ${alturaTriangulo}cm`);

    const perimetroTriangulo = ladoTriangulo1 + ladoTriangulo2 + baseTriangulo;
    console.log(`El perimetro del triangulo es ${perimetroTriangulo}cm`);

    const areaTriangulo = (baseTriangulo * alturaTriangulo) / 2;
    console.log(`El area del triangulo es de ${areaTriangulo}cm2`);

console.groupEnd();

// Medida del circulo
console.group('Circulo');

    const radioCirculo = 4;
    console.log(`El radio del circulo es de ${radioCirculo}`);

    const diametroCirculo = radioCirculo * 2;
    console.log(`El diametro del circulo es de ${diametroCirculo}`);

    const PI = Math.PI;
    console.log(`PI es ${PI}`);


    const perimetroCirculo = diametroCirculo * PI;
    console.log(`El perimetro del circulo es de ${perimetroCirculo}`);

    const areaCirculo = (radioCirculo * radioCirculo) * PI; 
    console.log(`El area del circulo es de ${areaCirculo}`);


console.groupEnd();

si quieren reducir los decimales pueden encerrar la operacion que estan asignando entre parentesis seguido de .toFixed y el numero de decimales que desean
( operacion ).toFixed(2);

Otra forma de definir variables es usando destructuring assignment, en este caso, lo utilice para definir los lados del triangulo.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Para ver una linea de código muy larga sin hacer scroll, en Visual Studio Code podemos usar el comando Ctrl + Z

Si el código que escriben en Vscode es tan largo que se les sale de la pantalla presionen Alt+Z y se los va a ordenar para que todo se pueda visualizar.

No tenia idea de la función:

// apertura
console.group(“nombre del grupo”);

// cierre
console.end();

Esta genial, la empezare a aplicar ya mismo 😎

El console.group es una auténtica delicia. 🤤

let bd = [1, 2, 3, 4, 5]
let bD = [“uno”, “dos”, “tres”, “cuatro”, “cinco”]
function vector(array) {
array.forEach(function (elemt) {
console.log(elemt)
});
}
vector(bD)

console.group(""); // podemos darle un nombre a un grupo para darle mensajitos para agrupar console.log

Excelente curso, clase y profe!!

Codigo de la clase:

//Código del Cuadrado
console.group("Cuadrados")
//Lado del cuadrado
const ladoCuadrado = 5;
console.log("Los lados del cuadrado miden: " + ladoCuadrado + " cms");
//Perimetro del cuadrado
const perimetroCuadrado = ladoCuadrado * 4;
console.log("El perimetro del cuadrado mide: " + perimetroCuadrado + " cms");
//Area del cuadrado
const areaCuadrado = ladoCuadrado * ladoCuadrado;
console.log("El área del cuadrado mide: " + areaCuadrado + " cms^2");
console.groupEnd();

//Código del Triangulo
console.group("Triangulo");
//Lados de triangulo
const ladoTriangulo1 = 6;
const ladoTriangulo2 = 6;
const baseTriangulo = 4;
const alturaTriangulo =5;
console.log("Los lados del triángulo miden: " + ladoTriangulo1 + " cms, " + ladoTriangulo2 + " cms, " + baseTriangulo + "cms.");
console.log("La altura del triangulo mide: " + alturaTriangulo + " cms");
//Perimetro del triangul
const perimetroTriangulo = ladoTriangulo1 + ladoTriangulo2 + baseTriangulo;
console.log("El perimetro del triangulo mide: " + perimetroTriangulo + " cms");
//Area del triangulo
const areaTriangulo = (baseTriangulo * alturaTriangulo)/2;
console.log("El área del triangulo mide: " + areaTriangulo + " cms^2");
console.groupEnd();

//Código del Circulos
console.group("Circulos");
//Radio
const radioCirculo = 4;
console.log("El radio del circulo es " + radioCirculo + " cms.");
//Diametro
const diametroCirculo = radioCirculo * 2;
console.log("El diametro del circulo es " + diametroCirculo + " cms.");
// PI
const PI = Math.PI;
console.log("PI es " + PI + ".");
// Perimetro
const perimetroCirculo = diametroCirculo * PI;
console.log("El perimetro del circulo es " + perimetroCirculo + " cms.");
//Area
const areaCirculo = PI * (radioCirculo**2);
console.log("El area del circulo es " + areaCirculo + " cms.");
console.groupEnd();

alt + z = para que el texto se ajuste

Practiquen su inglés

// Square

console.group('Square');

const squareSide = 5;
console.log(`Square sides are ${squareSide}cm`);

const squarePerimeter = squareSide * 4;
console.log(`Square perimeter is ${squarePerimeter}cm`);

const squareArea = squareSide * squareSide;
console.log(`Square area is ${squareArea}cm^2`);

console.groupEnd('Square');

// Triangle

console.group('Triangle');

const triangleSide1 = 6;
const triangleSide2 = 6;
const triangleBase = 4;
console.log(`Triangle sides are ${triangleSide1}cm, ${triangleSide2}cm and ${triangleBase}cm`);

const triangleHeight = 5.5;
console.log(`Triangle height is ${triangleHeight}cm`);

const trianglePerimeter = triangleSide1 + triangleSide2 + triangleBase;
console.log(`Triangle perimeter is ${trianglePerimeter}cm`);

const triangleArea = (triangleBase * triangleHeight) / 2;
console.log(`Triangle area is ${triangleArea}cm^2`);

console.groupEnd('Triangle');

// Circle

console.group('Circle');

const circleRadius = 4;
console.log(`Circle radius is ${circleRadius}cm`);

const circleDiameter = circleRadius * 2;
console.log(`Circle diameter is ${circleDiameter}cm`);

const PI = Math.PI;
console.log(`PI is ${PI}`);

const circlePerimeter = PI * circleDiameter;
console.log(`Circle perimeter is ${circlePerimeter}cm`);

const circleArea = PI * circleRadius * circleRadius;
console.log(`Circle area is ${circleArea}cm^2`);

console.groupEnd('Circle');

Intetendo mejorar la interaccción con el usuario!

//Cuadrado

document.write("<h2>Cuadrado</h2>")

var ladoCuadrado = prompt("cuantos centimetros mide los lados del cuadrado?");
document.write("Los lados del cuadrado miden " + ladoCuadrado + "cm" + "</br>");

var perimetroCuadrado = ladoCuadrado * 4;

document.write("El perimetro del cuadrado es de " + perimetroCuadrado + "cm" + "</br>");

var areCuadrado = ladoCuadrado * ladoCuadrado;

document.write("El area del cuadrado es de " + areCuadrado + "cm2");

//Triangulo

document.write("<h2>Triangulo</h2>")

var ladosIguales = prompt("cuantos centimetros mide los 2 lados iguales del triangulo?");

var baseTriangulo = prompt("cuantos centimetros mide la base del triangulo?");


document.write("Los lados A y B del triangulo miden " + ladosIguales + "cm," + "y la base mide " + baseTriangulo + "cm" + "</br>");

var perimetroTriangulo = Number(ladosIguales )+ Number(baseTriangulo);

document.write("El perimetro del triangulo es de " + perimetroTriangulo + "cm" + "</br>");

var ladosAlCuadrado = Math.pow(ladosIguales,2);
var baseAlcuadrado = Math.pow(baseTriangulo,2) ;

var alturaTriangulo = Math.sqrt(ladosAlCuadrado - (baseAlcuadrado / 4));

console.log(alturaTriangulo);

var areaTriangulo = (baseTriangulo * alturaTriangulo) / 2;

var menosNum = Math.round(areaTriangulo);

document.write("El area del triangulo es de " + menosNum+ "cm2");

//Circulo

document.write("<h2>Circulo</h2>")

var radio = prompt("cuantos centimetros mide el radio del circulo?");

document.write("El radio del circulo mide " + radio + "cm" + "</br>");

var diametro = radio * 2;

document.write("El diametro del circulo mide " + diametro + "cm" + "</br>");

var circunferencia = diametro * Math.PI;

document.write("La circunferencia del circulo es de " + Math.round(circunferencia) + "cm2");




me esta gustando mucho el curso esta muy entretenido 😃

Para calcular la altura del Triángulo tmb se puede usar esta fórmula:

var alturaDelTriangulo = ladouno * Math.sin(Math.acos((baseTriangulo/2)/ladouno));

En esta imagen se explica un poco mejor:

En algunos navegadores, por lo menos en Edge, la etiqueta dentro del console.group(label) no se reconoce, pero el grupo se colapsa si no le pones la etiqueta sino solo console.group().
Al parecer este método es equivalente al método console.groupcollapsed() .

Para hallar el área del círculo:

//Área Círculo
const areaCircle = pi* Math.pow(radioCircle,2);

Pueden usar alt+z para que el código se acomode a la pantalla

// Codigo del cuadrado
console.group("cuadrado")
const ladoCuadrado = 5;
console.log(`Lados del cuadrado miden ${ladoCuadrado}cm`);

const perimetroCuadrado = ladoCuadrado * 4;
console.log(`El perimetro del cuadro es ${perimetroCuadrado}cm`);

const areaCuadrado = ladoCuadrado * ladoCuadrado;
console.log(`El area del cuadro es: ${areaCuadrado}cm`);
console.groupEnd();


// Codigo del trui
console.group("Triangulos");
const ladoTriangulo1 = 6;
const ladoTriangulo2 = 6;
const baseTriangulo = 6;
const alturaTriangulo = 5.5;

console.log(`La altura del triangulo es: ${alturaTriangulo}cm`);
const areaTriangulo = (baseTriangulo * alturaTriangulo) / 2;
console.log(`La base del triangulo es: ${areaTriangulo}cm²`);
console.log(`El perimetro del triangulo es: ${ladoTriangulo1 + ladoTriangulo2 + baseTriangulo}cm`);
console.groupEnd();

console.group("Circulo");

const radioCirculo = 4.5;
const diametroCirculo = 6.5;
const PI = Math.PI;

console.log(`El area del circulo es: ${Math.round((PI * Math.pow(radioCirculo, 2)))}cm`);
console.log(`El diametro del circulo es: ${Math.round(diametroCirculo * PI)}cm`);

console.groupEnd();
// Código del cuadrado

console.group('Cuadrado')
const ladoCuadrado = 5;
console.log(`Lado del cuadrado, mide:  ${ladoCuadrado}cm`);

const perimentroCuadrado = ladoCuadrado * 4;
console.log(`El perímetro del cuadrado es:  ${perimentroCuadrado}cm^2`);

const areaCuadrado = ladoCuadrado * ladoCuadrado;
console.log(`El área del cuadrado es:  ${areaCuadrado}cm`);
console.groupEnd()

// Código del triangulo
console.group('TRiangulo')
const lado1Triangulo = 6;
const lado2Triangulo = 6;
const baseTriangulo = 4;
console.log(`Lados del triangulo miden: ${lado1Triangulo}cm, ${lado2Triangulo}cm, ${baseTriangulo}cm`);

const alturaTRiangulo = 5.5
console.log(`Altura: ${alturaTRiangulo}`);

const perimentroTriangulo = lado1Triangulo + lado2Triangulo + baseTriangulo;
console.log(`Perimetro: ${perimentroTriangulo}`);

const areaTRiangulo = (baseTriangulo * alturaTRiangulo) / 2;
console.log(`Àrea: ${areaTRiangulo}`)
console.groupEnd()

// Agrupar console.log
console.group() // Inicio
console.groupEnd() // Fin```

Si no han revisado la guía de comandos y quieren saber como eliminar una linea completa del código en Windows es:
Ctrl + shift + K obviamente es con K de Kitar linea

Otra forma de indicar el cuadrado de un lado es con doble asterisco, que significa exponente.

const areaCuadrado = ladoCuadrado ** 2;
//Código del cuadrado
console.group("Cuadrados");
const ladoCuadrado = 5;
console.log("Los lados del cuadrado miden: " + ladoCuadrado + "cm");

const perimetroCuadrado = ladoCuadrado * 4;
console.log("El perímetro del cuadrado es: " + perimetroCuadrado + "cm");

const areaCuadrado = ladoCuadrado * ladoCuadrado;
console.log("El área del cuadrado es: " + areaCuadrado + "cm2");
console.groupEnd();

//Código del triángulo
console.group("Triángulos");
const ladoTriangulo = 6;
const ladoTriangulo2 = 6;
const baseTriangulo = 4;
console.log(
    "Los lados del triángulo miden:"
    + ladoTriangulo
    + "cm, "
    + ladoTriangulo2
    + "cm, "
    + baseTriangulo
    + "cm"
);
const alturaTriangulo = 5.5;
console.log("La altura del triángulo es de " + alturaTriangulo + "cm");

const perimetroTriangulo = ladoTriangulo + ladoTriangulo2 + baseTriangulo;
console.log("El perímetro del triángulo es: " + perimetroTriangulo + "cm");

const areaTriangulo = (baseTriangulo * alturaTriangulo) / 2;
console.log( "El área del triángulo es: " + areaTriangulo + "cm2");

console.groupEnd();

//Codigo del Circulo
console.group("Círculos");

//Radio
const radioCirculo = 4;
console.log("El radio del círculo es: " + radioCirculo + "cm");

//Diametro
const diametroCirculo = radioCirculo * 2;
console.log("El diámetro del círculo es: " + diametroCirculo + "cm");

//PI
//const pi = 3.1416;
const pi = Math.PI;
console.log("PI es: " + pi);

//Circunferencia
const perimetroCirculo = diametroCirculo * pi;
console.log("El perímetro del círculo es: " + perimetroCirculo + "cm");

//Area
const areaCirculo = pi * (radioCirculo * radioCirculo);
console.log("El área del círculo es: " + areaCirculo + "cm2");

console.groupEnd();

El símbolo " ^ ", se coloca con Alt + 94

console.log(“Figuras Geométricas”)

console.group(“Cuadrado”);
const lado1 = 5
console.log(“los lados del cuadrado miden :” + lado1 +“cm”);

const perimetroCuadrado = (lado1 * 4);

console.log(“El perimetro del cuadrado es :” + perimetroCuadrado +“cm”);

const areaCuadrado = (lado1 * lado1);

console.log(“El área del cuadrado es:” + areaCuadrado +“cm^2” )
console.groupEnd();

console.group(“Triángulo”);
const cateto =6;
const cateto2 =6;
const base =4;
const altura = 5.5;
console.log("los catetos del triángulo miden: "+ cateto + "cm " + cateto2 + “cm”);
console.log("La base del Triángulo es: " + base + “cm” );
console.log("La altura del triángulo es: "+ altura +“cm”);
const perimetroTriangulo = (cateto+cateto2+base);
console.log("El perímetro del Triángulo es: "+perimetroTriangulo +“cm”);
const areaTriagulo = (base*altura)/2;
console.log("El área del Triángulo es: " + areaTriagulo +“cm”);

console.groupEnd();

console.group(“Círculo”);
const radio = 4;
const diametro = radio2;
const pi = Math.PI;
const circunferencia = diametro * pi;
const area = (radio
radio)* pi;
console.log("El Radío del Círculo es : " + radio +“cm”);
console.log("El Diámetro de Círculo es: " + diametro +“cm”);
console.log(“PI del Círculo es :” + pi);
console.log("La circunferencia de Círculo es: " + circunferencia +“cm”);
console.log("El área del Círculo es: " + area+“cm”);
console.groupEnd();

💻Intente realizar primero el ejercicio por mi cuenta y luego revisarlo a la par para ver que tan diferente me resultaba.
Me alegra saber que no hubo gran diferencia en mi intento y el resultado final de Juan, la mas relevante fue que utilice funciones flecha para cada operación.
Mi código se ve un poco más desordenado, pero sin duda me ayudo mucho para repasar ECMAS6😁

/* CUADRO */
//declaración de variables y funciones para el cuadro
console.group("cuadro");
const ladoCuadrado = 3;
const perimetroCuadro = lado => lado * 4;
const areaCuadro = lado => lado**2;

//Ejecución del programa del cuadro
console.log(`Los lados de tu cuadrado miden: ${ladoCuadrado}cm`);
console.log(`El perimetro es igual a: ${perimetroCuadro(ladoCuadrado)}cm`);
console.log(`Y el área es igual a: ${areaCuadro(ladoCuadrado)}cm²`);
console.groupEnd();


/* TRIANGULO */
//declaración de variables y funciones
console.group("Triangulo");
const ladoTriangulo1 = 6;
const ladoTriangulo2 = 6;
const baseTriangulo = 4;
const alturaTriangulo = 5.5;

const perimetroTriangulo = (lado1, lado2, lado3) => {
    return console.log(`El perimetro es igual a ${lado1 + lado2 + lado3}`);
}

const areaTriangulo = (base, altura) => {
    console.log(`El área es igual a ${(base * altura)/2}`);
}

//Ejecución el programa Triangulo
console.log(`Los lados del triangulo son ${ladoTriangulo1}cm, ${ladoTriangulo2}cm y ${baseTriangulo}cm`);
console.log(`La altura es de ${alturaTriangulo}`);

perimetroTriangulo(ladoTriangulo1, ladoTriangulo2, baseTriangulo);
areaTriangulo(baseTriangulo, alturaTriangulo);

console.groupEnd();


/* CIRCULO */
//declaración de variables y funciones
console.group("circulo");
const radio = 3;

const circunferencia = radio => {
    console.log(`El perimetro es igual a ${Math.PI * radio * 2}`);
}

const areaCirculo = radio => {
    console.log(`El área es igual a ${radio**2 * Math.PI}`);
}

//ejecución de código
console.log(`El radio de tu circulo es igual a ${radio}cm`);
circunferencia(radio);
areaCirculo(radio);
console.groupEnd();

En lugar de inventar la altura del triángulo (que no siempre será fidedigna con las medidas dadas), es mejor emplear la fórmula de Herón, que nos permite conocer el área de un triángulo tan solo conociendo las medidas de sus tres lados.

La fórmula en JS es la siguiente:

const s=perimetroTriangulo/2;
const areaTriangulo=(s*(s-ladoTriangulo1)*(s-ladoTriangulo2)*(s-ladoTriangulo3))**(1/2)
console.log("El area del triangulo mide "+areaTriangulo+"cm^2")

De esta manera, el área del triángulo dado inicialmente sería de:

11.313708498984761cm^2 

No conocía la opción de agrupar mensaje en consola, que buen comando para organizar las salidas a consola.

Esa funcionalidad del console.group no la sabía… buen tip

Algo que también les puede servir por si aún así son demasiados grupos es usar la siguiente función:

#Abre
console.groupCollapsed("nombre que desees")
#Cierra
console.groupEnd();

Esta nos permite cargar todos los grupos colapsados como si fuera un index de grupos

😃

Si le haces un console.log() al mismo console, descubres esto.

Para entender mejor el circulo

Mi código y resumen de la clase

// Llamando a los lados del cuadrado, sacando el perimetro y area
console.group("Cuadrados");
const sidesqr = prompt("Ingrese la medida del lado del cuadrado: ");

console.log("Los lados del cuadrado miden: " + sidesqr +"cm");

const perimetersqr = 4 * sidesqr

console.log("El perimetro del cuadrado mide: " + perimetersqr + "cm");

const areasqr = sidesqr * sidesqr

console.log("El area del cuadrado mide: " + areasqr + "cm2");
console.groupEnd();

// Triangulo
console.group("Triangulos");
const side1tri = Number(prompt("Ingrese la medida de algun lado del triangulo: "));
const side2tri = Number(prompt("Ingrese la medida de otro lado del triangulo: "));
const basetri = Number(prompt("Ingrese la medida de la base del triangulo: "));
const heighttri = Number(prompt("Ingrese la medida de la altura del triangulo: "));

console.log("un lado del triangulo mide: " + side1tri +"cm");
console.log("un lado del triangulo mide: " + side2tri +"cm");
console.log("la base del triangulo mide: " + basetri +"cm");
console.log("la altura del triangulo mide: " + heighttri +"cm");


const perimetertri = side1tri + side2tri + basetri

console.log("El perimetro del triangulo mide: " + perimetertri + "cm");

const areatri = (basetri * heighttri) / 2

console.log("El area del triangulo mide: " + areatri + "cm2");
console.groupEnd();

//Circulo

console.group("Circulo")
//Radio
const radiocircl = Number(prompt("Ingrese el radio del circulo: "));
console.log("El radio del circulo es: "+ radiocircl + "cm");

//Diametro
const diametercircl = radiocircl * 2
console.log("El diametro del circulo es: "+ diametercircl + "cm");

//PI
const PI = Math.PI;

//Circunferencia
const perimetercircl = diametercircl * PI
console.log("El perimetro del circulo es: "+ perimetercircl + "cm");

//Area
const areacircl = (radiocircl * radiocircl) * PI
console.log("El area del circulo es: " + areacircl + "cm2");
console.groupEnd

Recomiendo instalar el plugin “Live Server” en visual studio. Con éste plugin, todos los cambios hechos en el código se verán reflejados en tiempo real en el navegador, además de no necesitar copiar el path del html y colocarlo en el navegador, sino que simplemente con dar click en el botón “Live” en la parte inferior de visual studio, se abrirá automáticamente en el navegador.

Se puede calcular la altura de un triangulo a partir de sus lados si sabemos que la altura es igual a multiplicar cualquiera de los lados (que no sea la base) por el seno del ángulo que forma con la base, de igual forma se puede calcular cualquier ángulo del triangulo partiendo de sus lados

Este es el código con el que logré calcular la altura a partir de los lados del triangulo.

var a = 4;
var b = 5;
var c = 6;
var height;
var angle;


function calculateAngle(A,B,C){
        
        angle =  Math.acos((Math.pow(A,2)+
         Math.pow(C,2) - 
         Math.pow(B,2)) / 
        (2 * A * C));
        return angle;
}
function calculateHeight(Angle,side){
    var Height;
    Height = Math.sin(Angle) * side; ;
    return Height;
}
console.log(calculateAngle(a,b,c));

console.log(calculateHeight(angle,a));

Cabe aclarar que Javascript ya cuenta con metodos para calcular funciones trigonometricas con el objeto Math, pueden ver la documentación en este enlace https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Math

Anexo el código de la clase;

// Código del Cuadrado

console.group('Cuadrado');
const ladoCuadrado = 5;
console.log('Los lados del cuadrado miden: ' + ladoCuadrado + 'cm');
const perimetroCuadrado = ladoCuadrado * 4;
console.log('El perímetro del cuadrado es: ' + perimetroCuadrado + 'cm');
const areaCuadrado = ladoCuadrado * ladoCuadrado;
console.log('El área del cuadrado es: ' + areaCuadrado + 'cm^2');
console.groupEnd();
// Código del Triángulo
console.group('Triángulo');
const ladoTriangulo1 = 6;
const ladoTriangulo2 = 6;
const baseTriangulo = 4;
const alturaTriangulo = 5.5;

console.log('La altura del triángulo mide: ' + alturaTriangulo + 'cm');
console.log('Los lados del triángulo miden: ' + ladoTriangulo1 + 'cm,' + ladoTriangulo2 + 'cm,' + baseTriangulo + 'cm');

const perimetroTriangulo = ladoTriangulo1 + ladoTriangulo2 + baseTriangulo;
console.log('El perímetro del triángulo es: ' + perimetroTriangulo + 'cm');
const areaTriangulo = (baseTriangulo * alturaTriangulo) / 2;
console.log('El área del triángulo es: ' + areaTriangulo + 'cm^2');
console.groupEnd();


// Código del Círculo
console.group('Círculo');

const radioCirculo = 4;
console.log('El radio del Círculo es: ' + radioCirculo + 'cm');

const diametroCirculo = radioCirculo * 2;
console.log('El diametro del Círculo es: ' + diametroCirculo + 'cm');

const PI = Math.PI;
console.log('El valor de PI es: ' + PI);

const perimetroCirculo = diametroCirculo * PI;
console.log('El perímetro del Círculo es: ' + perimetroCirculo + 'cm');

const areaCirculo = (radioCirculo * radioCirculo) * PI;
console.log('El área del Círculo es: ' + areaCirculo + 'cm^2');

console.groupEnd();

No conocía sobre el console.group. Muy interesante

La utilidad del console.group es muy buena

Tip

No es necesario colocar parentesis a la operacion para sacar area del triangulo.

Esto es por el orden de procedencia.
La operacion es una multiplicacion de la base por la altura del triangulo y eso dividido por 2: triangleBase * triangleHeight / 2
La multiplicacion y la division comparten el mismo nivel de procedencia (como la suma y la resta) por lo que se resolveran las operaciones de izquierda a derecha.

Aprendiendo cada Dia 😄

¡Muy buena clase! De fácil entendimiento. 👏👏

Para agrupar nuestros console.logs, podemos hacer los console.group, que nos ayudan a mantener el código más limpio. Lo iniciamos: console.group("nombre del grupo"); y para terminar de encapsular, hacemos el console.groupEnd();

Para calcular el área del circulo pueden omitir el radio y pasar directamente al diámetro y la formula del área no cambia mucho, en código quedaría algo así:

const areaCirculo = (Math.PI*Math.pow(diametroCirculo, 2))/4;

Para que todo el texto (por muy largo que sea) entre en tu pantalla sin problema debes presionar ALT + z, y así te evitas el drama del minuto 8:10 .