Toma el Taller Práctico de JavaScript: Videojuegos

Taller Práctico de JavaScript: Matemáticas y Estadística Básica

Contenido del curso

Introducción

1
¿Ya tomaste el Curso Práctico de JavaScript?
08:20 min

Matemáticas en JavaScript

Porcentajes

Estadística básica

Análisis de salarios

Próximos pasos

27
Toma el Taller Práctico de JavaScript: Videojuegos
Viendo ahora

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:27

Toma el Taller Práctico de JavaScript: Videojuegos

Taller Práctico de JavaScript: Matemáticas y Estadística Básica

Clase 27 de 27

Clase 27 / 27

Jesus Marquez Martini

Hace 4 años

hola como estan? estoy muy contento termine el curso y ademas logre crear una calculadora me costo demasiado miren mi nuevo proyecto

<!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="style.css">
    <script src="./index.js" defer></script>

    <title>Document</title>
</head>
<body>
    <main>
        <span class="out_put"></span>
        <div class="clear">c</div>
        <div class="division">/</div>
        <div class="mult">x</div>
        <div class="delete">delete</div>
        <div class="seven">7</div>
        <div class="eight">8</div>
        <div class="nine">9</div>
        <div class="minus">-</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
        <div class="plus">+</div>
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="equal_buttom">=</div>
        <div class="percentage">%</div>
        <div class="zero">0</div>
        <div class="point">.</div>
    </main>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;

}
main{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    place-items: center;
    align-self: center;
    border: 1px solid black;
    border-radius: 30px;
    width: 90%;
    height: 70%;
    /* justify-content: center;
    align-items: center; */
}
.out_put{
    grid-area: 1 / 1 / 1 / 5;
    border: 1px solid black;
    border-radius: 30px;
    margin: 60px 30px;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.out_put p {
    width: 20px;
    height: 20px;
    border: 1px solid;
    color: black;
    
}
div{
    border: 1px solid black;
    width: 50px;
    height: 50px;
    text-align: center  ;
}
.equal_buttom{
    grid-area: 5 / 4 / 7 / 5;
    height: 100%;
}

const output = document.querySelector('.out_put');
const clear_button = document.querySelector('.clear');
const division_button = document.querySelector('.division');
const mult = document.querySelector('.mult');
const delet_button = document.querySelector('.delete');
const seven = document.querySelector('.seven');
const eight = document.querySelector('.eight');
const nine = document.querySelector('.nine');
const minus_button = document.querySelector('.minus');
const four = document.querySelector('.four');
const five = document.querySelector('.five');
const six = document.querySelector('.six');
const plus = document.querySelector('.plus');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
const three = document.querySelector('.three');
const equal_buttom = document.querySelector('.equal_buttom');
const percentage_button = document.querySelector('.percentage');
const zero = document.querySelector('.zero');
const point = document.querySelector('.point');

let previus_number_display = document.createElement('p')
let current_number_display = document.createElement('p')
let previus_number = 0;
let current_number = 0;
let result = 0
let is_previus_number_available = false;


output.append(previus_number_display, current_number_display)

zero.addEventListener('click', math_zero)
point.addEventListener('click', math_point)
one.addEventListener('click', math_one) 
two.addEventListener('click', math_two) 
three.addEventListener('click', math_three) 
four.addEventListener('click', math_four) 
five.addEventListener('click', math_five) 
six.addEventListener('click', math_six) 
seven.addEventListener('click', math_seven) 
eight.addEventListener('click', math_eight) 
nine.addEventListener('click', math_nine) 


function math_zero() {
    let zero_display = zero.textContent;
    if( is_previus_number_available) {
        previus_number_display.innerHTML = previus_number_display.textContent + zero_display;
    } else {
        current_number_display.innerHTML = current_number_display.textContent + zero_display;
    }
}

function math_point(){
    let point_display = point.textContent;
    if( is_previus_number_available) {
        previus_number_display.innerHTML = previus_number_display.textContent + point_display;
    } else {
        current_number_display.innerHTML = current_number_display.textContent + point_display;
    }
}

function math_one() {
    let one_display = one.textContent;
    if(current_number_display.textContent == '0'){
            delete_number()
    }
    if( is_previus_number_available) {
        previus_number_display.innerHTML = previus_number_display.textContent + one_display;
    } else {
        current_number_display.innerHTML = current_number_display.textContent + one_display;
    }
}

function math_two() {
    let two_display = two.textContent;
    if(current_number_display.textContent == '0'){
            delete_number()
    }

    if( is_previus_number_available) {
        previus_number_display.innerHTML = previus_number_display.textContent + two_display;
    } else {
        current_number_display.innerHTML = current_number_display.textContent + two_display;
    }
}
function math_three() {
    let three_display = three.textContent;
    if(current_number_display.textContent == '0'){
            delete_number()
    }

    if( is_previus_number_available) {
        previus_number_display.innerHTML = previus_number_display.textContent + three_display;
    } else {
        current_number_display.innerHTML = current_number_display.textContent + three_display;
    }
}
function math_four() {
    let four_display = four.textContent;
    if(current_number_display.textContent == '0'){
            delete_number()
    }

    if( is_previus_number_available) {
        previus_number_display.innerHTML = previus_number_display.textContent + four_display;
    } else {
        current_number_display.innerHTML = current_number_display.textContent + four_display;
    }
}
function math_five() {
    let five_display = five.textContent;
    if(current_number_display.textContent == '0'){
            delete_number()
    }

    if( is_previus_number_available) {
        previus_number_display.innerHTML = previus_number_display.textContent + five_display;
    } else {
        current_number_display.innerHTML = current_number_display.textContent + five_display;
    }
}
function math_six() {
    let six_display = six.textContent;
    if(current_number_display.textContent == '0'){
            delete_number()
    }

    if( is_previus_number_available) {
        previus_number_display.innerHTML = previus_number_display.textContent + six_display;
    } else {
        current_number_display.innerHTML = current_number_display.textContent + six_display;
    }
}
function math_seven() {
    let seven_display = seven.textContent;
    if(current_number_display.textContent == '0'){
            delete_number()
    }

    if( is_previus_number_available) {
        previus_number_display.innerHTML = previus_number_display.textContent + seven_display;
    } else {
        current_number_display.innerHTML = current_number_display.textContent + seven_display;
    }
}
function math_eight() {
    let eight_display = eight.textContent;
    if(current_number_display.textContent == '0'){
            delete_number()
    }

    if( is_previus_number_available) {
        previus_number_display.innerHTML = previus_number_display.textContent + eight_display;
    } else {
        current_number_display.innerHTML = current_number_display.textContent + eight_display;
    }
}
function math_nine() {
    let nine_display = nine.textContent;
    if(current_number_display.textContent == '0'){
            delete_number()
    }

    if( is_previus_number_available) {
        previus_number_display.innerHTML = previus_number_display.textContent + nine_display;
    } else {
        current_number_display.innerHTML = current_number_display.textContent + nine_display;
    }
}


plus.addEventListener('click', adding)
function adding(){
    let plus_display = plus.textContent;
    previus_number_display.innerHTML = current_number_display.textContent + plus_display;
    current_number_display.innerHTML = ''; 
    is_previus_number_available = false
}
minus_button.addEventListener('click', minus)
function minus(){
    let minus_display = minus_button.textContent;
    previus_number_display.innerHTML = current_number_display.textContent + minus_display;
    current_number_display.innerHTML = ''; 
    is_previus_number_available = false
}
mult.addEventListener('click', times)
function times(){
    let times_display = mult.textContent;
    previus_number_display.innerHTML = current_number_display.textContent + times_display;
    current_number_display.innerHTML = ''; 
    is_previus_number_available = false
}
division_button.addEventListener('click', division)
function division(){
    let division_display = division_button.textContent;
    previus_number_display.innerHTML = current_number_display.textContent + division_display;
    current_number_display.innerHTML = ''; 
    is_previus_number_available = false
}
percentage_button.addEventListener('click', percentage)

function percentage(){
    let percentage_display = percentage_button.textContent;
    previus_number_display.innerHTML = current_number_display.textContent + percentage_display;
    current_number_display.innerHTML = ''; 
    is_previus_number_available = false
}

equal_buttom.addEventListener('click', final_result)

function final_result(){
    previus_number = Number(previus_number_display.innerText.slice(0, previus_number_display.innerText.length - 1))
    current_number = Number(current_number_display.innerText)
    just_sign = previus_number_display.innerText.slice(previus_number_display.innerText.length - 1)
    if(just_sign == '+'){
        result = previus_number + current_number
    }
    if ( just_sign == '-'){
        result = previus_number - current_number
    }
    if ( just_sign == 'x'){
        result = previus_number * current_number
    }
    if ( just_sign == '/'){
        result = previus_number / current_number
    }
    if( just_sign == '%'){
        result = (current_number * previus_number) / 100
    }
    clear_all()
    current_number_display.innerHTML = result

}

delet_button.addEventListener('click', delete_number)

function delete_number(){
    current_number_display.innerHTML = current_number_display.innerText.slice(0, current_number_display.innerText.length - 1,);
}

clear_button.addEventListener('click', clear_all)

function clear_all(){
    current_number_display.innerHTML = '';
    previus_number_display.innerHTML = '';
    is_previus_number_available = false

}

Comentarios (23)23 comentarios

Sergio Alejandro Saldaña Rangel

Juan Castro

Profesor

Nestor Rios Garcia

Hace 3 años

Paul Gutierrez Velasco

Duvan Yesid Becerra Rodríguez

Juan David Reyes

Génesis Jarlenis Patiño Ynfante

Ivan de jesus Romero leal

DANIEL MEDINA ARMADA Medina

Miguel Angel Hernandez Colombo

Jonathan Meixueiro

Manuel Andres García Vera

Ricardo Alfonso Chavez Vilcapoma

Maria Esther Mendoza Zafra

Jose Ever Muñoz Muñoz

Gualberto Montiel

Andres Badillo

Jefred Bedoya

Hace 6 meses

Juan David Santamaria Gomez

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

Porcentajes

Cómo calcular porcentajes

Calculando descuentos con JavaScript

Ejercicio de crear cupones de descuento

Método find vs. método filter

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

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

Toma el Taller Práctico de JavaScript: Videojuegos