Reto: simulación de estudio de salarios

22/24

Lectura

En este módulo pusimos en práctica todo lo que aprendimos en los talleres pasados para calcular la mediana de salarios de tu país (aunque por ahora son solo datos ficticios).

Para completar el reto de este último taller solo debes dejar volar tu imaginación y usar todas las herramientas que aprendiste para expandir tu análisis salarial.

¿Cómo? Como quieras

Puedes calcular la mediana de ingresos no fijos, capacidad de ahorro, capacidad de endeudamiento, recolección de impuestos, diferencia salarial, relación entre formalidad/informalidad y pobreza/riqueza…

El reto es de tema libre. Escoge la pregunta que prefieras, incluso mejor si has vivido una situación parecida alguna vez, resuélvela y muéstranos tu solución en los comentarios.

Para lograrlo solo debes seguir los siguientes pasos:

  • Plantea muy detalladamente el problema/análisis/cálculo/hipótesis que quieres resolver.
  • Encuentra las fórmulas necesarias para resolver el dilema que seleccionaste.
  • Define las variables y funciones para resolver tus fórmulas.
  • Presenta los resultados de tu informe en una página web dinámica usando HTML, CSS y JavaScript.
  • Organiza y documenta tu código para que sea más fácil de leer y entender.
  • Publícalo en tu repositorio de GitHub y muéstranos el link en la sección de comentarios.

Te recomiendo que inicies con una pregunta sencilla. Pon un tiempo límite generoso, desarrolla tu proyecto hasta el final y publica tus resultados en la sección de comentarios.

Luego vuelve a empezar con una pregunta más compleja. Y así sucesivamente hasta que tu estudio de salarios sea el proyecto del que más orgullosa te puedas sentir.

Estoy seguro de que los siguientes Platzi Lives serán una gran fuente de inspiración:

Complementos

Si sigues adelante con la Escuela de Desarrollo Web, vas a aprender muchas más herramientas de JavaScript para consultar datos desde el backend y manipular el DOM aún más intensamente.

También puedes complementar tu ruta de aprendizaje con la Escuela de Data Science. Ahí aprenderás a muchísima, muchísima más profundidad cómo limpiar, consultar y presentar informes a partir de un análisis de datos.

Además, en la Escuela de Finanzas e Inversiones puedes iniciar tu educación, planeación y evaluación financiera para todo tipo de proyectos, ya sea con fines personales, emprendedores o incluso inversionistas.


Espero ver tus retos en la sección de comentarios. En la próxima clase, como premio a todo tu esfuerzo, publicaremos nuestros proyectos en internet con ayuda de una plataforma llamada GitHub Pages. 💚

Aportes 80

Preguntas 2

Ordenar por:

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

Luego de todo un día, pude hacer un programa que calcula el interes simple o compuesto de tu inversión 😄
Aquí puedes ver el proyecto

Les comparto mi proyecto final en las versiones mobile, tablet y desktop. Este proyecto tenia dos objetivos: cumplir con los requerimientos de diseño y estructura sugeridos por la página donde descargue el recurso, y segundo poner en práctica lo aprendido en javascript implementando html y css. Estoy contenta y conforme con el resultado. Aún mucho por aprender, cositas por mejorar pero poco a poco. Todo es un proceso. Agradezco criticas constructivas.



Les comparto el reto, elegí hacer un sistema que calcule la amortización de capital de un préstamo con el método francés.
Aquí para ver el proyecto.😊

Yo hice un registro de gastos e ingresos.
Mobile


Web

Hice una pequeña calculadora de interés simple e interés compuesto:

Código en TypeScript:

const resultadosInversionesParrafo = document.getElementById('resultadosInversiones') as HTMLParagraphElement

const interesSimple = (capital: number, interes: number, tiempo: number): number => {
  interes = interes / 100
  return capital * interes * tiempo
}

const interesCompuesto = (capital: number, interes: number, tiempo: number): number => {
  interes = interes / 100
  return capital * Math.pow((1+interes),tiempo)
}

function calculaInversiones() {
  const inputDinero = document.getElementById('inversion_inicial') as HTMLInputElement
  const valueInputDinero: number = parseInt(inputDinero.value)

  const inputTiempo = document.getElementById('tiempo_invertido') as HTMLInputElement
  const valueInputTiempo: number = parseInt(inputTiempo.value)

  const inputInteres = document.getElementById('tasa_interes') as HTMLInputElement
  const valueInteres: number = parseInt(inputInteres.value)

  const resultadoInteresSimple = interesSimple(valueInputDinero, valueInteres, valueInputTiempo)
  const resultadoInteresCompuesto = interesCompuesto(valueInputDinero, valueInteres, valueInputTiempo)
  resultadosInversionesParrafo.innerText = `Inversión obtenida con interés simple: $${resultadoInteresSimple} | Inversión obtenida con interés compuesto: $${resultadoInteresCompuesto}`
}

Código CSS

body {
  font-family: 'Quicksand', sans-serif;
  display: grid;
  height: 85vh;
  place-items: center;
}

.main {
  padding-inline: 20px;
}

.main p,
#resultadosInversiones {
  text-align: justify;
  font-size: 1.4rem;
}

form {
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
  justify-content: center;
  align-items: center;
}

form input {
  margin-block-end: 15px;
}


form input[type="number"] {
  font-size: 1.2rem;
}

form button {
  width: fit-content;
  font-size: 1.2rem;
}

Código 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>Interés simple vs interés compuesto</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
</head>
<body>
  <header>
    <h1 class="h1_title">Diferencia entre interés simple 💰 e interés compuesto 📈🤑</h1>
  </header>
  <main class="main">
    <p>Te mostraré de una manera muy sencilla porqué el interés compuesto es una maravilla. Aquí tendrás
      una comparación entre 2 tipos de inversiones, ambas te darán más dinero al finalizar un periodo de tiempo.
      Cuando más tiempo dejes pasar y más dinero hayas invertido, más grande será la diferencia.
    </p>
  </main>
  <form action="">
    <label for="inversion_inicial">Ingresa la cantidad de dinero que vas a invertir</label>
    <input type="number" name="" id="inversion_inicial" min="1">
    <label for="tiempo_invertido">Ingresa los años vas a dejar crecer el dinero</label>
    <input type="number" name="" id="tiempo_invertido" min="1">
    <label for="tasa_interes">Ingresa la tasa de interés</label>
    <input type="number" name="" id="tasa_interes" min="1">
    <button type="button" onclick="calculaInversiones()">Calcular inversión</button>
  </form>
  <p id="resultadosInversiones"></p>
  <script src="interes_S_C.js"></script>
</body>
</html>

Intenté hacer una analisis del costo de vida por ciudad, y de acuerdo a sus ingresos calcular su capacidad de ahorro. (Yo ya habia hecho el curso de asincronismo asi que queria practicar consumiendo una API). Sin embargo no encontré ninguna API gratuita que me provea esos datos, agregré un archivo donde creé una fake API con mi experiencia de gastos mensuales viviendo en mi ciudad. 😅


.

🤓 Aquí mi aporte. Hice un formulario para calcular el monto de cuotas de acuerdo a: monto total de compra, cantidad de meses a pagar y tasa de intéres de tarjeta (o préstamo).

Link de mi repo:
Github - Reto

Evidencia:

De verdad lo veía bien complicado por los métodos y la creación de elementos en el DOM. Pero lo hice🥺.

Hice una mini app de Gastos e Ingresos Personales “iMoney”.

Muchas gracias Juan!


**Hice hasta el diseño en Figma jajaja: **

Mi repo en Git, espero les sirva a los futuros estudiantes:
https://github.com/xxleonx50xx/iMoney

Buenas tardes,

Realice esta pequeña web, que nos permite calcular el ahorro mensual, según el porcentaje que el usuario desee, además le pide gastos obligatorios, permitiendo así calcular la plata disponible mensuakl, donde lo dividi en 4 categorias, transporte, comida, servicios y libres, a cada item le asigne un porcentaje basado en datos reales en mi caso de gastos. para que solo el usuario agregue lo que gasta de cada item y le de una relación en porcentaje de la plata que le queda según el monto que tenia disponible.

Hice capacidad de endeudamiento. Interesante el concepto🤔

function calcularCPEMin(ingresos, gastos) {
    const ingNeto = ingresos - gastos;

    const treintaPorciento = (ingNeto * 30) / 100;
    return treintaPorciento;
}

function calcularCPEMax(ingresos, gastos) {
    const ingNeto = ingresos - gastos;

    const cuarentaPorciento = (ingNeto * 40) / 100;
    return cuarentaPorciento;
}

function cpEndeudamiento() {
    const inputIngreso = document.getElementById('inputIngresos');
    const valueIng = inputIngreso.value;

    const inputGasto = document.getElementById('inputGastos');
    const valueGasto = inputGasto.value;

    const inputminMax = document.getElementById('minMax');
    const valueminMax = inputminMax.value;

    const validate = valueminMax == '40' ? calcularCPEMax(valueIng, valueGasto) : null;
    const validate2 = valueminMax == '30' ? calcularCPEMin(valueIng, valueGasto) : validate;
    const calcular = validate2;

    const paint = document.getElementById('result');
    paint.innerText = calcular == null ? 'Ingrese 30 o 40' : `Tu capacidad mínima de endeudamiento es de ${calcular}`;
}

Aqui esta el proyecto horas extras para Colombia![
https://mpdesign.com.co/calculadora-de-horas-extras-para-colombia/

Este codigo me dice cual es el valor mayor y menor de una criptomoneda en un determinado perdido, tengo un par de adecuaciones para hacerle e ideas para trabajar, por el momento tengo las ideas , yo creo que me creare un repositorio para esto. 😄

const ADA = []

ADA.push({
    date: "27/06/2021",
    price: 1.2626,
})

ADA.push({
    date: "26/06/2021",
    price: 1.2516,
})

ADA.push({
    date: "25/06/2021",
    price: 1.2547,
})

ADA.push({
    date: "24/06/2021",
    price: 1.3570,
})

ADA.push({
    date: "23/06/2021",
    price: 1.2505,
})

ADA.push({
    date: "22/06/2021",
    price: 1.1519,
})

ADA.push({
    date: "20/06/2021",
    price: 1.1757,
})

ADA.push({
    date: "21/06/2021",
    price: 1.4268,
})

// console.log(ADA)

// const calcPromedioMovil = list =>{
//     let promedioMovil = 0

//     for (let i = 0; i < list.length; i++){
//         if(i == 0){
//             promedioMovil = (parseInt(list[i])).toFixed(1)
//         }else{
//             promedioMovil = ((parseInt(list[i]) + parseInt(list[i-1]))/2).toFixed(1)
//         }
//         console.log(promedioMovil) 
//     } 
//     return promedioMovil
// }

const calcularMediaArtimetica = lista => {
    const sumaLista = lista.reduce( //suma cada uno de los elementos
        function(valorAcumulado = 0, nuevoElemento ) {       //Valor acumulado es lo que se vaya sumando en cada una de las iteraciones dentro del array, = 0 es lo que se le pone por defecto
            return valorAcumulado + nuevoElemento
        }
    )      

    const promedioLista = sumaLista / lista.length
    return promedioLista
}


const calculateMedian = list =>{
    let median = list
    median = median.sort(function(a,b){return a-b})
    let half = list.length/2
    if (list.length%2 != 0){
        let medianUnPar = median 
        medianUnPar = medianUnPar[Math.floor(half)]
        return medianUnPar
    } else {
        let medianValue1 = median
        let medianValue2 = median
        medianValue1 = medianValue1[Math.floor(half-0.01)]
        medianValue2 = medianValue2[Math.ceil(half)]
        let medianPar = (medianValue1+medianValue2)/2 
        return medianPar
    }
}

// let result = calculateMedian(list2)

// console.log(calcularMediaArtimetica ([5,10, 15]))

// calcPromedioMovil(list4)


//Ordenando el array

const listOfPrices = ADA.map(
    function (ADA) {
        return ADA.price
    } 
) 
// console.log(listOfPrices)
// const listOfPricesSort = listOfPrices.sort(function(a,b){return a-b})
const listOfPricesSortArrow = listOfPrices.sort(x = (a,b) => a-b) 
// console.log(listOfPrices)
// console.log(listOfPricesSortArrow)

const listOfPricesMedian = calculateMedian(listOfPricesSortArrow)
console.log(`La mediana de precios para el periodo seleccionado es de ${listOfPricesMedian}`)

const listOfPricesMediaAritmetica = calcularMediaArtimetica(listOfPrices).toFixed(2)
console.log(`El precio promedio para el periodo seleccionado es de  ${listOfPricesMediaAritmetica}`)

const maxiumPriceOf = listOfPricesSortArrow[listOfPricesSortArrow.length-1]
const maxiumPriceOfDate = ADA.filter(({price})  => price === maxiumPriceOf).map(x = maxiumPriceOfDate => maxiumPriceOfDate.date)


const mininumPriceOf = listOfPricesSortArrow[0]
const mininumPriceOfDate = ADA.filter(({price}) => price === mininumPriceOf).map(x = mininumPriceOfDate => mininumPriceOfDate.date)

// console.log (maxiumPriceOfAdaDate)

console.log(`El precio mas alto para ADA en el periodo seleccionado fue de ${maxiumPriceOf} el ${maxiumPriceOfDate}`)
console.log(`El precio mas bajo para ADA en el periodo seleccionado fue de ${mininumPriceOf} el ${mininumPriceOfDate}`)

Solucion:

Bueno, en mi anterior empleo teníamos un problema y era el calculo de las horas extras.

Es por esto que realice una posible solución (Solo para Colombia), dependiendo el salario base realiza el calculo de las horas extras diurnas, nocturnas, diurna dominical y nocturna dominical. Este es el repositorio con todos los proyectos del curso y a continuación dejo una muestra de mi solucion:

Buenas tardes aquí dejo mi aporte. Creo que es algo muy simple. Tratare de ir agregándole mas cosas en el futuro

Lo finalizo acá. Más adelante seguiré agregando cosas y mejorandolo a nivel código.

Reto cumplido

Aqui el reto sobre la capacidad de endeudamiento pueden ver el código aqui

El tema que escogí fue:
Los próximos 4 años de la industria Tech en Latinoamérica.
Aquí dejo mi proyecto funcionando:

https://github.com/stovarm/JavaScript-Practico

Dejo el repo del curso. los Archivos que dicen Finanzas Personales son los del proyecto final. Decidi hacer un programa que le permita saber con el valor de sus ingresos como debe distribuir sus gastos y su modelo de ahorro y como con el interes compuesto invirtiendo esos ahorros puede ver la proyección de cuanto va a tener en determinado tiempo.

Hice un sistema sencillo que va agregando los ingresos de cada mes de cada año a un objeto que es tratado luego como mini base de datos para sacar el total de dinero, el promedio mensual y la media. agrega los datos a la pagina con el método innerText y se codifico validación para evitar repetir la combinación mes / año igual

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">
    <link rel="stylesheet" href="./proyecto.css">
    <title>Proyecto</title>
</head>
<body>
    <script src="./proyecto.js"></script>
    <header>
        <h1>Calculo de ingresos</h1>
        <p>Ingrese el monto correspondiente a cada mes de cada año</p>
    </header>
    
    <section class="data-control-container">
        <span>$</span>
        <input type="number" id="moneyIn" placeholder="Ingreso">
        <select name="month" id="month">
            <option value="Enero">Enero</option>
            <option value="Febrero">Febrero</option>
            <option value="Marzo">Marzo</option>
            <option value="Abril">Abril</option>
            <option value="Mayo">Mayo</option>
            <option value="Junio">Junio</option>
            <option value="Julio">Julio</option>
            <option value="Agosto">Agosto</option>
            <option value="Septiembre">Septiembre</option>
            <option value="Octubre">Octubre</option>
            <option value="Noviembre">Noviembre</option>
            <option value="Diciembre">Diciembre</option>
        </select>
        <select name="year" id="year">
            <option value="2019">2019</option>
            <option value="2020">2020</option>
            <option value="2021">2021</option>
        </select>
        <button id="botonGuardar" onclick="agregar()">Agregar</button>
        <div class="buttons">
            <button id="botonTotal" onclick="crearTotal()">Total ingresado</button>
            <button id="botonPromedio" onclick="crearPromedio()">Promedio mensual</button>
            <button id="botonMediana" onclick="mediana()">Mediana de ingesos</button>
        </div>
    </section>

    <section class="display">
        <div class="result-container">
            <h3 id="result-text"></h3>
        </div>
    
        <div class="list-container"></div>
    </section>
</body>
</html> 

SASS

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}

body{
    header{
        height: 100px;
        padding-top: 30px;
        text-align: center;
        background-color: rgb(100, 149, 255);
        box-shadow: 0px 0px 10px black;
    }

    .data-control-container{
        margin-top: 20px;
        text-align: center;

        .buttons{
            margin-top: 20px;
        }
    }

    .display{
        margin-top: 20px;
        text-align: center;

        .result-container{
            height: 28px;
        }
    }
    button{
        width: 130px;
        height: 28px;
        border: none;
        border-radius: 10px;
        background-color: rgb(139, 176, 255);
    }
    input{
        height: 28px;
        border-radius: 10px;
        outline: none;
        border: none;
        background-color: rgb(238, 238, 238);
        padding-left: 10px;
    }
    select{
        height: 28px;
        border-radius: 10px;
        outline: none;
        border: none;
        background-color: rgb(238, 238, 238);
        padding-left: 10px;
    }
}

JavaScript

const dataBase = [];

function verifyExist(month , year){
    let entrieExist = dataBase.find(element => element.year === year && element.month === month); 
    if(entrieExist){
        return true;
        }
    else{
        return false;
    }
};

function esPar(number){
   return number  % 2 == 0;
}


function agregar(){
    const monthSelector = document.getElementById("month");
    const yearSelector = document.getElementById("year");
    const moneyInSelector = document.getElementById("moneyIn");

    const month = monthSelector.options[monthSelector.selectedIndex].text;
    const year = yearSelector.options[yearSelector.selectedIndex].text;
    let moneyIn = moneyInSelector.value;

   
    const existStatus = verifyExist(month, year);

    if(existStatus){
        alert("Ya existe este registro");
    }else{
        dataBase.push({"year":year, "month":month , "moneyIn":moneyIn});
        const container = document.querySelector(".list-container")
        const newElement = document.createElement("P");
        newElement.innerText = month + "    " + year + "    $" + moneyIn;
        container.appendChild(newElement);
    }

}

function crearTotal(){
    const totalMoneyIn = totalizar(dataBase)

    const container = document.querySelector("#result-text");
    container.innerText = "Total ingresado $" + totalMoneyIn; 

}

function totalizar(dataBaseIn){

    const moneyInArray = dataBaseIn.map(function (monthMoney) {   
        return parseInt(monthMoney.moneyIn);
    });
    const totalMoneyIn = moneyInArray.reduce(  
        function (sum = 0, newVal) {
            return sum + newVal;
        }
    )
    return totalMoneyIn
}

function crearPromedio(){
    const medMoney = promedio(dataBase);

    const container = document.querySelector("#result-text");
    container.innerText = "Promedio mensual $" + medMoney;
}

function promedio(dataBaseIn){
    const totalMoneyIn = totalizar(dataBaseIn);
    const databaseLength = dataBaseIn.length;
    return (totalMoneyIn/databaseLength).toFixed(2);
     
}

function mediana(){
    const moneyInArray = dataBase.map(function (monthMoney) {   
        return parseInt(monthMoney.moneyIn);
    });
    moneyInArray.sort((a,b) => a - b);

    const arrayLength = moneyInArray.length;
    let mediana;


    if(esPar(moneyInArray.length)){
        const month1 = moneyInArray[(arrayLength/2) - 1];
        const month2 = moneyInArray[(arrayLength/2)];

        const promedio1y2 = (month1+month2)/2;
        mediana = promedio1y2;

    }else{
        mediana = moneyInArray[parseInt(arrayLength/2)]
    }

     const container = document.querySelector("#result-text");
    container.innerText = "Mediana $" + mediana;

}

Me tarde un poco porque no sabía exactamente que podría utilizar y solo se me ocurrió agregar que calculara los impuestos que obtenia en base al IVA, aunque en verdad no se exactamente como se maneje y añadí una calculadora de desviación estandar, la siguiente imagen muestra como se vería en el navegador.

Este es el código de HTML, es bastante simple porque no se mucho y me he guiado en lo que nos iban enseñando durante el curso.

<!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">
    <link rel="stylesheet" href="css/estilos.css" />
    <title>Salarios</title>
</head>
<body>
    <div id="titulo">
        <h1>Salarios</h1>
        <h2>Añadir los datos para realizar los calculos</h2>
    </div>
    <!-- Probando hacer el frontend -->
    <section>
        <form>
            <div id="formulario">
                <div>
                    <label for="InputNombre">Escribe el nombre de la persona</label>
                    <input id="InputNombre" type="text"/> 
                </div>
                
                <div>
                    <label for="InputSalario">Escribe el salario de la persona</label>
                    <input id="InputSalario" type="number"/> 
                </div>
            </div>
                
            
            <div id="botones">
                <button type="button" onclick="onClickButtonAddPersona()">Añadir persona</button>
                <button type="button" onclick="onClickButtonMean()">Promedio</button>
                <button type="button" onclick="onClickButtonMedian()">Mediana</button>
                <button type="button" onclick="onClickButtonTax()">Impuestos obtenidos</button>
                <button type="button" onclick="onClickButtonStdDeviation()">Desviación estandar</button>
            </div>
            
            <p id="ResultP"></p>
            <div id="limpieza">
                <button type="button" onclick="onClickButtonBorrar()">Limpiar todos los datos</button>
                <button type="button" onclick="onClickButtonBorrarUltimo()">Limpiar ultimo dato</button>
            </div>
        </form>
    </section>
    <p id="redes">@MiKS4ck17</p>
    <script src="analisis.js"></script>
</body>
</html>

Este es mi código de CSS, lo poco que hice fue basado en lo que hacía Freddy en el archivo que utilizaba para trabajar en el curso de Git y Github.

body
{
    color: #696969;
    text-align: center;
    font-family: Arial;
}
h1
{
    color:#2F4F4F;
}
#botones
{
    width: 50%;
    padding: 1em;
    border: 1px solid #DDD;
    margin: 0 auto;
}
#formulario
{
    width: 50%;
    padding: 1em;
    text-align: left;
    border: 1px solid #DDD;
    margin: 0 auto;
}
#ResultP
{
    width: 50%;
    padding: 1em;
    text-align: center;
    border: 1px solid #DDD;
    margin: 0 auto;
}
#titulo
{
    width: 50%;
    padding: 1em;
    text-align: center;
    border: 1px solid #DDD;
    margin: 0 auto;
}
#redes
{
    font-family: Courier;
    width: 50%;
    padding: 1em;
    text-align: right;
    margin: 0 auto;
}

#limpieza
{
    width: 50%;
    padding: 1em;
    text-align: right;
    border: 1px solid #DDD;
    margin: 0 auto;
}

Y finalmente mi código de JavaScript

var mexico = [];

// Helpers
function calcularPromedio (lista) {
    const sumaLista = lista.reduce(
        function (valorAcumulado = 0, nuevoElemento) {
            return Number(valorAcumulado + nuevoElemento);
        }
    );

    const promedioLista = Number(sumaLista / lista.length);
    return promedioLista;
}

function esPar(n) {
    return (n % 2 === 0);
}

const IVA = 16;

// Calculadora mediana
function medianaSalarios(lista) {
    const mitad = parseInt(lista.length / 2);

    if (esPar(lista.length)) {
        const personaMitad1 = lista[mitad - 1];
        const personaMitad2 = lista[mitad];

        const mediana = calcularPromedio([personaMitad1, personaMitad2]);
        return mediana;
    } else {
        const personaMitad = lista[mitad];
        return personaMitad;
    }
}
// Calcular desviación estandar
function calcStandardDeviation(lista) {
    const promedio = calcularPromedio(lista);
    lista.unshift(0)
    const sumatoria = lista.reduce(
        function (a = 0, b) {
            return a + (b - promedio) ** 2;
        }
    );
    return Math.sqrt(sumatoria / (lista.length - 1));
}


// Calcular cuanto se saca de IVA en total IMPUESTOS
function calcularImpuestos(lista) {
    const sumaLista = lista.reduce(
        function (valorAcumulado = 0, nuevoElemento) {
            return valorAcumulado + nuevoElemento;
        }
    );
    
    const impuesto = sumaLista *  IVA / 100;
    return impuesto;
}

// const desviacionMx = calcStandardDeviation(lista);

// Aquí empecé a hacer las funciones para trabajar con HTML

function onClickButtonAddPersona() {
    const inputSalario = document.getElementById("InputSalario");
    const salarioValue = inputSalario.value;

    const InputNombre = document.getElementById("InputNombre");
    const nombreValue = InputNombre.value;

    mexico.push({
        nombre: nombreValue,
        salary: salarioValue,
    });

    document.getElementById("InputNombre").value = "";
    document.getElementById("InputSalario").value = "";
}

function onClickButtonMean() {
    const salariosMx = mexico.map(
        function (persona) {
            return Number(persona.salary);
        }
    );
    promedioMx = calcularPromedio(salariosMx);

    const resultP = document.getElementById("ResultP")
    resultP.innerText = `El promedio del total de salarios es de $${promedioMx}`;
}

function onClickButtonMedian() {
    const salariosMx = mexico.map(
        function (persona) {
            return Number(persona.salary);
        }
    );
    const salariosMxSorted = salariosMx.sort(
        function (salaryA, salaryB) {
            return salaryA - salaryB;
        }
    );
    medianaMx = medianaSalarios(salariosMxSorted);
    const resultP = document.getElementById("ResultP")
    resultP.innerText = `La mediana general del total de salarios es de $${medianaMx}`;
}

function onClickButtonTax() {
    const salariosMx = mexico.map(
        function (persona) {
            return Number(persona.salary);
        }
    );
    impuestosMx = calcularImpuestos(salariosMx);

    const resultP = document.getElementById("ResultP")
    resultP.innerText = `Se han obtenido $${impuestosMx} del total de salarios`;

}

function onClickButtonStdDeviation() {
    const salariosMx = mexico.map(
        function (persona) {
            return Number(persona.salary);
        }
    );
    desviacionMx = calcStandardDeviation(salariosMx);

    const resultP = document.getElementById("ResultP")
    resultP.innerText = `La desviación estandar es de $${desviacionMx}`;
}

function onClickButtonBorrar() {
    mexico = [];
}

function onClickButtonBorrarUltimo() {
    mexico.pop();
}

Hice una comparativa de precios la primera y segunda quincena de un mes, de una criptomoneda ficticia. Le agregué un poco de DOM aunque faltan bastantes cosas qué hacerle. ¡Quedará pendiente para futuros retos!

//Variación en el precio de una nueva criptomoneda: GDL

//Obtener variación entre la suma de los precios de las quincenas inicial y final. Porcentaje de crecimiento o disminución...

//Obtener el precio medio de la moneda en el mes.


//*******HELPERS*****************************//
function calcularPromedio (lista) { 
    const sumaValores = lista.reduce( 
        function(valorAcumulado = 0, valorActual) {
            return valorAcumulado + valorActual;
        }
    );
    
    const promedioLista = sumaValores / lista.length;
    return promedioLista;
}

function esPar (numero) {
     return (numero % 2 === 0);
 };

 //********************************************** */

 ///////////////Calculadora de mediana////////////////////////////
function medianaPrecios(lista) {
    const mitad = parseInt(lista.length / 2);

    if(esPar(lista.length)) {
        const diaMitad1 = lista[mitad - 1];
        const diaMitad2 = lista[mitad];

        const mediana = calcularPromedio([diaMitad1, diaMitad2]);

        return mediana;

    } else {
        const diaMitad = lista[mitad];
        return diaMitad;
    }
}
////////////////////////////////////////////////////////////

// Mediana con datos del mes
function medianaMensualGdl () {
    const preciosGdl = GDL.map(
        function (day) {
            return day.precio;
        }
        
    );
    
    const preciosGdlSorted = preciosGdl.sort(
        function(precioA, precioB) {
            return precioA - precioB;
        }
    );
    
    medianaMensualGdl = medianaPrecios(preciosGdlSorted);

    return medianaMensualGdl;

    
}

///////////////////////////////////////////////////////////////
//Volver a usar map para los splices
const pricesGdl = GDL.map(
    function (day) {
        return day.precio;
    }
);

const spliceStart = 0;
const spliceCount = 15;

const primeraQuincenaDiario = pricesGdl.splice(spliceStart, spliceCount);

///Sumar las quincenas y sacar diferencias entre la segunda y primera.

function diferenciaQuincenas(){
    
    function primeraQuincena(){
        const sumaPrimeraQuincena = primeraQuincenaDiario.reduce(
            function (valorAcumulado = 0, valorActual) {
                return valorAcumulado + valorActual;
            }
        );
        return sumaPrimeraQuincena;
    };

    function segundaQuincena(){
        const sumaSegundaQuincena = pricesGdl.reduce(
            function (valorAcumulado = 0, valorActual) {
                return valorAcumulado + valorActual;
            }
        );
        return sumaSegundaQuincena;
    };

    return segundaQuincena() / primeraQuincena();
};

/////////////////////Interactuar con el HTML////////////////////////

const medianaMensual = medianaMensualGdl();

const botonMediana = document.querySelector('.mediana');
botonMediana.addEventListener('click', function() {
    
    const mostrarMediana = document.createElement('P');
    mostrarMediana.textContent = `La mediana mensual es: ${medianaMensual}`;
    mostrarMediana.classList.add('mostrarMediana');
    botonMediana.appendChild(mostrarMediana);

    

});



const diferencia = diferenciaQuincenas();

const botonDiferencias = document.querySelector('.diferencia');
botonDiferencias.addEventListener('click', function(){

    const mostrarDiferencia = document.createElement('P');
    mostrarDiferencia.textContent = `La diferencia de la segunda quincena respecto a la primera fue de ${diferencia} veces la primera`;
    mostrarDiferencia.classList.add('mostrarDiferencia');
    botonDiferencias.appendChild(mostrarDiferencia);

    return
});
    

    

Taller capacidad de endeudamiento

mi codigo

//Formula capacidad de endeudamiento
// Capacidad de Endeudamiento = (Ingresos Totales mes – Gastos Fijos mes) x 0,35.
// Nivel de endeudamiento = (Pasivos Totales / Activos Totales) x 100.

const calculateCapacidadEndeudamiento = () => {
    const salario = document.getElementById("salario");
    const valueSalario = salario.value;

    const gastos = document.getElementById("gastos");
    const valueGastos = gastos.value;

    const capacidadEndeudamiento = parseInt((valueSalario - valueGastos) * 0.35)

    const resultPromedio = document.getElementById("ResultadoC")
    resultPromedio.innerText = "Tu capacidad de endeudamiento es de $" + capacidadEndeudamiento  + " este monto puedes usarlo para endeudarte"
};

const calculateNivelEndeudamiento = () => {
    const salario = document.getElementById("salario");
    const valueSalario = salario.value;

    const gastos = document.getElementById("gastos");
    const valueGastos = gastos.value;

    const nivel = parseInt((valueGastos / valueSalario) * 100)

    const resultPromedio = document.getElementById("ResultadoN")
    resultPromedio.innerText = "Tu nivel de endeudamiento es de: " + nivel  + "%"
};

Aquí esta el reto:

Aquí pueden var la Pagina
Repositorio Aquí

aquí dejo los talleres durante el curso:
repo
y el repo del ultimo reto, que lo hice en base en algunas formulas del curso de finanzas personales de platzi
repo

Puedes ver mi repositorio aquí

Mi programa calcula el ahorro que debería de hacer según su sueldo en euros.

  • Captura Desktop
  • Captura Smartphone

Saqué la desviación estándar y el indicador de desigualdad por deciles. Lo hice como un pequeño artículo: https://raw.githack.com/Tom4sBeltr4n/Platzi-practico-de-JavaScript/main/Taller_4/index.html

Les comparto las funciones que cree para calcular interés simple y compuesto en JavaScript.

//Function calcularInteresSimple
function calcularInteresSimple(C, i, t) {
    const capital = C;
    const tasaInteres = i;
    const tiempo = t;

    const tasaInteresDecimal = tasaInteres / 100;
    const interes = capital * tasaInteresDecimal * tiempo;
    return interes;
}
//Function calcularInteresCompuesto
function calcularInteresCompuesto(C, i, t) {
    let capital = C;
    const tasaInteres = i;
    const tiempo = t;
    let interes;
    let valorFinal;
    const tasaInteresPorcentaje = tasaInteres / 100;
    const arrayValores = [];
    for(let i=0; i < tiempo; i++) {
        if(i === 0) {
            interes = capital * tasaInteresPorcentaje;
            valorFinal = capital + interes;
            arrayValores.push({capital: capital, interes: interes, valorFinal: valorFinal});
        } else {
            capital = arrayValores[i - 1].valorFinal;
            interes = capital * tasaInteresPorcentaje;
            valorFinal = capital + interes;
            arrayValores.push({capital: capital, interes: interes, valorFinal: valorFinal})
        }
    }
    return arrayValores;
}
//Cualquier recomendación es bienvenida. 😀

Hice una calculadora de interés simple y compuesto

Repositorio:
https://github.com/metacris93/calculadora-interes-simple-compuesto

Así quedó!

Decidí analizar la mediana de la productividad por hora trabajada del país

// Mediana de la Productividad por Hora Trabajada (Valor de la hora trabajada del país)

const semanasTrabajadasPorAnnio = 52
const horasTrabajadasPorSemana = 40
const salarioAnualMedianaGeneral = medianaGeneralCR * 12
const medianaProductividadPorHoraTrabajada = 
  salarioAnualMedianaGeneral / 
  semanasTrabajadasPorAnnio / 
  horasTrabajadasPorSemana 

Hola cómo están. Acá dejo unas imágenes de lo que logré.
Gracias

Tomando como inspiración el vídeo sobre política de Freddy decidí realizar un test que al contestarlo te devuelve tu ideología.
Pueden verlo en:
Test Político

Ahí también tienen el link al repositorio de GitHub.

hola coders.

volví con este genial proyecto que elabore en mi poco tiempo y con lo aprendido se trata de:

ingresar los datos que tu desees y puedas calcular la media, mediana, o media aritmética con tan solo un clic.

lo encuentran en mi github: https://github.com/fdcorrea12/Estadistica-moda-mediana-media

Utilicé slice para no afectar el array original de salariosColSorted:

//Mediana del top 10%
const sliceStart = parseInt((salariosColSorted.length)*0.90);
const sliceEnd = salariosColSorted.length;

const salariosColTop10 = salariosColSorted.slice(
    sliceStart, 
    sliceEnd
);

const medianaTop10Col = medianaSalarios(salariosColTop10);

Luego hallé el PIB per cápita:

//Cálculo del PIB per cápita
const poblacion = salariosCol.length;
const pib = salariosColSorted.reduce(
    function(a=0,b){
        return a+b;
    }
);

const pibPerCapita = pib/salariosColSorted.length;

Luego de varios días intentando que me salga, por fin resolví un ejercicio que me propuse y he aquí! el resultado, creo que le faltan algunos detalles pero así esta por el momento 😃

Dejo evidencia de la participacion del ultimo taller; colocando a prueba y en conocimiento lo aprendido a lo largo del curso. 😌💡

(

COGICO HTML - CSS
<!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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,[email protected],700;1,200;1,400&display=swap" rel="stylesheet">
    <title>Simulador/Credito.</title>
</head>
<style>
    body{
        background: url("https://www.eltiempo.com/files/image_640_428/uploads/2019/12/27/5e062f21b215c.jpeg") no-repeat center center fixed;
        background-size: cover;
        font-family: 'IBM Plex Sans', sans-serif;
        opacity: 0.80; /* esta etiqueta permite la tranparenciA con la imagen de fondo*/
        display: grid;
        grid-template-rows: auto 3fr;
        justify-self: auto; 
    }
    .form {
        color: aliceblue;
        width: 100%;
        height: 100pv;
        text-align: center;
        font-size: x-large;
        display: grid;
        grid-template-rows: auto 2fr auto;
        background-color: blue;
        margin-top: 0px;
        margin-bottom: 20px;
        border-radius: 20px;
        box-shadow: 6px 20px 10px black;
        
    }
    .form p {
        font-size: 30px;
        font-weight: bold;
        height: 50px;
        width: 100%;
        color: chartreuse;
        margin-bottom: 20px;
        margin-top: 0;
        margin: auto 2fr;
    }
    .modulo{
        display: grid;
        grid-template-columns: auto 2fr auto;
    }
    .seccion {
        text-align: center;
        width: 100%;
        height: 100%;
        background-color: rgb(127, 235, 77);
        margin-top: 5px;
        margin-bottom: 10px;
        margin-left: 5px;
        margin-right: 30%;
        border-radius: 20px;        
    }
    .seccion p {
        text-align: left;
        margin-left: 20px;
        margin-bottom: -1px;
        font-weight: bolder;
    }
    .seccion input{
        width: 500px;
        margin-bottom: 5px;
        margin-top: 20px;
        padding: 10px;
        margin-right: 15px;
        margin-left: 15px;
        background-color: #fdfef7;
        border: #094c6b 1.8px solid;
        text-align: justify;
        font-weight: bold;
        font-size: medium;
    }
    .bCalcu {
        background-color: blue;
        color: aliceblue;
        font-weight: bolder;
        border-radius: 8px;
        background-size: cover;
        justify-content: baseline;
        margin-right: 60px;
        margin-top: 10px;
    }
    .bLimpiar {
        background-color: blue;
        color: aliceblue;
        font-weight: bolder;
        border-radius: 8px;
        background-size: cover;
        justify-content: first baseline;
    }
    .tabla {
        margin-left: 50px;
    }
    thead{
        border: #173441 2px solid;
        font-weight: bold;
        background-color: #fdfef7; 
        text-align: center;
    }
    tr{
        border: #173441 2px solid;
        }
    td{
        border: #173441 2px solid;
        background-color: #fdfef7;    
    }
    .ft {
        background-color: blue;
        color: #fdfef7; 
        text-align: center;
    }
    .final {
        background-color: blue;
        height: 80%;
        margin-bottom: 5px;
        margin-top: 20px;
        margin-left: 5px;
        border-radius: 10px;
        display: -ms-grid;
        grid-template-columns: 10px 2fr 10px;
        justify-content: right;
    
    }
    .final a {
        color: aliceblue;
        width: 2px;
        height: 2px;
        margin-left: 70%;
        justify-items: right;
        margin-top: 10px;
        text-align: center;
        font-weight: bold;
    }
    .final img {
        width: 50px;
        height: 30px;
        margin-left: 80%;
        border-radius: 10px;        
        justify-items: right;
        margin-top: 20px;
        
        
    }
</style>
<body>
    <form class="form">    
        <h1 class="title">SIMULADOR DE CREDITO</h1>
        <p>Formulario para simular solicitud de credito</p>
    </form>
        <div class="modulo">
        <section class="seccion">
            <div>
                <label for="capital"><p>Ingrese el valor del Credito a solicitar:</p>
                <input type="text" placeholder="Pesos Colombianos" id="camp1">
                <i class="fas fa-coins"></i>  
                </label>  
            </div>
            <div>         
                <label for="cuotas"><p>Ingrese el numero de Cuotas (Meses):</p>
                <input type="text" placeholder="Tiempo en Meses" id="camp2">
                <i class="far fa-calendar-alt"></i>
                </label> 
            </div>    
            <div>
                <label for="interes"><p>Ingrese tasa Mesual:</p>
                <input type="text" placeholder="Tasa Fija Mensual" id="camp3">
                <i class="fas fa-hand-holding-usd"></i>
                </label>
            </div> 
            <div class="button">               
        <button onclick = "generarTabla()" class="bCalcu">CALCULAR</button>
        <button onclick = "limpiar()" type="reset" class="bLimpiar">LIMPIAR</button>
            </div>    
        </section>              
        <table class="tabla">
            <thead>
                <tr>
                    <td>N. Cuota</td>
                    <td>Saldo Capital</td>
                    <td>Interes Generado</td>
                    <td>Saldo a Cancelar</td>
                </tr>
            </thead>
            <tbody id="tabla">
            </tbody>
            
            <tfoot class="resultado">
                <tr class="ft1">
                    <td class="ft">TOTAL</td>
                    <td id="t1"></td>
                    <td id="t2"></td>
                    <td id="t3"></td>
                </tr>
                </tfoot>
        </table>         
        </section>
        </div>
        <div class="final">
            <img src=https://www.pagepersonnel.es/sites/pagepersonnel.es/files/legacy/linkedin-_0.jpg alt="img">
            <a href="https://www.linkedin.com/in/rubensantos1123/"><strong>//www.linkedin.com/in/rubensantos1123/</strong></a>            
        </div> 
    <script src="tallerFinalSimulador.js"></script>
</body>
</html>
CODIGO JAVASCRIPT
function generarTabla() {
    document.getElementById("tabla").innerHTML="";
    let n1 = Number(document.getElementById("camp1").value);
    let n2 = Number(document.getElementById("camp2").value);
    let n3 = Number(document.getElementById("camp3").value);
    if(n1>0){
        for(i = 1; i <= n2; i++){
            ca = n1 / n2;
            d1 = ca.toFixed(2); //El metodo .toFixed toma un numero y solo muestra los decimales que le indiquemos en el () ejemplo (2) decimales.
            i2 = ((n1*n3)/100)/n2;
            d2 = i2.toFixed(2);
            r  = ca + i2;
            d3 = r.toFixed(2);
            document.getElementById("tabla").innerHTML=document.getElementById("tabla").innerHTML +
                `<tr>
                    <td>${i}</td>
                    <td>${d1}</td>
                    <td>${d2}</td>
                    <td>${d3}</td>
                </tr>`;
                
        }
        n4 = n1.toFixed(2);
        t_i = i2 * n2;
        d4 = t_i.toFixed(2);
        t_p = r * n2;
        d5 = t_p.toFixed(2);
        document.getElementById("t1").innerHTML=n4;
        document.getElementById("t2").innerHTML=d4;
        document.getElementById("t3").innerHTML=d5;
    }else{
        alert("Falta ingresar un Numero");
    }
};
function limpiar() {
    document.getElementById("camp1").value = "";
    document.getElementById("camp2").value = "";
    document.getElementById("camp3").value = "";
    document.getElementById("camp1").focus();
    
};

Comparto la solución al reto. Me decanté finalmente por un simulador de crédito hipotecario. Aquí puedes visitar mi repo.

Yo hice un programa que te calcula la tasa de ahorro y capacidad de endeudamiento.
Así me quedó


Les comparto aquí mi repositorio en GitHub

// Utils

function calcularMediaAritmetica(lista){
        var acumulador = 0;
        for (let i = 0; i < lista.length; i++) {
            acumulador = Number(acumulador) + Number(lista[i]);
        }
        return acumulador / lista.length;
}

// calculo de desviación estándar
//_> arrar de salarios

const array = [];

function agregarValorArray(valor){
    array.push(valor);
}

//_> Calcula desviación estándar
function calculaDesviacionEstandar(lista){
    const promedio = calcularMediaAritmetica(lista);

    var acumulado = 0;
    for (let i = 0; i < lista.length; i++) {
        const resta = lista[i] - promedio;
        const restaCuadrada = resta * resta;
        acumulado = acumulado + restaCuadrada;

    }

    const varianza = acumulado / (lista.length - 1);
    
    return Math.sqrt(varianza);
}


// constructores

function agregarValor(){
    const valor = document.getElementById("valor").value;
    agregarValorArray(valor);

    const muestraLista = document.getElementById("mostrarLista");
    muestraLista.innerText = array;
}

function onclickCalcularDesviacionEstandar(){
    const desviacionEstandar = document.getElementById("muestrsDesviacionEstandar");
    desviacionEstandar.innerText = "La desviación estandar es: " + calculaDesviacionEstandar(array);

}

Fue muy muy emocionante el crear algo desde 0 totalmente, y mas que poco a poco todo funcinará, me encanto!
Este es el resultado, no es lo mejor esteticamente pero estoy mejorando bastante, hasta ahora este es mi mejor resultado, también aplique Reponsive Design de manera que se puede usar desde dispositivos Mobile.
https://github.com/Ecangarita/calculo-de-intereses-y-capacidad-de-endeudamiento

Hice una calculadora para saber en que ranking se ubica un determinado sueldo en comparación con tu país y con el resto de Latinoamérica.

hola, hice una pagina sencillita que permite al trabajador autonomo tener una perspectiva de como le esta yendo ese mes. Nada mas pide los ingresos, gastos fijos y variables y le informa cuanto le falta para cubrir los gastos y cuanto deberia ganar por dia en lo que resta del mes para poder conseguirlo. esta en github son los tres archivitos que se llaman "recursos". https://github.com/jotaluna6/curso-practico-javascript

(

function CapacidadEndeudamiento (ingresos,gastos){
const total = ingresos - gastos ;
const TotalEndeudamiento = (total * 40)/100;

return TotalEndeudamiento;

}

function calcularEndeudamiento(){

const inputIngresos = document.getElementById(“Ingresos”);
const ingresosValue = inputIngresos.value;

const inputGastos = document.getElementById(“Gastos”);
const gastosValue = inputGastos.value;

const TotalEnd = CapacidadEndeudamiento(ingresosValue, gastosValue);

const resultado = document.getElementById(“resultado”);

if ( ingresosValue > gastosValue ){

resultado.innerText = "Puede lograr sus Objetivos su capacidad de Endeudamiento es del " + TotalEnd +" %";

 }if(ingresosValue <  gastosValue ){
    resultado.innerText = "Mejor No se endeude su capacidad de endeudamiento es del " + TotalEnd +" %";

} if(ingresosValue === gastosValue){
resultado.innerText = “Mejore sus Ingresos su Capacidad de endeudamiento es del " + TotalEnd +” %";
}

}

<!DOCTYPE html>
<html>
<head>
<meta charset = “utf-8” />
<title></title>
</head>
<body>
<h1 align = “center”>Calculo de ingresos por mes</h1>
<h2 align = “center”>Ingresos</h2>
<p>
<b> Para responder a las preguntas y poder hacer el calculo toma en cuenta lo siguiente: <br /> </b>
1.- No se aceptan valores negativos. <br />
2.- Tienes que responder a todas las preguntas.
</p>
<hr />
<p>
¿Tiene algún trabajo?
<br /> <br />
<label>
Sí <input type = “radio” name = “trabajo” value = “Sí” id = “trabajoTrue” onclick = “mandarPreguntaDeSalario()” />
</label>
<label>
No <input type = “radio” name = “trabajo” value = “No” id = “trabajoFalse” onclick = “noMandarPreguntaDeSalario()” />
</label>
</p>
<p id = “salario”></p><!-- 1.- -->
<p id = “salarioMensual”></p><!-- 2.- -->
<p>
¿Recibe ingresos de otra forma que no sea por trabajo?, ya sea por inversiones, publicidad, venta de productos, etc.
<br /> <br />
<label>
Sí <input type = “radio” name = “dinero” value = “Sí” id = “dineroSi” onclick = “mandarPreguntaDeIngresoMensual()” />
</label>
<label>
No <input type = “radio” name = “dinero” value = “No” id = “dineroNo” onclick = “noMandarPreguntaDeIngresoMensual()” />
</label>
</p>
<p id = “etiquetaCantidadDineroPorNoTrabajo”></p><!-- 3.- -->
<hr />
<h2 align = “center”>Ahorros</h2>
<hr />
<p>
¿Usted ahorra?
<br /> <br />
<label>
Sí <input type = “radio” name = “ahorro” value = “Sí” id = “botonSiAhorra” onclick = “mandarPreguntaDeCuantoAhorra()” />
</label>
<label>
No <input type = “radio” name = “ahorro” value = “No” id = “botonNoAhorra” onclick = “noMandarPreguntaDeCuantoAhorra()” />
</label>
</p>
<p id = “dineroAhorrado”></p> <!-- 4.- -->
<hr />
<h2 align = “center”>Gastos</h2>
<hr />
<p>
<label>
Transporte (a la semana): <input type = “number” id = “transporte” />
</label>
</p>
<p>
<label>
Educación académica (al año): <input type = “number” id = “educacion” />
</label>
</p>
<p>
<label> Alimentación (a la semana): <input type = “number” id = “alimentacion” /> </label>
</p>
<p>
<label> Entretenimiento (a la semana): <input type = “number” id = “entretenimiento” /> </label>
</p>
<p>
<label> Luz (al año): <input type = “number” id = “luz” /> </label>
</p>
<p>
<label> Agua (al año): <input type = “number” id = “agua” /> </label>
</p>
<p>
<label> Otros (a la semana): <input type = “number” id = “otros” /> </label>
</p>
<hr />
<p>
Haz click aquí para hacer el analisis salarial
<button onclick = “hacerAnalisisSalarial()”>click</button>
</p>
<p id = “analisisSalarial”></p>
<script src = “analisisSalarial.js”></script>
</body>
</html>

//////////////////////////////////////////////////////////////////

function mandarPreguntaDeSalario(){
parrafoSalario.innerHTML = ¿Recibe algún salario? <br /> <br /> <label> Sí <input type = "radio" name = "salario" value = "Sí" id = "inputBotonSalario R=Sí" onclick = "mandarPreguntaDeSalarioMensual()" /> </label> <label> No <input type = "radio" name = "salario" value = "No" id = "inputBotonSalario R=No" onclick = "noMandarPreguntaDeSalarioMensual()" /> </label>;
}

function noMandarPreguntaDeSalario(){
parrafoSalario.innerHTML = ; parrafoSalarioMensual.innerHTML =;
}

function mandarPreguntaDeSalarioMensual(){
parrafoSalarioMensual.innerHTML =
<label> ¿Cuál es su salario mensual? <input type = "number" id = "inputEscondido1" /> </label>;
}

function noMandarPreguntaDeSalarioMensual(){
parrafoSalarioMensual.innerHTML = ``;
}

function mandarPreguntaDeIngresoMensual(){
parrafoCantidadDeDineroPorNoTrabajo.innerHTML = <label> ¿Cuáles son sus ingresos mensuales? <input type = "number" id = "inputEscondido2" /> </label>;
}

function noMandarPreguntaDeIngresoMensual(){
parrafoCantidadDeDineroPorNoTrabajo.innerHTML = ``;
}

function mandarPreguntaDeCuantoAhorra(){
parrafoDineroAhorrado.innerHTML =
<label> ¿Cuánto dinero ahorras al mes? <input type = "number" id = "inputEscondido3" /> </label>;
}

function noMandarPreguntaDeCuantoAhorra(){
parrafoDineroAhorrado.innerHTML = ``;
}

function validarDatos(){
var banderaPregunta1 = document.getElementById(“trabajoTrue”).checked || document.getElementById(“trabajoFalse”).checked ? true : false;
var banderaPregunta2 = document.getElementById(“dineroSi”).checked || document.getElementById(“dineroNo”).checked ? true : false;
var banderaPregunta3 = document.getElementById(“botonSiAhorra”).checked || document.getElementById(“botonNoAhorra”).checked ? true : false;

var banderaInputBotonSalario = document.getElementById("inputBotonSalario R=Sí") === null ? false : true;

if(banderaInputBotonSalario){
    banderaPregunta1Escondida = document.getElementById("inputBotonSalario R=Sí").checked === true || document.getElementById("inputBotonSalario R=No").checked === true ? true : false;
} else {
    banderaPregunta1Escondida = true;
}


/* Esta array te dice si existe o no cada uno de los inputs que están "escondidos"
y que salen dependiendo de como vaya seleccionando las preguntas el usuario. */ 

var inputEscondido1 = document.getElementById("inputEscondido1");
var inputEscondido2 = document.getElementById("inputEscondido2");
var inputEscondido3 = document.getElementById("inputEscondido3");

var banderaInputsEscondidos = [
    inputEscondido1 === null ? false : inputEscondido1,
    inputEscondido2 === null ? false : inputEscondido2,
    inputEscondido3 === null ? false : inputEscondido3,
];

inputsEscondidos = banderaInputsEscondidos.filter(
    function(input){
        return Boolean(input) === true;
    }
);

if(inputsEscondidos.length > 0){
    elementosFalsosEnLasCajasDeTexto = inputsEscondidos.filter(
        function(inputEscondido){
            return Boolean(inputEscondido.value) === false || inputEscondido.value < 0;
        }
    );
    
    banderaCajasDeTexto = elementosFalsosEnLasCajasDeTexto.length > 0 ? false: true;

} else {
    banderaCajasDeTexto = true;
}

arrayGastos = [
    document.getElementById("transporte").value,
    document.getElementById("educacion").value,
    document.getElementById("alimentacion").value,
    document.getElementById("entretenimiento").value,
    document.getElementById("luz").value,
    document.getElementById("agua").value,
    document.getElementById("otros").value,
];

elementosFalsosEncontrados = arrayGastos.filter(
    function(elementoArrayGastos){
        return Boolean(elementoArrayGastos) === false || elementoArrayGastos < 0;
    }
);

var banderaSeccionGastos = elementosFalsosEncontrados.length > 0 ? false : true

return banderaPregunta1 && banderaPregunta2 && banderaPregunta3 && banderaSeccionGastos && banderaPregunta1Escondida && banderaCajasDeTexto ? true : false;

}

function hacerAnalisisSalarial(){
if( validarDatos() ) {
var totalIngresos = 0;
var banderaSalarioMensual = document.getElementById(“inputEscondido1”) === null ? false : true;
var banderaIngresosMensuales = document.getElementById(“inputEscondido2”) === null ? false : true;
console.log(banderaSalarioMensual, banderaIngresosMensuales);
if(banderaSalarioMensual){
totalIngresos = Number(document.getElementById(“inputEscondido1”).value);
}
if(banderaIngresosMensuales){
totalIngresos += Number(document.getElementById(“inputEscondido2”).value);
}

    //Esta variable me ayuda a identificar si la etiqueta con el id de "ahorroAlMes" existe o no.
    var banderaAhorros = document.getElementById("inputEscondido3") === null ? false : true;
    if(banderaAhorros){
        totalAhorros = Number(document.getElementById("inputEscondido3").value);
    }

    arrayGastos = arrayGastos.map(
        function(elemento){
            return Number(elemento);
        }
    );
    console.log(arrayGastos);
    totalGastos = arrayGastos.reduce(
        function(gastoAcumulado = 0, nuevoGasto){
            return gastoAcumulado + nuevoGasto;
        }
    );
    if (totalIngresos - totalGastos >= 0) {
        parrafoParaEscribirElAnalisisSalarial.innerHTML = 
        `
        Tomando en cuenta sus ingresos y gastos mensuales, usted en un mes está ganando alrededor de $${totalIngresos - totalGastos} pesos mexicanos.
        <br /> <br />
        Ahorros:  <br />
        1 mes: ${totalAhorros} <br />
        1 año: ${totalAhorros * 12}
        `;
    } else {
        parrafoParaEscribirElAnalisisSalarial.innerHTML = 
        `
        Tomando en cuenta sus ingresos y gastos mensuales, usted en un mes está perdiendo alrededor de $${totalGastos - totalIngresos} pesos mexicanos.
        <br /> <br />
        Ahorros:  <br />
        1 mes: ${totalAhorros} <br />
        1 año: ${totalAhorros * 12}            
        `;
    }
} else {
    alert("No se puede sacar el calculo debido a que has puesto valores negativos o te faltan datos que rellenar")
}

}

var arrayGastos = [];
var inputsEscondidos = [];
var banderaPregunta1Escondida = false;

var parrafoSalario = document.getElementById(“salario”);
var parrafoSalarioMensual = document.getElementById(“salarioMensual”);
var parrafoCantidadDeDineroPorNoTrabajo = document.getElementById(“etiquetaCantidadDineroPorNoTrabajo”);
var parrafoDineroAhorrado = document.getElementById(“dineroAhorrado”);

var parrafoParaEscribirElAnalisisSalarial = document.getElementById(“analisisSalarial”);

var cantidadDeSalario = 0;
var cantidadIngresos = 0;
var cantidadDineroAhorrado = 0;

var totalIngresos = 0;
var totalAhorros = 0;
var totalGastos = 0;

yo genere un calculador de ganancias cuando se mina con tarjetas graficas espero lo intenten replicar saludos compañeros!

Este es mi aporte, es una calculadora para la “libertad financiera”, para conocer en qué estado están las finanzas de cada uno y saber qué acciones tomar según el método de las 6 vacijas.

Estaré subiendo el link al código en GitHub apenas lo termine!

Ojalá me puedan dar sus críticas constructivas!




Yo hice la simulación de una compra con varios productos adicionalmente al cliente se le indica el detalle de su compra. Y la aplicación recolecta los datos de compra para su uso posterior. Les dejo el proyecto en Github

Hice un programa que te dice el interes que por un prestamo en el banco que lleves, es algo simple pero no tuve mucha idea esta vez 😦

Hice una calculadora de interés compuesto donde se pueden ingresar varios activos con distintas tasas de interés. Con cosas para mejorar como las graficas 😛
Aquí pueden probarlo (dejen feedback)

promedio de horas trabajadas por año a nivel mundial
let hours_per_year =
[
{pais:“argentina”,hours:1692},
{pais:“australia”,hours:1731},
{pais:“austria”,hours:1613},
{pais:“bangladesh”,hours:2232},
{pais:“barbados”,hours:1764},
{pais:“belgium”,hours:1544},
{pais:“brazil”,hours:1709},
{pais:“bulgaria”,hours:1644},
{pais:“cambodia”,hours:2456},
{pais:“canada”,hours:1696},
{pais:“chile”,hours:1974},
{pais:“china”,hours:2174},
{pais:“colombia”,hours:1998},
{pais:“costa rica”,hours:2212},
{pais:“croatia”,hours:1835},
{pais:“cyprus”,hours:1784},
{pais:“ecuador”,hours:1701},
{pais:“estonia”,hours:1857},
{pais:“finland”,hours:1659},
{pais:“france”,hours:1514},
{pais:“germany”,hours:1354},
{pais:“greece”,hours:2017},
{pais:“hong kong”,hours:2187},
{pais:“hungary”,hours:1937},
{pais:“iceland”,hours:1493},
{pais:“india”,hours:2117},
{pais:“indonesia”,hours:2024},
{pais:“ireland”,hours:1746},
{pais:“israel”,hours:1921},
{pais:“italy”,hours:1723},
{pais:“jamaica”,hours:1966},
{pais:“japan”,hours:1738},
{pais:“luxembourgo”,hours:1519},
{pais:“mexico”,hours:2255},
{pais:“netherlands”,hours:1430},
{pais:“new zealand”,hours:1752},
{pais:“norway”,hours:1417},
{pais:“peru”,hours:1932},
{pais:“portugal”,hours:1863},
{pais:“rusia”,hours:1974}
]
let result =0;
for(let i=0;i<hours_per_year.length;i++){
const item = hours_per_year[i];
result = result + item.hours;
}
console.log(result/hours_per_year.length);

Listo mi reto 😄 después de harto leceo xD termine el desafío, aquí les dejo el link
Esta todo el código con cometarios por si desean ojearlo
https://sukushaing.github.io/Curso-Practico-de-javascript/retof.html

Yo calcule cual es la capacidad de ahorro que tiene una persona, mi proyecto quedo así:
![](

Aquí el codigo.

function sortCitizensByIncome(citizensArr) {
    return citizensArr.sort((a, b) => a["income"] - b["income"])
}

function mediaAritmeticaDe(arr) {
    let sum = 0
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i]["income"]
    }
    const media = sum / arr.length
    return media
}

function mediaCuadraticaDe(arr) {
    let acum = 0
    for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        acum += element["income"]**2
    }
    const mediaDeCuadrados = acum / arr.length
    return Math.sqrt(mediaDeCuadrados)
}

function medianaDe(arr) {
    let mediana;
    if (arr.length % 2 === 0) {
        mediana = (arr[sortedArr.length / 2 - 1] + arr[arr.length / 2]) / 2
    } else {
        mediana = arr[parseInt(arr.length / 2)]
    }
    return mediana
}

function modaDe(arr) {
    let salariesArr = arr.map ((i) => i["income"]);
    let countObj = {}
    salariesArr.map(
        function (elm) {
            if (countObj[elm]) {
                countObj[elm] += 1
            } else {
                countObj[elm] = 1
            }
        }
    )
    let repetitionsList = Object.entries(countObj).sort((a, b) => a[1] - b[1])
    let moda = repetitionsList[repetitionsList.length - 1]
    let otraModa = repetitionsList[repetitionsList.length - 2]
   
    let mensajeModa = `La moda es ${moda[0]}, repitiéndose ${moda[1]} veces. Otra moda notable es ${otraModa[0]}, apareciendo ${otraModa[1]} veces`
    return mensajeModa
}
class Citizen {
    constructor (country, income) {
        this.country = country
        this.income = income
    }
}

const citizen1 = new Citizen("Spain", 1900)
const citizen2 = new Citizen("Spain", 1600)
const citizen3 = new Citizen("Spain", 2200)
const citizen4 = new Citizen("Spain", 1300)
const citizen5 = new Citizen("Spain", 1500)
const citizen6 = new Citizen("Spain", 2700)
const citizen7 = new Citizen("Spain", 1100)
const citizen8 = new Citizen("Spain", 1280)
const citizen9 = new Citizen("Spain", 990)
const citizen10 = new Citizen("Spain", 1700)
const citizen11 = new Citizen("Spain", 2000)
const citizen12 = new Citizen("Spain", 1900)
const citizen13 = new Citizen("Spain", 1100)
const citizen14 = new Citizen("Spain", 1220)
const citizen15 = new Citizen("Spain", 1600)
const citizen16 = new Citizen("Spain", 1800)
const citizen17 = new Citizen("Spain", 3330)
const citizen18 = new Citizen("Spain", 2000)
const citizen19 = new Citizen("Spain", 5800)
const citizen20 = new Citizen("Spain", 11000)
const citizen21 = new Citizen("Spain", 100)

let spanishCitizens = [citizen1, citizen2, citizen3, citizen4, citizen5, citizen6, citizen7, citizen8, citizen9, citizen10, citizen11, citizen12, citizen13, citizen14, citizen15, citizen16, citizen17, citizen18, citizen19, citizen20, citizen21]


Vemos que la diferencia entre la media aritmética y la media cuadrática es notable, por tanto eso nos indica cuán fiable es la media aritmética per se, porque la media cuadrática otorga mayor relevancia a los salarios más grande, así diciendonos si el valor de la media aritmética se está viendo influido por esos altos salarios que no todos pueden cobrar. Entonces podemos acudir a la herramienta de la mediana, que en este caso dice que la persona de enmedio en toda la lista de ciudadanos cobra un suelo de 1700. Y dos modas que encontramos son 1900 y 2000. Con más datos, podrían extraerse grandes conclusiones, y también es posible de agregar complejidad y variables a los ciudadanos, dándonos relevantes datos acerca de la economía de un país o una región. 😃

En este reto planteo implementar una calculadora de ahorros, donde el usuario deberá escribir sus ingresos mensuales, cuánto desea ahorrar y por cuanto tiempo.
El resultado mostrará cuánto % del ingreso representa el ahorro y el monto acumulado en el dicho periodo.

Muchachos, hice algo loco que se me ocurrio con interes compuesto, si quieres comprar una moto, a cuotas, das el valor de la vuota, esto genera intereses mensuales y se van sumando las cuotas mas los interes, lo que ayuda a ganar dinero mientras abonas a tu cuenta para la moto. también te muestra mes a mes las ganancias de los abonos que llevas.

Nota: recomendable hacer pequeña la pantalla en pc porque no use media queries, solo lo diseñe para celulares
Aquí puedes ver el proyecto

Esto me tomó casí 24 horas en total de desarrollo, igual quedé complacido con el resultado.

Mi objetivo fue poner en práctica funcionalidades web desde js para crear un herramienta sencilla que igual es útil. WebSite.

Realmente ver el resto de proyectos te anima a realizar algo mucho más profesional, me siento en competenncia sin opción a rendición. ¡Vamos a por el reto!

Mi repositorio para el curso -> Aquí
Actividad simulación de estudio de salarios en la carpeta CursoPractico
Planteo: ¿Qué parámetros tomaríamos para definir un buen o mal salario de un programador?
Fuentes de apoyo:
https://www.youtube.com/watch?v=sauDgFSUmsM - Freddy Vega
https://sueldos.openqube.io/encuesta-sueldos-2021.02/ - Web encuesta

yo no se como subir fotos de mis proyectos jajaja agradeceria una mano por ahi , algun link o algo.
gracias.
estoy desarrollando mi proyecto es una lista ya recojo datos de mis inputs
un boton que mete los inputs a un array y este lo mete en una class Lista que tiene propiedades que hemos visto en este curso :
mediana , suma , media aritm , moda , desviacion estandar (util para no hacer estadisticas de datos muy dispersos aaaa hice la tarea ).
y aun esta feo visualmente pero funciona el js y tengo que mejorar el css pero al menos se entiende lo que hace.
a tambien agrega inputs al html segun demandes.

Realice una app muy simple de Ingreso y Egreso mensuales. Es para saber cuanto tenemos de ingresos y descontar los egreso para saber cuanto nos queda en el mes. La app no esta completa faltaron las validaciones en caso de dejar algún input sin dato. Fue hecha rápidamente. Dejo el link en caso de que quieran probarla.

WebSIde: https://app-ingresos-egresos.netlify.app/

Después de ensayar y equivocarme una y otra vez por fin pude terminar el proyecto, hice algo sencillo pero es satisfactorio ver cómo finalmente funciona https://rianguz.github.io/Para-que-alcanza-mi-salario/

![](
** Hola comunidad, hice una calculadora de inversión a largo plazo basado en las tasas de retorno y el nivel de riesgo de cada instrumento financiero.
Acepto cualquier sugerencia.**

ASÍ ME QUEDÓ A MÍ
Lo que yo hice fue un simulador financiero que te calcula, en caso de que pagues a cuotas, el valor mensual a pagar, el valor total a pagar de intereses, y finalmente, el valor que al final terminarías pagando (por ejemplo, si algo vale $100.000 y tiene una tasa de interés del 10% y lo pagas en 3 cuotas, al final terminas pagando un total de $101.598.
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í

Luego de vario tiempo pude realizar mi reto, el cual consiste en una calculadora de Ingresos y Egresos, tu metes el dinero que ingresa, y también metes el dinero que Egresas (Osea el que gastas mensualmente), adicional a esto, te da la suma de los ingresos totales, y la suma de los egresos totales. Despues te da el ahorro total del mes que es igual a IngresosTotales - EgresosTotales. Aqui dejo mi codigo de como seria la solucion a este problema.

let ingresosUsuario = [];
let nombreIngreso = [];
let sumaIngresos = 0;
let restarEgresos = 0;

//Agregando nombres de ingresos

function agregarNombreIngresoClick(){
    const nombreUsuario = document.getElementById('agregarNombreIngreso')
    const nombreUsuarioValue = nombreUsuario.value;
    agregarNombreIngreso(nombreUsuarioValue);
}

function agregarNombreIngreso(nombre){
    const nuevoNombre = nombreIngreso.push(nombre);
    console.log(nombreIngreso);
    agregarIngresoDOM(nombreIngreso);
}

//Agregando valor de ingresos

function agregarIngresosUsuarioClick(){
    const ValorIngresoUsuario = document.getElementById('agregarValorIngreso');
    const ValorIngresoUsuarioValue = ValorIngresoUsuario.value;
    const ValorIngresoUsuarioValueNumber = Number(ValorIngresoUsuarioValue)
    agregarIngresosUsuario(ValorIngresoUsuarioValueNumber);
}
function agregarIngresosUsuario(valorIngresoUsuario){
    const nuevoIngreso = ingresosUsuario.push(valorIngresoUsuario);
    console.log(ingresosUsuario);

    const SumarIngresos = ingresosUsuario.reduce(function(valorAcomulado = 0, nuevoElemento){
        return valorAcomulado + nuevoElemento;
    });

    console.log(SumarIngresos);
    agregarIngresoTexto(ingresosUsuario);
    agregarIngresosTotales(SumarIngresos);
    EscribirIngresosTotales(SumarIngresos);
}

//Escribiendo en el HTML
function agregarIngresosTotales(sumaIngresos){
    let agregartextoSumaIngresos = document.getElementById('IngresosTotales');
    agregartextoSumaIngresos.innerText = `Ingresos Totales: ${sumaIngresos}`;
}
function agregarIngresoDOM(nombreIngreso){
    let agregarTextoIngreso = document.getElementById('ingresosUsuario');
    agregarTextoIngreso.innerText = `Nuevo ingreso: ${nombreIngreso}`;
    
}
function agregarIngresoTexto(valorIngresoUsuario){
    let valorIngresoTexto = document.getElementById('valorIngreso');
    valorIngresoTexto.innerText = `Valor del ingreso ${valorIngresoUsuario}`;
}

//Egresos
let egresoUsuario = [];
let valorEgresoUsuario = [];

//Agregando el valor de Egresos
function agregarEgresosUsuarioValorClick(){
    const egresoValorUsuario = document.getElementById('agregarEgresoValor');
    const egresoValorUsuarioValue = egresoValorUsuario.value;
    const egresoValorUsuarioValueNumber = Number(egresoValorUsuarioValue);
    agregarEgresos(egresoValorUsuarioValueNumber);
}

function agregarEgresos(valorEgreso){
    let ingresosTotales = valorEgresoUsuario.push(valorEgreso);
    console.log(valorEgresoUsuario);

    let sumarEgresosTotales = valorEgresoUsuario.reduce(function(valorAcomulado = 0, nuevoValor){
        return valorAcomulado + nuevoValor;
    });
    console.log(sumarEgresosTotales);
    escribirEgresosValor(valorEgresoUsuario);
    restarIngresosDeEgresos(sumarEgresosTotales);
    escribirEgresosTotalesAcomulados(sumarEgresosTotales);
}

function escribirEgresosValor(ValorEgreso){
    let ValorEgresoTexto = document.getElementById('agregarEgresosValor');
    ValorEgresoTexto.innerText = `Valor de Egresos: ${ValorEgreso}`;
}
function escribirEgresosTotalesAcomulados(egresosSuma){
    let egresoAcomulado = document.getElementById('egresosTotales');
    egresoAcomulado.innerText = `Egresos Totales: ${egresosSuma}`;
}



//Agregando el nombre de Egresos
function agregarNombreEgresosUsuarioClick(){
    let nombreEgresoUsuario = document.getElementById('agregarEgresoNombre');
    let nombreEgresoUsuarioValue = nombreEgresoUsuario.value;

    agregarNombreEgreso(nombreEgresoUsuarioValue);
}

function agregarNombreEgreso(nombreEgreso){
    let nuevoNombreEgreso = egresoUsuario.push(nombreEgreso);
    console.log(egresoUsuario);
    EscribirEgresosNombre(egresoUsuario);
}

function EscribirEgresosNombre(NombreEgreso){
    let nombreEgresoTexto = document.getElementById('agregarEgresos');
    nombreEgresoTexto.innerText = `Egresos: ${NombreEgreso}`;
}


///Agregando la resta del egreso total al ingreso total
function EscribirIngresosTotales(SumarIngresos){
    sumaIngresos = SumarIngresos;
}

function restarIngresosDeEgresos(TotalEgreso){
    restarEgresos = sumaIngresos - TotalEgreso;
    console.log(`Total ahorro: ${restarEgresos}`);
    let plataRestante = document.getElementById('PlataRestante');
    plataRestante.innerText = `La plata restante que te queda es: ${restarEgresos}`
}


<!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>Interés simple vs interés compuesto</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
</head>

<body>
    <header>
        <h1 class="h1_title">Diferencia entre interés simple 💰 e interés compuesto 📈🤑</h1>
    </header>
    <main class="main">
        <p>Te mostraré de una manera muy sencilla porqué el interés compuesto es una maravilla. Aquí tendrás
            una comparación entre 2 tipos de inversiones, ambas te darán más dinero al finalizar un periodo de tiempo.
            Cuando más tiempo dejes pasar y más dinero hayas invertido, más grande será la diferencia.
        </p>
    </main>
    <form action="">
        <label for="inversion_inicial">Ingresa la cantidad de dinero que vas a invertir</label>
        <input type="number" name="" id="inversion_inicial" min="1">
        <label for="tiempo_invertido">Ingresa los años vas a dejar crecer el dinero</label>
        <input type="number" name="" id="tiempo_invertido" min="1">
        <label for="tasa_interes">Ingresa la tasa de interés</label>
        <input type="number" name="" id="tasa_interes" min="1">
        <button type="button" onclick="calculaInversiones()">Calcular inversión</button>
    </form>
    <p id="resultadosInversiones"></p>
    <script src="interes_s_c.ts"></script>
</body>

</html>

El reto es de tema libre. Escoge la pregunta que prefieras, incluso mejor si has vivido una situación parecida alguna vez, resuélvela y muéstranos tu solución en los comentarios.

Plantea muy detalladamente el problema/análisis/cálculo/hipótesis que quieres resolver.
Encuentra las fórmulas necesarias para resolver el dilema que seleccionaste.
Define las variables y funciones para resolver tus fórmulas.
Presenta los resultados de tu informe en una página web dinámica usando HTML, CSS y JavaScript.
Organiza y documenta tu código para que sea más fácil de leer y entender.
Publícalo en tu repositorio de GitHub y muéstranos el link en la sección de comentarios.

Mi aplicación de calculo de salario SV 😄
https://nadelina.github.io/calcular-salario-sv/

Repo:
https://github.com/Nadelina/calcular-salario-sv!

Como reto decidí calcular el salario de El Salvador con sus descuentos respectivos(ISSS, AFP, Renta) según tipo de salario (semanal, quincenal, mensual).

La particularidad del reto eran los siguientes puntos:
-Para calcular isss y afp era necesario evaluar si el salario era menor que el techo máximo de cotización
-Para calcular la renta era necesario evaluar primero: tipo de salario, segundo: tramo de retención según en que rango encajaba la el salario menos los descuentos anteriores.

Yo hice un calculador de cuotas en un prestamo, con interes simple. Si bien se mira feo porque no tiene css, espero mejorarlo cuando aprenda 😄.
No es mucho, pero es trabajo honesto :3.

pdta: Intenté subir un gif y no me dejó, salía error 400