MediaWiki:Common.js: Difference between revisions

From Roat Pkz
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
// --- COMMON.JS: Minimal Calculator Only ---
// --- COMMON.JS: Minimal Calculator (ES5 safe) ---
 
mw.hook('wikipage.content').add(function () {
document.addEventListener("DOMContentLoaded", function() {
     var container = document.getElementById("calcContainer");
     // Check if the page has the placeholder
    const container = document.getElementById("calcContainer");
     if (!container) return;
     if (!container) return;


    // Insert calculator HTML
     container.innerHTML =
     container.innerHTML = `
         '<div style="margin:10px 0;">' +
         <div style="margin:10px 0;">
             '<label>Num1: <input type="number" id="num1" value="0" style="width:60px;"></label> ' +
             <label>Num1: <input type="number" id="num1" value="0" style="width:60px;"></label>
             '<label>Num2: <input type="number" id="num2" value="0" style="width:60px;"></label> ' +
             <label>Num2: <input type="number" id="num2" value="0" style="width:60px;"></label>
             '<label>Operation: ' +
             <label>Operation:
                 '<select id="op">' +
                 <select id="op">
                     '<option value="+">+</option>' +
                     <option value="+">+</option>
                     '<option value="-">-</option>' +
                     <option value="-">-</option>
                     '<option value="*">*</option>' +
                     <option value="*">*</option>
                     '<option value="/">/</option>' +
                     <option value="/">/</option>
                 '</select>' +
                 </select>
             '</label> ' +
             </label>
             '<button id="calcButton">Calculate</button>' +
             <button id="calcButton">Calculate</button>
         '</div>' +
         </div>
         '<div>Result: <span id="result">0</span></div>';
         <div>Result: <span id="result">0</span></div>
    `;


     // Add functionality
     var btn = document.getElementById("calcButton");
    document.getElementById("calcButton").addEventListener("click", function() {
    btn.onclick = function () {
         const a = parseFloat(document.getElementById("num1").value);
         var a = parseFloat(document.getElementById("num1").value);
         const b = parseFloat(document.getElementById("num2").value);
         var b = parseFloat(document.getElementById("num2").value);
         const op = document.getElementById("op").value;
         var op = document.getElementById("op").value;
         let result;
         var result;


         if (isNaN(a) || isNaN(b)) {
         if (isNaN(a) || isNaN(b)) {
Line 43: Line 39:
         }
         }
         document.getElementById("result").textContent = result;
         document.getElementById("result").textContent = result;
     });
     };
});
});

Revision as of 02:36, 5 March 2026

// --- COMMON.JS: Minimal Calculator (ES5 safe) ---
mw.hook('wikipage.content').add(function () {
    var container = document.getElementById("calcContainer");
    if (!container) return;

    container.innerHTML =
        '<div style="margin:10px 0;">' +
            '<label>Num1: <input type="number" id="num1" value="0" style="width:60px;"></label> ' +
            '<label>Num2: <input type="number" id="num2" value="0" style="width:60px;"></label> ' +
            '<label>Operation: ' +
                '<select id="op">' +
                    '<option value="+">+</option>' +
                    '<option value="-">-</option>' +
                    '<option value="*">*</option>' +
                    '<option value="/">/</option>' +
                '</select>' +
            '</label> ' +
            '<button id="calcButton">Calculate</button>' +
        '</div>' +
        '<div>Result: <span id="result">0</span></div>';

    var btn = document.getElementById("calcButton");
    btn.onclick = function () {
        var a = parseFloat(document.getElementById("num1").value);
        var b = parseFloat(document.getElementById("num2").value);
        var op = document.getElementById("op").value;
        var result;

        if (isNaN(a) || isNaN(b)) {
            result = "Enter valid numbers";
        } else {
            switch(op) {
                case "+": result = a + b; break;
                case "-": result = a - b; break;
                case "*": result = a * b; break;
                case "/": result = b !== 0 ? a / b : "∞"; break;
                default: result = "Error";
            }
        }
        document.getElementById("result").textContent = result;
    };
});