Análisis de la Mediana Salarial con HTML, CSS y JavaScript

Clase 29 de 30 • Taller Práctico de JavaScript: Matemáticas y Estadística Básica

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

Para completar este reto 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:

Qué está pasando en Colombia y por qué hay protestas

Qué está pasando en Colombia en el 2021

Por qué hay protestas en Chile

Qué es la Economía Naranja (y qué no)

La economía de un programador

Cuánto ganarán los programadores en el 2020 y 2021

Los próximos 4 años de la industria Tech en Latinoamérica

¿Eres de izquierda o de derecha?

Qué es la Bolsa de Valores

Cómo prepararte para una recesión económica

Por qué hay crisis económica y en qué invertir

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 e Inteligencia Artificial. 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.

¡Nunca pares de aprender! :green_heart:

Comentarios

Antonio Mora

student•

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

Jorge Eliécer Sanabria Hernández

student•

Muy bueno, está genial

Jeremy Bryan Icó Herrera

student•

muy bueno, saludos tambien desde guatemala

Remix Zapata

student•

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.

Juan Castro

teacher•

Ufff. ¡Este proyecto está muy bueno, Angel! :clap:

Remix Zapata

student•

Gracias profesor JuanDC, ¡ahora voy por el examen! 💪

Felipe Moreno

student•

Todo lo visto en el curso: Pagina de github

Jefferson Valencia

student•

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

Juan Castro

teacher•

:clap::clap::clap:

Ivan de jesus Romero leal

student•

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

Raul Arias

student•

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

silfredo mario

student•

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.

Daniel Leandro Muñoz Castañeda

student•

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

Douglas Isturiz

student•

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://github.com/Disturiz/Proyecto_PIB_Js

Laura Muñoz

student•

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

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

Hector Maluy Fernandez

student•

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

Eder Raúl Abarca Raviela

student•

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

Calculadora de interés simple:

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

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

Jose Angel Esquivel Cisneros

student•

++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

Henry Alexander Velásquez Rosas

student•

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. 😅

Guadalupe MoralesCarmona

student•

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/

Luis Miguel Rodriguez

student•

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

Manuel Andres García Vera

student•

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/

Gualberto Montiel

student•

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">
  <h2>Calculadora de capacidad de endeudamiento</h2>

  <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.

Douglas Isturiz

student•

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

Douglas Isturiz

student•

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

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}`);

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

  <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>

.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;
}

Análisis de la Mediana Salarial con HTML, CSS y JavaScript

Introducción

¿Ya tomaste el Curso Práctico de JavaScript?

Matemáticas en JavaScript

Fórmulas matemáticas en JavaScript

Math en JavaScript

Reto: altura de un triángulo

Playground: Calcula la Altura de un Triángulo Escaleno

Porcentajes

Cómo calcular porcentajes

Calculando descuentos con JavaScript

Ejercicio de crear cupones de descuento

Método find vs. método filter

Playground: Encuentra el ID

Estadística básica

Qué es promedio, moda y mediana

Calculando el promedio

Método reduce

Calculando la mediana en una lista impar

Calculando la mediana en una lista par

Método sort

Calculando la moda: objetos a partir de arrays

Calculando la moda: arrays a partir de objetos

Playground: Transforma Objetos en Arrays

Promedio Ponderado en JavaScript: Fórmulas y Casos de Uso

PlatziMath: clases y métodos estáticos

Análisis de salarios

Cómo estructurar información en proyectos de software

Análisis salarial con JavaScript

Proyección salarial personal

Reestructurando información sobre la marcha

Salarios empresariales

Proyección de salarios por empresas

Top 10% de salarios

Análisis de la Mediana Salarial con HTML, CSS y JavaScript

Próximos pasos

Toma el Taller Práctico de JavaScript: Videojuegos