Javascript 将颜色对比应用程序从vanillajs转换为angularjs

我对angular js比较陌生，所以我不太确定什么可以做，什么不能做

我有一个颜色对比的应用程序，我想包括在我的angularjs应用程序。但是，它是用vanillajs编写的。这可能吗？还是需要完全用angularjs重新编写才能适应

完整应用程序取自codepen：

所讨论的javascript如下所示

感谢您的帮助

function updateDemoColors(colorFront, colorBack) {
  const demo = document.querySelector("#sample-text");
  demo.style.color = `rgb(${colorFront.toString()})`;
  demo.style.backgroundColor = `rgb(${colorBack.toString()})`;
}

/* the following functions are adapted from https://stackoverflow.com/a/9733420/3695983 */
function luminanace(r, g, b) {
  var a = [r, g, b].map(function (v) {
    v /= 255;
    return v <= 0.03928
      ? v / 12.92
    : Math.pow( (v + 0.055) / 1.055, 2.4 );
  });
  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
function contrast(rgb1, rgb2) {
  const luminanceFront = luminanace(rgb1[0], rgb1[1], rgb1[2]);
  const luminanceBack  = luminanace(rgb2[0], rgb2[1], rgb2[2]);
  return luminanceBack > luminanceFront 
    ? ((luminanceFront + 0.05) / (luminanceBack + 0.05))
    : ((luminanceBack + 0.05) / (luminanceFront + 0.05));
}

function updateBoxesColors(colorFront, colorBack) {
  const ratio = contrast(colorFront, colorBack);
  document.querySelector("#aa-normal").className  = ratio < 0.22222 ? "" : "fail";
  document.querySelector("#aa-large").className   = ratio < 0.33333 ? "" : "fail";
  document.querySelector("#aaa-normal").className = ratio < 0.14285 ? "" : "fail";
  document.querySelector("#aaa-large").className  = ratio < 0.22222 ? "" : "fail";
  
  const totalWrong = document.querySelectorAll(".fail").length;
  let mouth = document.querySelector("#mouth");
  let smile = document.querySelector("#smile");
  
  switch(totalWrong) {
    case 0:
      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,149  125,149  116,149 109,142 106,132 Z");
      smile.setAttribute("d", "M125,144 C 140,144 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,144 125,144 Z");
      break;
    case 1:
    case 2:
      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z");
      smile.setAttribute("d", "M125,141 C 140,141 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,141 125,141 Z");
      break;
    case 3: 
      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  140,143  125,143  110,143 109,138 106,132 Z");
    smile.setAttribute("d", "M125,138 C 140,138 143.5,132 143.5,132 143.5,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,138 125,138 Z");
      break;
    case 4: 
      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  134,142  125,142  116,142 109,138 106,132 Z");
      smile.setAttribute("d", "M125,135 C 140,135 143,132 143,132 143,135 125,136 125,136 125,136 106.5,135 106.5,132 106.5,132 110,135 125,135 Z");
      break;
  }
}

function updateHex(colorFront, colorBack) {
  const colorFrontHex = colorFront.map(function(el) { return Number(el).toString(16).padStart(2, "0").toUpperCase(); });
  const colorBackHex = colorBack.map(function(el) { return Number(el).toString(16).padStart(2, "0").toUpperCase(); });
  document.querySelector("#color-1-hex").value = `#${colorFrontHex.join('')}`;
  document.querySelector("#color-2-hex").value = `#${colorBackHex.join('')}`
}

function updateColors() {
  const colorFront = [ 
    document.querySelector("#color-1-r").value,
    document.querySelector("#color-1-g").value,
    document.querySelector("#color-1-b").value
  ];
  const colorBack = [
    document.querySelector("#color-2-r").value,
    document.querySelector("#color-2-g").value,
    document.querySelector("#color-2-b").value
  ];

  updateDemoColors(colorFront, colorBack);
  updateBoxesColors(colorFront, colorBack);
  updateHex(colorFront, colorBack);
}

document.querySelectorAll("input[type='number'], input[type='range']").forEach(function(el) {
  el.addEventListener("input", function() {
    if (this.type === "range") {
      this.nextElementSibling.value = this.value;
    } else if (this.type === "number") {
      this.previousElementSibling.value = this.value;
    }
    updateColors();
  });
});

document.querySelectorAll("input[type='text']").forEach(function(el) {
  el.addEventListener("blur", function() {
    let val = this.value;
    let wrongValue = false;
    if (val[0] === "#") val = val.substring(1);
    if (val.length === 3 || val.length === 6) {
      if (val.length === 3) {
        val = `${val[0]}${val[0]}${val[1]}${val[1]}${val[2]}${val[2]}`;
      }
      if (val.match(/[0-9A-Fa-f]{6}/)) {
        const red = parseInt(`${val[0]}${val[1]}`, 16);
        const green = parseInt(`${val[2]}${val[3]}`, 16);
        const blue = parseInt(`${val[4]}${val[5]}`, 16);
        const target = this.dataset.target;
        
        document.getElementById(`number-${target}-r`).value = red;
        document.getElementById(`number-${target}-g`).value = green;
        document.getElementById(`number-${target}-b`).value = blue;
        document.getElementById(`color-${target}-r`).value = red;
        document.getElementById(`color-${target}-g`).value = green;
        document.getElementById(`color-${target}-b`).value = blue;
        
        updateColors();
      } else {
        wrongValue = true;
      }
    } else {
      wrongValue = true;
    }
    
    if (wrongValue){
      const colorFront = [ 
        document.querySelector("#color-1-r").value,
        document.querySelector("#color-1-g").value,
        document.querySelector("#color-1-b").value
      ];
      const colorBack = [
        document.querySelector("#color-2-r").value,
        document.querySelector("#color-2-g").value,
        document.querySelector("#color-2-b").value
      ];
      updateHex(colorFront, colorBack)
    }
  });
})

函数更新颜色（彩色前、彩色后）{
const demo=document.querySelector（“示例文本”）；
demo.style.color=`rgb（${colorFront.toString（）}）`；
demo.style.backgroundColor=`rgb（${colorBack.toString（）}）`；
}
/*以下功能改编自https://stackoverflow.com/a/9733420/3695983 */
功能灯（r、g、b）{
变量a=[r，g，b].map（函数（v）{
v/=255；
返回v亮度前沿
（（亮度前+0.05）/（亮度后+0.05））
：（（亮度背面+0.05）/（亮度正面+0.05））；
}
函数updateBoxesColors（colorFront、colorBack）{
常数比=对比度（彩色前、彩色后）；
document.querySelector（“#aa normal”）.className=ratio<0.22222？”：“fail”；
document.querySelector（“#aa large”）.className=ratio<0.33333？”：“fail”；
document.querySelector（“#aaa正常”）.className=比率<0.14285？”：“失败”；
document.querySelector（“#aaa large”）.className=比率<0.22222？”：“失败”；
const totalError=document.querySelectorAll（“.fail”）.length；
let mouth=document.querySelector（“#mouth”）；
let smile=document.querySelector（“微笑”）；
开关（总错误）{
案例0：
setAttribute（“d”、“M 106132 C 113127 125128 125132 125128 137127 144132 141142 134149 125149 116149 109142 106132 Z”）；
smile.setAttribute（“d”、“M125144 C 140144 143132 143132 143132 125133 125133 125133 106.5132 106.5132 110144 125144 Z”）；
打破
案例1：
案例2：
setAttribute（“d”、“M 106132 C 113127 125128 125132 125128 137127 144132 141142 134146 125146 116146 109142 106132 Z”）；
smile.setAttribute（“d”、“M125141 C 140141 143132 143132 143132 125133 125133 125133 106.5132 106.5132 110141 125141 Z”）；
打破
案例3：
setAttribute（“d”、“M 106132 C 113127 125128 125132 125128 137127 144132 141138 140143 125143 110143 109138 106132 Z”）；
smile.setAttribute（“d”、“M125138 C 140138 143.5132 143.5132 143.5132 125133 125133 125133 106.5132 106.5132 106.5132 110138 125138 Z”）；
打破
案例4：
setAttribute（“d”、“M 106132 C 113127 125128 125132 125128 137127 144132 141138 134142 125142 116142 109138 106132 Z”）；
smile.setAttribute（“d”，“M125135 C 140135 143132 143135 143135 125136 125136 125136 106.5135 106.5132 106.5132 110135 125135 Z”）；
打破
}
}
函数updateHex（colorFront、colorBack）{
const colorFrontHex=colorFront.map（函数（el）{返回数（el）.toString（16）.padStart（2，“0”）.toUpperCase（）；}）；
const colorBackHex=colorBack.map（函数（el）{返回数（el）.toString（16）.padStart（2，“0”）.toUpperCase（）；}）；
document.querySelector（“#color-1-hex”）.value=`${colorFrontHex.join（“”）}；
document.querySelector（“#color-2-hex”）.value=`${colorBackHex.join（“”）}`
}
函数updateColors（）{
const colorFront=[
document.querySelector（“#color-1-r”）.值，
document.querySelector（“#color-1-g”）.值，
document.querySelector（“#color-1-b”）.值
];
常数回色=[
document.querySelector（“#color-2-r”）.值，
document.querySelector（“#color-2-g”）.值，
document.querySelector（“#color-2-b”）.值
];
更新的彩色（彩色正面、彩色背面）；
UpdateBox颜色（彩色正面、彩色背面）；
updateHex（colorFront、colorBack）；
}
document.querySelectorAll（“input[type='number']，input[type='range']”）。forEach（函数（el）{
el.addEventListener（“输入”，函数（）{
如果（this.type==“范围”）{
this.nextElementSibling.value=this.value；
}else if（this.type==“number”）{
this.previousElementSibling.value=this.value；
}
更新颜色（）；
});
});
document.querySelectorAll（“input[type='text']”）.forEach（函数（el）{
el.addEventListener（“模糊”，函数（）{
设val=this.value；
让错误值=错误；
if（val[0]==“#”）val=val.substring（1）；
如果（val.length==3 | | val.length==6）{
如果（val.length==3）{
val=`${val[0]}${val[0]}${val[1]}${val[1]}${val[2]}${val[2]}`；
}
if（val.match（/[0-9A-Fa-f]{6}/）{
常量red=parseInt（`${val[0]}${val[1]}`，16）；
const green=parseInt（`${val[2]}${val[3]}`，16）；
constblue=parseInt（`${val[4]}${val[5]}`，16）；
const target=this.dataset.target；
document.getElementById（`number-${target}-r`）。value=red；
getElementById（`number-${target}-g`）。value=green；
document.getElementById（`number-${target}-b`）。value=blue；
getElementById（`color-${target}-r`）。value=red；
getElementById（`color-${target}-g`）。value=green；
getElementById（`color-${target}-b`）。value=blue；
更新颜色（）；
}否则{
错误值=真；
}
}否则{
错误值=真；
}
如果（错误值）{
const colorFront=[
document.querySelector（“#color-1-r”）.值，
document.querySelector（“#color-1-g”）.值，
document.querySelector（“#color-1-b”）.值
];
常数回色=[
document.querySelector（“#color-2-r”）.值，
document.querySelector（“#color-2-g”）.值，
document.querySelector（“#color-2-b”）.值
];
updateHex（colorFront、colorBack）
}
});
})