☰

Money Calculator

Count the occurrences of the $ symbol on a webpage and display the count and total in a draggable box

// ==UserScript==
// @name         Money Calculator
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Count the occurrences of the $ symbol on a webpage and display the count and total in a draggable box
// @author       You
// @match        *://*/*
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        #dollarCountContainer {
            position: fixed;
            top: 10px;
            left: 10px;
            padding: 10px;
            background: #ccebff; /* Light Blue */
            border: 1px solid #ccc;
            z-index: 9999;
            cursor: move;
            min-width: 250px;
        }

        #dollarCountContainer input {
            width: 100%;
            font-weight: bold;
            font-size: 14px;
        }

        #dollarCountContainer a {
            color: #00cc00; /* Green */
            font-weight: bold;
            font-size: 14px;
            text-decoration: none;
        }

        #dollarCountContainer a:hover {
            text-decoration: underline;
        }
    `);

    // Function to count occurrences of the $ symbol and display the count and total in a draggable box
    function countDollars() {
        // Get all text content on the page
        const pageText = document.body.innerText;

        // Find all occurrences of the $ symbol with optional commas and decimals
        const matches = pageText.match(/\$\d{1,3}(,\d{3})*(\.\d{1,2})?/g) || [];

        // Count and calculate the total value
        const dollarCount = matches.length;
        const totalValue = matches.reduce((sum, match) => sum + parseFloat(match.slice(1).replace(/,/g, '')), 0);

        // Display the count and total value in a draggable box
        if (!document.getElementById('dollarCountContainer')) {
            // If the container doesn't exist, create it
            const container = document.createElement('div');
            container.id = 'dollarCountContainer';

            // Create a title bar for dragging
            const titleBar = document.createElement('div');
            titleBar.style.width = '100%';
            titleBar.style.height = '20px';
            titleBar.style.backgroundColor = '#ddd';
            titleBar.style.cursor = 'move';
            titleBar.innerText = 'Drag here';

            // Create a signature on the right side
            const signature = document.createElement('div');
            signature.style.float = 'right';
            signature.style.paddingRight = '5px';
            signature.style.color = '#00cc00'; // Green
            signature.innerHTML = 'By <a href="https://twitter.com/l1ackoder" target="_blank">@l1ackoder</a>';

            titleBar.appendChild(signature);
            container.appendChild(titleBar);

            // Create a text box to display the count and total bounty
            const textBox = document.createElement('input');
            textBox.type = 'text';

            // Check if the total value is greater than or equal to 1000, then display in "k" format
            if (totalValue >= 1000) {
                textBox.value = `Count: ${dollarCount} | Total: $${(totalValue / 1000).toFixed(2)}k`;
            } else {
                textBox.value = `Count: ${dollarCount} | Total: $${totalValue.toFixed(2)}`;
            }

            textBox.readOnly = true;
            container.appendChild(textBox);

            // Make the container draggable
            let isDragging = false;
            let offsetX, offsetY;

            titleBar.addEventListener('mousedown', (e) => {
                isDragging = true;
                offsetX = e.clientX - container.getBoundingClientRect().left;
                offsetY = e.clientY - container.getBoundingClientRect().top;
            });

            document.addEventListener('mousemove', (e) => {
                if (isDragging) {
                    container.style.left = e.clientX - offsetX + 'px';
                    container.style.top = e.clientY - offsetY + 'px';
                }
            });

            document.addEventListener('mouseup', () => {
                isDragging = false;
            });

            // Append the container to the body
            document.body.appendChild(container);
        } else {
            // If the container exists, update the text box content
            const textBox = document.querySelector('#dollarCountContainer input');

            // Check if the total value is greater than or equal to 1000, then display in "k" format
            if (totalValue >= 1000) {
                textBox.value = `Count: ${dollarCount} | Total: $${(totalValue / 1000).toFixed(2)}k`;
            } else {
                textBox.value = `Count: ${dollarCount} | Total: $${totalValue.toFixed(2)}`;
            }
        }
    }

    // Execute the countDollars function when the page has finished loading
    window.addEventListener('load', countDollars);

    // Listen for changes to the DOM (dynamic updates) and update the count
    const observer = new MutationObserver(countDollars);
    observer.observe(document.body, { subtree: true, childList: true });
})();