Ejercicio 1 - Calculadora

● Introducción

Este ejercicio práctico básico sirve como primer contacto con el lenguaje javascript.
Podés visitar el ejercicio que desarrollaremos aquí.↩

● Preparación

• ◆ Creamos una carpeta y la abrimos con Visual Studio Code.
• ◆ Generamos el archivo index.html , style.css y script.js.
• ◆ Conectamos en el index.html las etiquetas link y script.
• ◆ Correjimos el lenguaje y completamos el título.
• ◆ Agregamos las etiquetas meta según nuestro objetivo con los buscadores y la difusión de este sitio en redes.
• Nos quedaría el siguiente index.html:

    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Ejercicio para iniciarse en Javascript">
        <link rel="stylesheet" href="style.css">
        <title>Calculadora - Javascript</title>
    </head>
    <body>
        

        <script src="script.js"></script>
    </body>
    </html>

• ◆ Observamos con Live Server y Live Preview.

● Desarrollo index.html

Armamos el teclado:

<body>
    <main>
        <h1>Mi Calculadora</h1>
        <div class="calculadora">
            <!-- Donde pondremos lo que tecleamos y el resultado -->
            <div class="info"></div>
            <div class="teclado">
                <!-- Son 16 teclas. Escribimos 1 y con alt+shift presionados, tocamos la tecla abajo ↓ y se van generando las demás etiquetas -->
                 <button>7</button>
                 <button>8</button>
                 <button>9</button>
                 <button>C</button>
                 <button>4</button>
                 <button>5</button>
                 <button>6</button>
                 <button>-</button>
                 <button>1</button>
                 <button>2</button>
                 <button>3</button>
                 <button>+</button>
                 <!-- tecla window + punto -->
                 <button>←</button>
                 <button>0</button>
                 <button>.</button>
                 <button>=</button>
            </div>
            <!-- Esa ubicación la determiné yo, practicando. -->
        </div>
    </main>

    <script src="script.js"></script>
</body>

● Desarrollo style.css

Al darle estilo, la calculadora se va a armar.

    /* Configuración básica en todos los casos */
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        /* Propiedades que aplican a todas las etiquetas */
    }
    body{
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        /* Propiedades heredables */
    }

    /* Específicas de este proyecto */
    main{
        height: 100vh;
        width: 100vw;
    }
    h1{
        text-align: center;
        /* margen arriba y abajo */
        margin-block: 1rem;
        color: darkcyan;
    }
    .calculadora{
        width: 500px;
        border: 0.5px solid gray;
        border-radius: 5px;
        /* Para centrarla */
        margin: 0 auto;
    }
    .info{
        /* Ocupa el 100% del padre, que es la calculadora que mide 500px */
        width: 100%;
        height: 60px;
        /* primer valor arriba/abajo segundo valor laterales */
        padding: 0 30px;
        background-color: darkcyan;
        color: cyan;
        font-size:50px;
        text-align: right;
        overflow: hidden;
    }
    .teclado{
        padding: 30px 0;
        /* los dispone uno al lado del otro */
        display: flex;
        /* Pero como tiene wrap, si no entra, baja a la línea siguiente */
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        /* separación entre botones */
        gap: 5px;
    }
    button{
        width: 100px;
        height: 100px;
        background-color: white;
        color: darkcyan;
        font-size: 50px;
        cursor: pointer;
        border: 0.5px solid darkcyan;
        /* La transición de estado normal a hover */
        transition: all 1s ease;

    }
    button:hover{
        background-color: cyan;
        color: darkcyan;
    }

Con esto la calculadora queda armada, pero no hace nada. Falta el script de javascript, que es el objetivo de este ejercicio.

● Desarrollo script.js

◆ Javascript se aplica sobre la estructura lógica del HTML que tiene en la memoria el navegador. Es por ello que debemos aplicarlo al final. ◆ El esqueleto de documento debe estar creado. (Puede crearse con javascript, pero este no es el caso.) ◆ Identificamos la etiqueta donde escribiremos.

// Identificamos la etiqueta donde escribiremos
const info = document.querySelector('.info');

//es una función que recibe un valor y lo agrega en la etiqueta identificada.
const mostrar = (valor)=>{
    info.innerHTML= info.innerHTML + valor;
}

innerHTML: Es una propiedad de javascript que permite modificar el código HTML que se encuentra dentro de un elemento de la página web. En este caso el elemento identificado como info

• ◆Etiqueta sería div, elemento es la etiqueta con su contenido, es decir todo.

• ◆ Agregamos esta función a cada button

    <main>
        <h1>Mi Calculadora</h1>
        <div class="calculadora">
            <!-- Donde pondremos lo que tecleamos y el resultado -->
            <div class="info"></div>
            <div class="teclado">
                <!-- Son 16 teclas. Escribimos 1 y con alt+shift presionados, tocamos la tecla abajo ↓ y se van generando las demás etiquetas -->
                 <button onclick="mostrar(7)">7</button>
                 <button onclick="mostrar(8)">8</button>
                 <button onclick="mostrar(9)">9</button>
                 <button onclick="">C</button>
                 <button onclick="mostrar(4)">4</button>
                 <button onclick="mostrar(5)">5</button>
                 <button onclick="mostrar(6)">6</button>
                 <button onclick="mostrar('-')">-</button>
                 <button onclick="mostrar(1)">1</button>
                 <button onclick="mostrar(2)">2</button>
                 <button onclick="mostrar(3)">3</button>
                 <button onclick="mostrar('+')">+</button>
                 <!-- tecla window + punto -->
                 <button>←</button>
                 <button onclick="mostrar(0)">0</button>
                 <button onclick="mostrar('.')">.</button>
                 <button>=</button>
            </div>
            <!-- Esa ubicación la determiné yo, practicando. -->
        </div>
    </main>

● Función Borrar()

//Para borrar todo lo que hay
const borrar = ()=>{
    info.innerHTML="";
}

En el index.html

<button onclick="borrar()">C</button>

• ◆ Para el caso, de solo borrar un dígito.

//Para borrar solo un dígito
const borrarUnDigito =()=>{
    info.innerHTML = info.innerHTML.slice(0,-1);
}

• Esta línea de código elimina el último carácter del contenido visual (HTML) que está dentro de un elemento con el nombre info
• Empieza desde el principio (posición 0) y se detiene exactamente un carácter antes del final (-1), borrando la última letra, número o espacio. En el index.html

<button onclick="borrarUnDigito()">←</button>

● Función Calcular()

// Para calcular

const calcular = ()=>{
    //Se escribe esta sentencia por si sucede algún error, esté bajo control.
    try {
        if(!info.innerHTML){
            // si no hay nada 
            info.innerHTML = "0";
        }else{
            //sino
            info.innerHTML = eval(info.innerHTML);
        }
        
    } catch (error) {
        info.innerHTML = "Error";
    }
}

 <button onclick="calcular()">=</button>

Pero después de calcular, debemos reiniciar el proceso automáticamente.

• ◆ Pondremos una bandera, que nos indique cuando se inicia un cálculo y cuando finaliza.

1- Identificamos la variable

const info = document.querySelector('.info');
let bandera = 'inicio';
...

2- Modificamos la función mostrar()

    const mostrar = (valor)=>{
        if(bandera === 'inicio'){
            info.innerHTML= valor;
        }else{

        info.innerHTML= info.innerHTML + valor;
        }
        // la primera vez que se muestra un número, cambia, hasta que se calcule el resultado.
        bandera = "yainicio";
    }

3- Tanto si calculamos o si borramos todo, volvemos la bandera a inicio

const calcular = ()=>{
    //Se escribe esta sentencia por si sucede algún error, esté bajo control.
    try {
        if(!info.innerHTML){
            // si no hay nada 
            info.innerHTML = "0";
        }else{
            //sino
            info.innerHTML = eval(info.innerHTML);
        }
        
    } catch (error) {
        info.innerHTML = "Error";
    }
    bandera='inicio';
}

const borrar = ()=>{
    info.innerHTML="";
    bandera='inicio';
}

● Verificaciones

//Verificaciones. Hay muchas, pero como es solo un ejercicio de presentación de javascript, solo haremos las básicas.

function formatearNumero(num){
    //Si es entero y no está en notación científica.
    if(Number.isInteger(num) && Math.abs(num) < 1e21){
        return num.toString();
    }
    // si es muy grande o tiene muchos decimales
    return Number(num).toPrecision(6);
}

Formateamos el resultado.

const calcular = ()=>{
    //Se escribe esta sentencia por si sucede algún error, esté bajo control.
    try {
        if(!info.innerHTML){
            // si no hay nada 
            info.innerHTML = "0";
        }else{
            //sino
            //formateo el resultado
            info.innerHTML = formatearNumero(eval(info.innerHTML));
        }
        
    } catch (error) {
        info.innerHTML = "Error";
    }
    bandera='inicio';
}

La función eval() en JavaScript evalúa o ejecuta un texto (String) como si fuera código de programación real.