Оптимизация кода для отображения номеров 1 - 25 равномерно до 5 цветов

Question

В настоящее время я изучаю JavaScript, и я создал этот код (и он отлично работает), но я знаю, что должен быть способ автоматизировать это лучше. Я немного нечеткий на петлях, но из того, что я знаю о них, я не знаю, что можно использовать в этой ситуации:

function calculation() {

var num = document.getElementById("input").value;
var trCalc = num % 25;

var tipColorName = document.getElementById("tipColorName");
var ringColorName = document.getElementById("ringColorName");

var tipBlock = document.getElementById("tipBlock");
var ringBlock = document.getElementById("ringBlock");

// Pair Calculations

if (trCalc > 0 && trCalc <= 5) {
    tipColorName.innerHTML = "White";
    tipBlock.setAttribute("style", "background-color: #f2f2f2; color: #2f2f2f;");
}
if (trCalc > 5 && trCalc <= 10) {
    tipColorName.innerHTML = "Red";
    tipBlock.setAttribute("style", "background-color: #e24341; color: white;");
}
if (trCalc > 10 && trCalc <= 15) {
    tipColorName.innerHTML = "Black";
    tipBlock.setAttribute("style", "background-color: #2f2f2f; color: white;");
}
if (trCalc > 15 && trCalc <= 20) {
    tipColorName.innerHTML = "Yellow";
    tipBlock.setAttribute("style", "background-color: #f4ca37; color: #2f2f2f;");
}
if (trCalc > 20 && trCalc <= 24 || num % 25 == 0 && num > 0 ) {
    tipColorName.innerHTML = "Violet";
    tipBlock.setAttribute("style", "background-color: #844ae0; color: white;");
}
if ([1, 6, 11, 16, 21].includes(trCalc)) {
    ringColorName.innerHTML = "Blue";
    ringBlock.setAttribute("style", "background-color: #426ffe; color: white;");
}
if ([2, 7, 12, 17, 22].includes(trCalc)) {
    ringColorName.innerHTML = "Orange";
    ringBlock.setAttribute("style", "background-color: #f27f42; color: #2f2f2f;");
}
if ([3, 8, 13, 18, 23].includes(trCalc)) {
    ringColorName.innerHTML = "Green";
    ringBlock.setAttribute("style", "background-color: #25d366; color: white;");
}
if ([4, 9, 14, 19, 24].includes(trCalc)) {
    ringColorName.innerHTML = "Brown";
    ringBlock.setAttribute("style", "background-color: #917260; color: #2f2f2f;");
}
if ([5, 10, 15, 20 ].includes(trCalc) || num % 25 == 0 && num > 0 ) {
    ringColorName.innerHTML = "Slate";
    ringBlock.setAttribute("style", "background-color: grey; color: #2f2f2f;");
}

Любая помощь приветствуется!

Answer 1

Оптимизация и минимизация - это на самом деле две разные вещи. посмотрите на этот сайт для минимизации http://closure-compiler.appspot.com/home.

Что касается оптимизации, вы можете сделать несколько вещей.

Вы можете посмотреть на использование одной функции, чтобы изменить свой стиль. который очистит ваш код и сделает его более читабельным. Что-то вроде:

changeStyles(innerColor,bgColor,color){
  ringColorName.innerHTML = innerColor;
  ringBlock.setAttribute("style", "background-color: "+bgColor+"; color: "+color+";") 
}

Тогда ваши операторы if будут выглядеть примерно так:

if ([1, 6, 11, 16, 21].includes(trCalc)) {
   changeStyles("White","#f2f2f2","#2f2f2f");
}

Вы можете посмотреть на оператора по модулю. За последние пять if Заявления, похоже, вы могли бы сделать foo = trCalc % 5 с последующим switch(foo), Может выглядеть примерно так.

foo = trCalc % 5
switch(foo) {
    case 0:
        changeStyles("White","#f2f2f2","#2f2f2f");
        break;
    case 1:
        changeStyles("White","#f2f2f2","#2f2f2f");
        break;
    case 2:
        changeStyles("White","#f2f2f2","#2f2f2f");
        break;
    case 3:
        changeStyles("White","#f2f2f2","#2f2f2f");
        break;
    case 4:
        changeStyles("White","#f2f2f2","#2f2f2f");
        break;
}

Конечно, вы бы включили соответствующие цвета в функцию changeColors, Надеюсь, это даст вам некоторые идеи.

Answer 2

Вот как я бы это оптимизировал:

const tipColorNames = ['White', 'Red', 'Black', 'Yellow', 'Violet'];
const tipStyles = [
  "background-color: #f2f2f2; color: #2f2f2f;",
  "background-color: #e24341; color: white;",
  "background-color: #2f2f2f; color: white;",
  "background-color: #f4ca37; color: #2f2f2f;",
  "background-color: #844ae0; color: white;",
];
const ringColorNames = ['Blue', 'Orange', 'Green', 'Brown', 'Slate'];
const ringStyles = [
  "background-color: #426ffe; color: white;",
  "background-color: #f27f42; color: #2f2f2f;",
  "background-color: #25d366; color: white;",
  "background-color: #917260; color: #2f2f2f;",
  "background-color: grey; color: #2f2f2f;",
];

const divisor = 5;
const numColors = tipColorNames.length;

function calculation() {
  var num = document.getElementById("input").value;
  var trCalc = num % (divisor * numColors);

  var tipColorName = document.getElementById("tipColorName");
  var ringColorName = document.getElementById("ringColorName");

  var tipBlock = document.getElementById("tipBlock");
  var ringBlock = document.getElementById("ringBlock");

  const tipColorIndex = trCalc === 0 && num > 0
    ? numColors - 1
    : (trCalc - 1) / divisor;

  tipColorName.innerHTML = tipColorNames[tipColorIndex];
  tipBlock.setAttribute('style', tipStyles[tipColorIndex]);

  const ringColorIndex = (num - 1) % numColors;
  ringColorName.innerHTML = ringColorNames[ringColorIndex];
  ringBlock.setAttribute('style', ringStyles[ringColorIndex]);
}