Average Calculator

Calculate the average of two numbers with light/dark mode for easy use. Please use Tampermonkey to install this script.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Average Calculator
// @version      1.3
// @description  Calculate the average of two numbers with light/dark mode for easy use. Please use Tampermonkey to install this script.
// @match        *://*/*
// @grant        none
// @author       Codification
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @license MIT
// @namespace https://sites.google.com/view/codification-
// ==/UserScript==

(function() {
  'use strict';
  var html = `
    <div id="average-calculator" style="position: fixed; bottom: 20px; left: 20px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
      <h2 id="calculator-title" style="margin-top: 0; color: #333;">Average Calculator</h2>
      <input type="number" id="num1" placeholder="Number 1" style="width: 100%; margin-bottom: 10px; padding: 8px; border-radius: 4px; border: 1px solid #ddd; box-sizing: border-box;">
      <input type="number" id="num2" placeholder="Number 2" style="width: 100%; margin-bottom: 10px; padding: 8px; border-radius: 4px; border: 1px solid #ddd; box-sizing: border-box;">
      <button id="calculate" style="background-color: #4CAF50; color: #fff; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;">Calculate Average</button>
      <p id="result" style="margin-top: 10px;"></p>
      <button id="dark-mode-toggle" style="position: absolute; top: 10px; right: 10px; background-color: #333; color: #fff; padding: 5px; border: none; border-radius: 50%; cursor: pointer;">🌙</button>
    </div>
  `;
  $('body').append(html);

  $('#num1, #num2').on('keydown', function(event) {
    if (event.key === 'Enter') {
      event.preventDefault();
      $('#calculate').click();
    }
  });

  $('#calculate').on('click', function() {
    var num1 = parseInt($('#num1').val(), 10);
    var num2 = parseInt($('#num2').val(), 10);
    if (isNaN(num1) || isNaN(num2)) {
      $('#result').html('<span style="color: #b50000;">Please enter valid numbers</span>');
    } else {
      var average = (num1 + num2) / 2;
      $('#result').html(`The average is: <span style="color: #4CAF50;">${average}</span>`);
    }
  });

  $('#dark-mode-toggle').on('click', function() {
    var calculator = $('#average-calculator');
    calculator.toggleClass('dark-mode');
    calculator.find('button').toggleClass('dark-mode-button');
    calculator.find('input').toggleClass('dark-mode-input');
    calculator.find('p').toggleClass('dark-mode-paragraph');
    var title = $('#calculator-title');

    if (calculator.hasClass('dark-mode')) {
      calculator.css('background-color', '#333');
      calculator.find('button').css('background-color', '#fff');
      calculator.find('button').css('color', '#333');
      calculator.find('input').css('background-color', '#444');
      calculator.find('input').css('color', '#fff');
      calculator.find('p').css('color', '#fff');
      title.css('color', '#fff');
      $('#dark-mode-toggle').html('☀️');
    } else {
      calculator.css('background-color', '#fff');
      calculator.find('button').css('background-color', '#4CAF50');
      calculator.find('button').css('color', '#fff');
      calculator.find('input').css('background-color', '#fff');
      calculator.find('input').css('color', '#333');
      calculator.find('p').css('color', '#333');
      title.css('color', '#333');
      $('#dark-mode-toggle').html('🌙');
    }
  });
})();