Hace unos momentos estaba revisando mi historial de compras en Steam y me dio curiosidad por saber cuánto he gastado (o comprado) en total. Así que en lugar de hacer la cuenta a mano decidí hacer un pequeño script.

Por cierto, esto es para probar en la página de Steam en un navegador. La página es: https://store.steampowered.com/account/history/

Explicación

Este código que te presento es para ser colocado en la consola. No es un script que consuma una API o algo así, solo es algo creado por diversión.

El script de js básicamente lee el DOM, y debido a que los elementos que tienen el precio contienen la clase wht_total solo basta con recuperarlos usando querySelectorAll. Más tarde, limpiamos el valor, pues tiene saltos de línea, para esto usamos trim.

Después obtenemos la parte numérica, haciendo un split y separando con $  para obtener el número real. Y finalmente lo convertimos a flotante para sumarlo al total.

Código

Lo que comenté arriba se traduce al siguiente código:

let total = 0;
document.querySelectorAll(".wht_total").forEach(elemento => {
    const valor = elemento.textContent.trim();
    // Omitir el encabezado "total"
    if (valor.indexOf("$") != -1) {
        const pagado = parseFloat(valor.split("$ ")[1]);
        total += pagado;
    }
});
console.log("Has gastado %f", total);

Basta con ir a la página que mencioné al inicio, abrir la consola con F12 si estás en el glorioso Chrome y finalmente ver el resultado.

Pasar variable de PHP a JavaScript

En este tutorial te mostraré un pequeño truco para hacer que una variable de PHP esté accesible desde JavaScript. Y no solo una variable, también un objeto, arreglo, etcétera. Si bien esto no es recomendable, pues en su lugar debería usarse AJAX, podemos usar este pequeño truco en apuros para…

abril 26, 2020

En "javascript"

Gráficas de barras con Chart.js y AngularJS para mostrar estadísticas y reportes

Introducción En este post daré una pequeña introducción a la creación de gráficas de barras usando el poderoso y superheroico framework AngularJS. Usaremos también la librería llamada ChartJS y otra llamada angular-chart. Lo que hace ésta última es "pegar" o juntar a las dos primeras. ChartJS puede ser usado sin…

noviembre 24, 2017

En "angularjs"

Generar Códigos QR con AngularJS y QrCode

Introducción Ya vimos anteriormente cómo podemos generar códigos de barras con AngularJS en este post. Hoy veremos cómo generar códigos QR. No sé la diferencia entre esos 2, pero creo que los QR pueden guardar más información y su lectura es más fácil. En fin, no vamos a ver las…

abril 24, 2018

En "angularjs"