Toma el Taller Práctico de JavaScript: Videojuegos

Clase 30 de 30 • 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

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

Tomar examen

Jesus Marquez Martini

student•

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

}

Toma el Taller Práctico de JavaScript: Videojuegos

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