negative modulo (v117)

Revision 117 of this benchmark created on

Preparation HTML

<script>
const body = document.getElementById('body');
const buttonDtarkSlider = document.getElementById('DtarkSlider');
const display = document.getElementById('display');
const board = document.getElementById('board');
const buttonboard = Array.from(document.getElementsByTagName('button'));
const buttondel = document.getElementById('del');
const buttonequal = document.getElementById('equal');
const buttonrest = document.getElementById('rest');
const header = document.getElementById('header');

let postionslider = [19, 36, 0];
let count = 0;
let numbers = '';
let backgroundColors = '';


const color = [
  'hsl(30, 25%, 89%)',
  'hsl(268, 75.0%, 9.4%)',
  'hsl(222, 26%, 31%)',
];

const propertySets = {
  0: [
    '--clr-Verydark',
    '--clr-white',
    '--clr-Orange',
    '--clr-whiteOpacitiy',
    '--clr-Purecyan',
    '--clr-Orange',
    '--clr-Purecyan'
  ],

  1: [
    '--clr-Lightyellow',
    '--clr-Verydarkviolet',
    '--clr-DarkModeratecyan',
    '--clr-Verydarkviolet',
    '--clr-Darkviolet',
    '--clr-DarkModeratecyan',
    '--clr-Darkviolet'
  ]
};

const backgroundElement = [
  display,
  buttonDtarkSlider,
  board,
  buttondel,
  buttonequal,
  buttonrest,
];

/**
 * This function is responsible for moving the slider to change the colors
 */
function moveSlider() {
  buttonDtarkSlider.style.transform = `translateX(${postionslider[count]}px)`;
  changeBackgroundColor(count);
  count = (count + 1) % 3; // Wrap count back to 0 after 2

  if (count === 0) {
    backgroundElement.forEach((element) => {
      element.removeAttribute('style');
      element.style.transition = '0.5s 2s ease-out';
    });
  }
}




function changeBackgroundColorButtonBoard() {
  const regex = /\b(reset|del|=)\b/g;

  const board = buttonboard.filter((x) => regex.test(x.textContent));

  buttonboard.forEach((button) => {
    button.style.background = 'var(--clr-Verydarkviolet)';
    button.style.transition = '0.5s ease-out';
  });
}


function changeBackgroundColor(count) {
  const regex = /^--clr-(Verydark|Lightyellow)$/;
  body.style.background = color[count];
  let size = 3
  lll

  if (!(count in propertySets)) {
    count = 0;  // Restablecer count a cero si es un índice inválido
  }




  /**
   *  count = 0;
   *
   * position arrays of element
   * --------------------------
   * 3  -> buttondel
   * 4  -> buttonequal
   * 5  -> buttonrest
   *
   *
   * 
   *
   * int -> 32bits
   *
   *
   * 000000000000000000000000100 -> 4
   * 000000000000000000000000101 -> 5
   *
   *
   * Realizo desplazamiento, hacia la derecha
   *--------------------------------------------
   * 000000000000000000000000101 -> 5
   * transforma en...
   * 000000000000000000000000011 -> 3
   *
   * let size = 3;
   * let next = 5;
   *
   * >> 1 desplazo, hacia la derecha.
   * size = (next >> 1) + 2; -> 4 
   *
   * 
   * 00000000000000000000000100 -> 4  
   * 000000000000000000000000011 -> 3
   * 
   * if (index != size){
   *   getComputedStyle(backgroundElement[index])
        .getPropertyValue(x); 
   * }
   * 


   * count = 1;
   * 
   */


  backgroundColors = propertySets[count]
    .filter((x) => regex.test(x))
    .map((x, index) =>
      getComputedStyle(backgroundElement[index])
        .getPropertyValue(x))
    .join('');


  propertySets[count].slice(1).forEach((x, index) => {

    const color = getComputedStyle(backgroundElement[index])
      .getPropertyValue(x);

    const elementStyle = backgroundElement[index].style;



    elementStyle.setProperty('background', color);
    //elementStyle.setProperty('hover', backgroundColors);  
    elementStyle.setProperty('color', backgroundColors);
    elementStyle.transition = '0.5s 2s ease-out';
  });


  if (index === 2) {
    changeBackgroundColorButtonBoard();
  }

}


/**
 * This function is responsible for resetting the calculator
 */
function resetNumber(element) {
  let data = element.innerHTML.toString();
  numbers = numbers.concat(data).replace('•', ',');

  if (numbers.includes('del')) {
    numbers = numbers.replace('del', '').slice(0, -1);
  }

  if (numbers.includes('reset')) {
    numbers = '';
  }

  operationNumber();
  display.innerHTML = numbers.length === 0 ? '0' : numbers;
}

/**
 * Performs arithmetic operations based on the input string.
 */
function operationNumber() {
  const regex = /^(-?\d*\.?\d+)([-+x/])(-?\d*\.?\d+)(([-+x/]-?\d*\.?\d+)*)(=)$/;
  const rex = /^(0*(\.\d+)?\/0+(\.0+)?=|\d+(\.\d+)?\/0+(\.0+)?=)$/;

  if (numbers.match(regex) && !numbers.match(rex)) {
    // Replace 'x' with '*' for multiplication
    numbers = numbers.replace(/x/g, '*').replace('=', '');

    // Evaluate the mathematical expression
    let result = eval(numbers);
    numbers = result.toString().replace('.', ',');
    display.innerHTML = numbers;


  } else if (numbers.includes('=')) {
    numbers = numbers.replace('=', '');
    Swal.fire({
      title: 'ADVERTENCIA',
      text: 'Error en la expresión matemática.',
      icon: 'warning',
      footer: '<a href="page_info.html" target="_blank">Más información...</a>'
    });
  }
}

buttonDtarkSlider.addEventListener('click', moveSlider);

buttonboard.forEach((element) => {
  element.addEventListener('click', () => resetNumber(element));
});

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
modulo prototype
const body = document.getElementById('body');
const buttonDtarkSlider = document.getElementById('DtarkSlider');
const display = document.getElementById('display');
const board = document.getElementById('board');
const buttonboard = Array.from(document.getElementsByTagName('button'));
const buttondel = document.getElementById('del');
const buttonequal = document.getElementById('equal');
const buttonrest = document.getElementById('rest');
const header = document.getElementById('header');

let postionslider = [19, 36, 0];
let count = 0;
let numbers = '';
let backgroundColors = '';


const color = [
  'hsl(30, 25%, 89%)',
  'hsl(268, 75.0%, 9.4%)',
  'hsl(222, 26%, 31%)',
];

const propertySets = {
  0: [
    '--clr-Verydark',
    '--clr-white',
    '--clr-Orange',
    '--clr-whiteOpacitiy',
    '--clr-Purecyan',
    '--clr-Orange',
    '--clr-Purecyan'
  ],

  1: [
    '--clr-Lightyellow',
    '--clr-Verydarkviolet',
    '--clr-DarkModeratecyan',
    '--clr-Verydarkviolet',
    '--clr-Darkviolet',
    '--clr-DarkModeratecyan',
    '--clr-Darkviolet'
  ]
};

const backgroundElement = [
  display,
  buttonDtarkSlider,
  board,
  buttondel,
  buttonequal,
  buttonrest,
];

/**
 * This function is responsible for moving the slider to change the colors
 */
function moveSlider() {
  buttonDtarkSlider.style.transform = `translateX(${postionslider[count]}px)`;
  changeBackgroundColor(count);
  count = (count + 1) % 3; // Wrap count back to 0 after 2

  if (count === 0) {
    backgroundElement.forEach((element) => {
      element.removeAttribute('style');
      element.style.transition = '0.5s 2s ease-out';
    });
  }
}




function changeBackgroundColorButtonBoard() {
  const regex = /\b(reset|del|=)\b/g;

  const board = buttonboard.filter((x) => regex.test(x.textContent));

  buttonboard.forEach((button) => {
    button.style.background = 'var(--clr-Verydarkviolet)';
    button.style.transition = '0.5s ease-out';
  });
}


function changeBackgroundColor(count) {
  const regex = /^--clr-(Verydark|Lightyellow)$/;
  body.style.background = color[count];
  let size = 3
  lll

  if (!(count in propertySets)) {
    count = 0;  // Restablecer count a cero si es un índice inválido
  }




  /**
   *  count = 0;
   *
   * position arrays of element
   * --------------------------
   * 3  -> buttondel
   * 4  -> buttonequal
   * 5  -> buttonrest
   *
   *
   * 
   *
   * int -> 32bits
   *
   *
   * 000000000000000000000000100 -> 4
   * 000000000000000000000000101 -> 5
   *
   *
   * Realizo desplazamiento, hacia la derecha
   *--------------------------------------------
   * 000000000000000000000000101 -> 5
   * transforma en...
   * 000000000000000000000000011 -> 3
   *
   * let size = 3;
   * let next = 5;
   *
   * >> 1 desplazo, hacia la derecha.
   * size = (next >> 1) + 2; -> 4 
   *
   * 
   * 00000000000000000000000100 -> 4  
   * 000000000000000000000000011 -> 3
   * 
   * if (index != size){
   *   getComputedStyle(backgroundElement[index])
        .getPropertyValue(x); 
   * }
   * 


   * count = 1;
   * 
   */


  backgroundColors = propertySets[count]
    .filter((x) => regex.test(x))
    .map((x, index) =>
      getComputedStyle(backgroundElement[index])
        .getPropertyValue(x))
    .join('');


  propertySets[count].slice(1).forEach((x, index) => {

    const color = getComputedStyle(backgroundElement[index])
      .getPropertyValue(x);

    const elementStyle = backgroundElement[index].style;



    elementStyle.setProperty('background', color);
    //elementStyle.setProperty('hover', backgroundColors);  
    elementStyle.setProperty('color', backgroundColors);
    elementStyle.transition = '0.5s 2s ease-out';
  });


  if (index === 2) {
    changeBackgroundColorButtonBoard();
  }

}


/**
 * This function is responsible for resetting the calculator
 */
function resetNumber(element) {
  let data = element.innerHTML.toString();
  numbers = numbers.concat(data).replace('•', ',');

  if (numbers.includes('del')) {
    numbers = numbers.replace('del', '').slice(0, -1);
  }

  if (numbers.includes('reset')) {
    numbers = '';
  }

  operationNumber();
  display.innerHTML = numbers.length === 0 ? '0' : numbers;
}

/**
 * Performs arithmetic operations based on the input string.
 */
function operationNumber() {
  const regex = /^(-?\d*\.?\d+)([-+x/])(-?\d*\.?\d+)(([-+x/]-?\d*\.?\d+)*)(=)$/;
  const rex = /^(0*(\.\d+)?\/0+(\.0+)?=|\d+(\.\d+)?\/0+(\.0+)?=)$/;

  if (numbers.match(regex) && !numbers.match(rex)) {
    // Replace 'x' with '*' for multiplication
    numbers = numbers.replace(/x/g, '*').replace('=', '');

    // Evaluate the mathematical expression
    let result = eval(numbers);
    numbers = result.toString().replace('.', ',');
    display.innerHTML = numbers;


  } else if (numbers.includes('=')) {
    numbers = numbers.replace('=', '');
    Swal.fire({
      title: 'ADVERTENCIA',
      text: 'Error en la expresión matemática.',
      icon: 'warning',
      footer: '<a href="page_info.html" target="_blank">Más información...</a>'
    });
  }
}

buttonDtarkSlider.addEventListener('click', moveSlider);

buttonboard.forEach((element) => {
  element.addEventListener('click', () => resetNumber(element));
});
ready
non prototype
const body = document.getElementById('body');
const buttonDtarkSlider = document.getElementById('DtarkSlider');
const display = document.getElementById('display');
const board = document.getElementById('board');
const buttonboard = Array.from(document.getElementsByTagName('button'));
const buttondel = document.getElementById('del');
const buttonequal = document.getElementById('equal');
const buttonrest = document.getElementById('rest');
const header = document.getElementById('header');

let postionslider = [19, 36, 0];
let count = 0;
let numbers = '';
let backgroundColors = '';


const color = [
  'hsl(30, 25%, 89%)',
  'hsl(268, 75.0%, 9.4%)',
  'hsl(222, 26%, 31%)',
];

const propertySets = {
  0: [
    '--clr-Verydark',
    '--clr-white',
    '--clr-Orange',
    '--clr-whiteOpacitiy',
    '--clr-Purecyan',
    '--clr-Orange',
    '--clr-Purecyan'
  ],

  1: [
    '--clr-Lightyellow',
    '--clr-Verydarkviolet',
    '--clr-DarkModeratecyan',
    '--clr-Verydarkviolet',
    '--clr-Darkviolet',
    '--clr-DarkModeratecyan',
    '--clr-Darkviolet'
  ]
};

const backgroundElement = [
  display,
  buttonDtarkSlider,
  board,
  buttondel,
  buttonequal,
  buttonrest,
];

/**
 * This function is responsible for moving the slider to change the colors
 */
function moveSlider() {
  buttonDtarkSlider.style.transform = `translateX(${postionslider[count]}px)`;
  changeBackgroundColor(count);
  count = (count + 1) % 3; // Wrap count back to 0 after 2

  if (count === 0) {
    backgroundElement.forEach((element) => {
      element.removeAttribute('style');
      element.style.transition = '0.5s 2s ease-out';
    });
  }
}




function changeBackgroundColorButtonBoard() {
  const regex = /\b(reset|del|=)\b/g;

  const board = buttonboard.filter((x) => regex.test(x.textContent));

  buttonboard.forEach((button) => {
    button.style.background = 'var(--clr-Verydarkviolet)';
    button.style.transition = '0.5s ease-out';
  });
}


function changeBackgroundColor(count) {
  const regex = /^--clr-(Verydark|Lightyellow)$/;
  body.style.background = color[count];
  let size = 3
  lll

  if (!(count in propertySets)) {
    count = 0;  // Restablecer count a cero si es un índice inválido
  }




  /**
   *  count = 0;
   *
   * position arrays of element
   * --------------------------
   * 3  -> buttondel
   * 4  -> buttonequal
   * 5  -> buttonrest
   *
   *
   * 
   *
   * int -> 32bits
   *
   *
   * 000000000000000000000000100 -> 4
   * 000000000000000000000000101 -> 5
   *
   *
   * Realizo desplazamiento, hacia la derecha
   *--------------------------------------------
   * 000000000000000000000000101 -> 5
   * transforma en...
   * 000000000000000000000000011 -> 3
   *
   * let size = 3;
   * let next = 5;
   *
   * >> 1 desplazo, hacia la derecha.
   * size = (next >> 1) + 2; -> 4 
   *
   * 
   * 00000000000000000000000100 -> 4  
   * 000000000000000000000000011 -> 3
   * 
   * if (index != size){
   *   getComputedStyle(backgroundElement[index])
        .getPropertyValue(x); 
   * }
   * 


   * count = 1;
   * 
   */


  backgroundColors = propertySets[count]
    .filter((x) => regex.test(x))
    .map((x, index) =>
      getComputedStyle(backgroundElement[index])
        .getPropertyValue(x))
    .join('');


  propertySets[count].slice(1).forEach((x, index) => {

    const color = getComputedStyle(backgroundElement[index])
      .getPropertyValue(x);

    const elementStyle = backgroundElement[index].style;



    elementStyle.setProperty('background', color);
    //elementStyle.setProperty('hover', backgroundColors);  
    elementStyle.setProperty('color', backgroundColors);
    elementStyle.transition = '0.5s 2s ease-out';
  });


  if (index === 2) {
    changeBackgroundColorButtonBoard();
  }

}


/**
 * This function is responsible for resetting the calculator
 */
function resetNumber(element) {
  let data = element.innerHTML.toString();
  numbers = numbers.concat(data).replace('•', ',');

  if (numbers.includes('del')) {
    numbers = numbers.replace('del', '').slice(0, -1);
  }

  if (numbers.includes('reset')) {
    numbers = '';
  }

  operationNumber();
  display.innerHTML = numbers.length === 0 ? '0' : numbers;
}

/**
 * Performs arithmetic operations based on the input string.
 */
function operationNumber() {
  const regex = /^(-?\d*\.?\d+)([-+x/])(-?\d*\.?\d+)(([-+x/]-?\d*\.?\d+)*)(=)$/;
  const rex = /^(0*(\.\d+)?\/0+(\.0+)?=|\d+(\.\d+)?\/0+(\.0+)?=)$/;

  if (numbers.match(regex) && !numbers.match(rex)) {
    // Replace 'x' with '*' for multiplication
    numbers = numbers.replace(/x/g, '*').replace('=', '');

    // Evaluate the mathematical expression
    let result = eval(numbers);
    numbers = result.toString().replace('.', ',');
    display.innerHTML = numbers;


  } else if (numbers.includes('=')) {
    numbers = numbers.replace('=', '');
    Swal.fire({
      title: 'ADVERTENCIA',
      text: 'Error en la expresión matemática.',
      icon: 'warning',
      footer: '<a href="page_info.html" target="_blank">Más información...</a>'
    });
  }
}

buttonDtarkSlider.addEventListener('click', moveSlider);

buttonboard.forEach((element) => {
  element.addEventListener('click', () => resetNumber(element));
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.