Reto: extiende tu análisis salarial

Les comparto el proyecto que realice, es una calculadora de interés compuesto

Yo hice un proyecto que haya el interés simple de un préstamo:
(Me tomó más tiempo en manejo del DOM con JS que la fórmula matemática ensí.jejeje
Click aquí para ir al proyecto.

Todo lo visto en el curso: Pagina de github

Alargue un poco mas mis proyecto y lo hice que se reflejara todo en una aplicacion web, aca estan algunas fotos y el link para que lo puedan ver, es bastante interactiva:

Aca el link

Esta es la version 1.0, pronto añadere funciones como añadir mas ciudadanos

Por aca dejo el proyecto que realice con conocimientos del curso, Es un reto de la pagina frontendmentor. Tip Calculator App

Este curso ha sido sencillamente espectacular, el profesor juanDC tiene buena pedagogía, el curso fue perfectamente estructurado. Muchos salimos viendo las matemáticas de una forma más fácil. Mi recomendación es que pongamos en práctica lo aprendido, debido a que es la única forma de aprender de verdad.
JavaScript es duro, programar no es fácil, pero si somos constante lo vamos a lograr.

Reto: capacidad de endeudamiento 💀
URL: https://capacidad-de-endeudamiento.netlify.app/

Realice un proyecto de la capacidad de endeudamiento
https://jefry22.github.io/Capacidad-Endeudamiento/

Sinceramente el análisis de datos… no es algo que digas uffff mi sueño… mi pasión XD, así que estoy falto de inspiración por lo que dejo solo los ejercicios de las clases
 

 
El código completo esta en mi github y la implementación en la page
 
calculador de promedio media y moda codigo y page
calculador de descuentos codigo y page
grafica de salarios código y page <- a esta si le metí mas empeño XD

Pues sí me quedó muy simple el proyecto, pero bueno… Se los comparto.
https://toreohm.github.io/javascript-matematicas-estadistica/capacidadahorro.html

Dejo los dos pequeños proyectos que hice en este curso:

1. Calculadora de interés simple:

Github: https://github.com/RedCode-123/Interes_Simple
Github pages: https://redcode-123.github.io/Interes_Simple/index.html

1. Calculadora de capacidad de endeudamiento:

Github: https://github.com/RedCode-123/Capacidad_de_endeudamiento
Github pages: https://redcode-123.github.io/Capacidad_de_endeudamiento/index.html

Yo realicé un proyecto muy sencillo. Es una calculadora para ayudar a los autónomos a calcular los importes de sus facturas.
code: https://github.com/lupeMorales/calculadora-autonomos
web: https://lupemorales.github.io/calculadora-autonomos/

Después de varios días dedicados a mi análisis salarial, finalmente logré terminar la calculadora de interés compuesto. Esta herramienta se divide en tres secciones: la primera permite ingresar los valores respectivos, la segunda muestra una gráfica de crecimiento y, por último, una tabla que representa los datos de la gráfica.

Click aquí para ir al proyecto
Repositorio del proyecto

les comparto calculadora de interés compuesto, la estética es muy basica ya que no he hecho enfasis en el css, lo importante es la funcionalidad

https://manuel15939.github.io/calculadora-interes-compuesto/

Aqui mi ejemplo con el que entendi el proyecto:

function calcularCapacidadEndeudamiento(ingresos, gastos, deudas) {
  // Calcular el margen de endeudamiento
  const margenEndeudamiento = ingresos - gastos;
  
  // Calcular el porcentaje de endeudamiento
  const porcentajeEndeudamiento = deudas / ingresos;
  
  // Calcular la capacidad de endeudamiento
  const capacidadEndeudamiento = margenEndeudamiento * (1 - porcentajeEndeudamiento);
  
  return capacidadEndeudamiento;
}

// Ejemplo de uso
const ingresos = 50000;
const gastos = 30000;
const deudas = 20000;
const capacidad = calcularCapacidadEndeudamiento(ingresos, gastos, deudas);
console.log(`La capacidad de endeudamiento es: ${capacidad}`);

La función “calcularCapacidadEndeudamiento” toma como parámetros los ingresos, los gastos y las deudas de una persona. Primero, calcula el margen de endeudamiento restando los gastos a los ingresos. Luego, calcula el porcentaje de endeudamiento dividiendo las deudas entre los ingresos. Por último, utiliza estos valores para calcular la capacidad de endeudamiento multiplicando el margen de endeudamiento por el complemento del porcentaje de endeudamiento. El resultado final es la capacidad de endeudamiento de la persona.

agregamos HTML:

<div class="container">
  <h1>Calculadora de capacidad de endeudamiento</h1>

  <form>
    <label for="ingresos">Ingresos:</label>
    <input type="number" id="ingresos" name="ingresos" required>
    <br>
    <label for="gastos">Gastos:</label>
    <input type="number" id="gastos" name="gastos" required>
    <br>
    <label for="deudas">Deudas:</label>
    <input type="number" id="deudas" name="deudas" required>
    <br>
    <button type="submit" id="calcular-btn">Calcular</button>
  </form>
  
  <div id="resultado"></div>

</div>

Agregamos un poco de CSS:

.container {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

form {
  margin: 20px 0;
}

label {
  font-size: 18px;
  margin-right: 10px;
}

input[type="number"] {
  padding: 10px;
  font-size: 18px;
  width: 100%;
  margin-bottom: 10px;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

#resultado {
  font-size: 18px;
  margin-top: 20px;
}

En este ejemplo, el HTML crea un formulario con tres campos de entrada para ingresos, gastos y deudas, y un botón para calcular la capacidad de endeudamiento. El css se encarga de darle un estilo al formulario. Con este código se puede desplegar una interfaz simple que te permite ingresar tus ingresos, gastos y deudas y calcular tu capacidad de endeudamiento.

Aquí está todo lo de la clase y el proyecto:

https://lauramunozcaiced.github.io/taller-matematicas

Muchas Gracias Juan por tu apoyo para culminar mi proyecto
Realice una página para calcular el Producto Interno Bruto de un país.

<https://disturiz.github.io/Proyecto_PIB_Js/> 
https://github.com/Disturiz/Proyecto_PIB_Js

Ya complete mi proyecto esta es la pagina en GITHUB:
https://github.com/Disturiz/PIBIO
El repositorio es:
https://github.com/Disturiz/PIBIO

Disculpen la pagina en GITHUB es:
https://disturiz.github.io/PIBIO/

Lo logre😁hice una calculadora, que suma, resta, multiplica y divide (no funciona perfecto, al hacer una operación de 2 números tienes q reiniciarla con C, pero funciona), que además le metí la opción de sacar el interés compuesto!!
aquí les dejo el enlace para que la puedan provar y ver el código fuente
https://nanomanzo.github.io/calculadora/

Hola! 😄 Es un proyecto sencillo! Quiero hacer mas donde maneje listas y cosas mas avanzadas como en el proyecto salarial que hicimos pero por ahora este es mi proyecto! Cualquier comentario de mejora es bien recibido!

Este es el link para GitHub Pages:
https://laulexa.github.io/borrowing-power-calculator--learningJS/borrowingPowerCalculator.html

Este es el link del GitHub:
https://github.com/laulexa/borrowing-power-calculator--learningJS

Estas son unas imagenes 😃

Esta es responsive

Si alguno de ustedes sabe como puedo agregarle el signo pesos y las comas apenas escribo en el input, estaria super agradecida! lo intente un monton pero no supe como.

Cree un formulario de cupones

• No se me ocurrio algo complejo para calcular asi que me fui a las otras clases y se me ocurrio esta idea

Los hice con un datalist

Aca les dejo el link del repositorio de GitHub por si quieren saber como hice la lista

Fue duro terminar el curso, pero se logró, aquí está el link de mi trabajo final https://6509d0ba18794a1e1a56d477--relaxed-jelly-af43f6.netlify.app/

De todo lo mencionado en el texto de la izquierda, me quedo con esto.

• Organiza y documenta tu código para que sea más fácil de leer y entender.

Ojalo lo hubieran hecho en este curso. 😅

Asi me quedo mi ejercicio, el cual es sobre la capacidad de endeudamiento , la formula de esta es (salario - gastos) = resultado x 0.35.

Ya que no se especifica los gastos de cada persona, se hizo calculando (salario x 0.35).

Me quedo asi:

html

<body>
    <main class="main">
        <section class="main__content">
            <article class="main--form">
                <div class="main--form__content">
                    <h1>Calculo de capacidad de endeudamiento</h1>
                    <div>
                        <span>Por favor, pon el nombre</span> <span>de una persona para</span> <span>calcular su capacidad de endeudamiento</span>
                    </div>
                    <input type="text" name="" id="inputBorrowing">
                    <button class="buttonBorrowing">Calcular</button>
                    <p class="pBorrowing"></p>
                    <button class="pBorrowingGeneral">Mostrar todos</button>
                </div>
            </article>
            <article class="main--arrow">
                <div class="arrow__content">
                    <div style="--i: 1;" class="arrow"></div>
                    <div style="--i: -1;" class="arrow"></div>
                </div>
            </article>
            <article class="main--persons">
                <div class="persons">
                    <div class="persons__titles">
                        <div class="persons__titles__content">
                            <p class="titles__p">Nombre</p>
                            <p class="titles__p">Salarios</p>
                            <p class="titles__p">C.endeudamiento</p>
                        </div>
                    </div>
                    <div class="persons__information">
                        <div class="persons__information__content">
                            <div class="names grid">
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                                <p class="names__p"></p>
                            </div>
                            <div class="salary grid">
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                                <p class="salary__p"></p>
                            </div>
                            <div class="borrowing grid">
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                                <p class="borrowing__p"></p>
                            </div>
                        </div>
                    </div>
    
                </div>
            </article>
        </section>
    </main>


    <script src="platzimath.js"></script>
    <script src="salarios.js"></script>
    <script src="salario-analisis.js"></script>
    <script src="./Ejercicio-matePlatzi.js"></script>
</body>

css

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

body{
    display: flex;
    align-items: center;
    width: 100vw;
    height: 65vh;
    padding: 1vw;
    background: #ddd;
}
.main{
    width: 80vw;
    height: 22vw;
    margin-inline: auto;
    overflow-x: scroll;
    white-space: nowrap;
}
.main__content{
    display: flex;
    width: 100%;
    height: 100%;
    gap: 8vw;
}
.main--form{
    display: inline-block;
    width: max(400px, 41vw);
    height: max(253px, 21vw);
    background: #fff;
}
.main--form__content{
    position: relative;
    width: 132%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
}
.main--form__content h1{
    font-size: max(10px, 1.7vw);
}
.main--form__content span{
    font-size: max(11px, 1.3vw);
}
.main--form__content input{
    width: max(117px, 17vw);
    height: max(1.6vw, 20px);
    border-radius: 2vw;
    font-size: max(11px, 1vw);
}
.main--form__content button{
    width: max(8vw, 68px);
    height: max(3vw, 30px);
    margin: max(1vw, 10px);
    border-radius: 2vw;
    font-size: max(11px, 1vw);
}
.main--form__content .pBorrowing{
    font-size: max(11px, 1vw);
}
.main--form__content .pBorrowingGeneral{
    position: absolute;
    right: 0;
    bottom: 0;
    width: max(8vw, 106px);
    height: max(3vw, 33px);
    margin: 0;
    border-radius: 0;
}
.main--arrow{
    display: flex;
    align-items: center;
    width: 27vw;
    margin-left: 11vw;
    justify-content: flex-end;
}
.arrow__content{
    position: relative;
    width: 18vw;
    height: 2vw;
    border-radius: 2vw;
    background: white;
}
.arrow{
    position: absolute;
    right: 0;

    width: 40%;
    height: 100%;
    transform-origin: 87% 50%;
    transform: rotateZ(calc(45deg * var(--i)));
    border-radius: max(2vw, 20px);
    background-color: darkred;
}
.main--persons{
    display: inline-block;
    height: 20vw;
    background-color: rgb(146, 139, 139);
}
.persons{
    display: flex;

    width: 100%;
    height: 100%;
}
.persons__titles{
    display: inline-block;
    height: 100%;
}
.persons__titles__content{
    display: grid;
    grid-auto-columns: 10vw;
    height: 100%;
}
.titles__p{
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: lightsalmon;
    border: 1px solid black;
    font-size: max(11px, 1vw);
}
.persons__information{
    display: inline-block;
    height: 100%;
}
.persons__information__content{
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: 151vw;
    height: 100%;
}
.names{
    background-color: lightseagreen;
}
.salary{
    background-color: lightgreen;
}
.borrowing{
    background-color: lightsalmon;
}
.grid{
    display: grid;
    grid-template-columns: repeat(20, 1fr);
}
.grid p{
    display: flex;
    align-items: center;
    padding: 0.5vw;
    border: 1px solid black;
    overflow: hidden;
    font-size: max(11px, 1vw);
}





@media (max-width: 800px) {
    body{
        height: 100vh;
    }
    .main{
        height: 80vw;
        min-height: 620px;
    }
    .main__content{
        align-items: center;
        flex-direction: column;
        gap: max(14vw, 154px);
    }
    .main--form__content .pBorrowingGeneral{
        right: calc(50% - max(3vw, 48px));
    }
    .main--form{
        width: 70vw;
        min-width: 190px;
    }
    .main--form__content{
        width: 100%;
        height: 288px;
    }
    .main--form__content > div{
        width: 63%;
        display: flex;
        justify-content: center;
        padding: 4px 4px 12px;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .main--arrow{
        width: 60vw;
        margin-left: 0;
        justify-content: center;
    }
    .arrow__content{
        min-width: 150px;
        min-height: 17px;
        transform: rotateZ(90deg);
        border-radius: max(2vw, 20px);
    }
    .main--persons{
        height: 80vw;
    }
    .persons{
        flex-direction: column;
    }
    .persons__titles__content{
        grid-template-columns: repeat(3, minmax(4vw, 174px));
        grid-template-rows: minmax(43px, 7vw);
    }
    .persons__information__content{
        grid-template-columns: repeat(3, minmax(4vw, 174px));
        grid-template-rows: minmax(800px, 153vw);
    }
    .grid{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(20, 1fr);
    }
}

js

const namesPersons = document.querySelectorAll('.names__p');
const salarysPersons = document.querySelectorAll('.salary__p');
const borrowingPersons = document.querySelectorAll('.borrowing__p');
const inputBorrowing = document.querySelector('#inputBorrowing');
const buttonBorrowing = document.querySelector('.buttonBorrowing');
const buttonBorrowingGeneral = document.querySelector('.pBorrowingGeneral');
const pBorrowing = document.querySelector('.pBorrowing');


buttonBorrowing.addEventListener('click', () => {
    const capacidadDeEndeudamientoPersonal = (nombrepersona) => {
        const Nombrepersona = encontrarPersona(nombrepersona).name;
        if (!Nombrepersona) {
            pBorrowing.innerHTML = 'No es una persona de la lista';
            return;
        }
        const trabajos = encontrarPersona(nombrepersona).trabajos;
        const salario2023 = trabajos.find(trabajo => trabajo.year === 2023).salario;
    
        const capacidadDeEndeudamiento = salario2023 * 0.35; 
        
        pBorrowing.innerHTML = `La capacidad de endeudamiento de ${nombrepersona} es ${capacidadDeEndeudamiento}`;
    

    };

    capacidadDeEndeudamientoPersonal(inputBorrowing.value);
});

buttonBorrowingGeneral.addEventListener('click', () => {
    const capacidadDeEndeudamientoGeneral = () => {

    
    
        const personas = salarios.map(persona => persona.name);
    
        const salarios2023 = [];
    
        personas.forEach(nombre => {
            const persona = salarios.find(person => person.name === nombre);
            const salariosPorPersona = persona.trabajos.find(trabajo => trabajo.year === 2023).salario;
            salarios2023.push(salariosPorPersona);
        });
    
        const capacidadDeEndeudamiento = salarios2023.map(salario => salario * 0.35);
    

    
        personas.forEach((persona,index) => {
            salario = salarios2023[index];
            capacidad = capacidadDeEndeudamiento[index];
    
            const nameP = namesPersons[index];
            const salaryP = salarysPersons[index];
            const borrowingP = borrowingPersons[index];
          
            nameP.textContent = persona;
            salaryP.textContent = salario;
            borrowingP.textContent = capacidad;
    
            //console.log(`${persona} gana un total de ${salario}, su capacidad de endeudamiento es de ${capacidad}`)
        });
    
    
    };
    capacidadDeEndeudamientoGeneral()    
})

Economic-Wallet

Nos ayuda a llevar la cuenta de gastos con el 50/30/20 que se refiere porcentualmente gastos de cajón 50%, gastos propios 30% y ahorro 20%.
página web:Economic-Wallet
gitgub : github

comparto el proyecto realizado https://juanfaras2005.github.io/retoMatematicas.github.io/ es una calculadora de ahorro

Hola, mi aporte como reto personal consistió en agrandar un poco más la base de datos y realizar una gráfica en donde se observen el índice de desigualdad del 10% por cada año por empresa.
|
Podemos seleccionar las empresas que deseamos observar en el análisis.
|

Les comparto mi aporte. Ha sido un curso que he disfrutado muchísimo. Yo trabaje con la capacidad de endeudamiento y monto de endeudamiento.

Aqui mi proyecto, es una calculadora de interes compuesto
aqui el proyecto

en el diseño me inspire en el de nuestro compañero Jefferson Valencia Yataco

Mi proyecto fue un sitio web que calcula la capacidad de endeudamiento

Link para poder visitar la aplicación

Vista del proyecto

Capacidad-Endeudamiento

Buen dia, les comparto el proyecto que realice, una calculadora de interés

Así quedo mi mini proyecto, en verdad esta bien sencillo pero es trabajo honesto jajaja

he subido la pagina con la información que he recopilado durante el curso, me ha encantado y dentro de pronto actualizaré para subir el reto 😉.
https://g-code7.github.io/Reto-JavaScriptMath/

En mi caso quise realizar un calculadora de capacidad de endeudamiento al igual que hicieron por aquí otros compañeros. Me falta aún aprender un poco más sobre HTML y más aún sobre CSS para darle mejores estilos, pero en cuanto a JavaScript me sorprende lo que lo domino ya y en gran parte gracias al profe Juan y a Platzi! Por aquí dejo enlace a GitHub Pages: https://robefernandez22.github.io/taller-math-js/capacidad-endeudamiento/ y por aquí dejo el enlace al código: https://github.com/robefernandez22/taller-math-js/tree/master/capacidad-endeudamiento

Comparto mi pequeño proyecto:

Sitio web:
https://antonio2115.github.io/Proyecto-capacidad-de-endeudamiento/
Repositorio:
https://github.com/Antonio2115/Proyecto-capacidad-de-endeudamiento

Reto completado.
.
Usando conocimientos de cursos pasados emplee extensamente grid y flexbox, además de html semántico y manejo de arrays y objetos mostrados en este curso.
.
Aquí el sitio: https://sergioiscoding.github.io/Math-workshop-Challenge/financial.html
.
El proyecto fue enfocado más al análisis financiero, calculando el valor presente neto y tasa interna de retorno (elementos necesarios para saber si una inversión o proyecto son rentables), además de una calculadora de interés compuesto y amortización de deuda por anualidades.
.
Muchas gracias JuanDC por tus enseñanzas. Nos vemos pronto en próximos cursos!
.
.
.
repo: https://github.com/WhoisSergio/Math-workshop-Challenge
.
.
Mobile

.
.

Tablet

.
.

Desktop

Comparto mi proyecto, donde se tocan los temas de los 3 primero módulos (áreas y perímertros, porcentajes y fórmulas estadísticas).

Se encuentra en mi repositorio y aquí está la vista del proyecto.

Les comparto mi proyecto de calculo de prestaciones sociales con valores actualizados del año 2023, teniendo en cuenta el auxilio de transporte para este año.

Calcula:

• Cesantías
• Intereses sobre las cesantías
• Prima
• Vacaciones
• Total en prestaciones

Link para GiHub PAGES:

https://sebassg7.github.io/Prestaciones-Sociales-Calculo/proyecto-js-matematicas.html

Link para GiHub:
https://github.com/sebassg7/Prestaciones-Sociales-Calculo.git

Un proyecto que me gusto hacer y un Curso que lo disfrute aún más. Gracias por tus enseñanzas JuanDC

Repositorio