Homework/js/07_dom/calc/index.js

// calcOnClick()
function calcOnClick() {
   const buttons = document.querySelectorAll('button')
   for (const button of buttons) {
      button.onclick = function() {
         if (this === plus) {
            res.value = +input1.value + +input2.value
         }
         if (this === min) {
            res.value = input1.value - input2.value
         }
         if (this === mul) {
            res.value = input1.value * input2.value
         }
         if (this === div) {
            res.value = input1.value / input2.value
         }
         if (this === clear) {
            res.value = ''
            input1.value = ''
            input2.value = ''        
         }         
      }
   }
}

calcLive()
function calcLive() {
   const buttons = document.querySelectorAll('button')
   let calc = () => {}
   let prevBtn = null
   function paintBtn(el, color = '') {
      el.style.backgroundColor = color
      if (prevBtn !== null && prevBtn !== el) {
         prevBtn.style.backgroundColor = ''
      }
      prevBtn = el
   }
   for (const button of buttons) {
      button.onclick = function() {
         if (this === plus) {
            calc = () => res.value = +input1.value + +input2.value
            calc()    
            paintBtn(this, 'red')          
         }
         if (this === min) {
            calc = () => res.value = input1.value - input2.value
            calc()
            paintBtn(this, 'blue')
         }
         if (this === mul) {
            calc = () => res.value = input1.value * input2.value
            calc()
            paintBtn(this, 'green') 
         }
         if (this === div) {
            calc = () => res.value = input1.value / input2.value
            calc()
            paintBtn(this, 'yellow')
         }
         if (this === clear) {
            calc = () => {}
            res.value = ''
            input1.value = ''
            input2.value = ''  
            paintBtn(this)     
         }                 
      }
   }
   input1.oninput = () => calc()
   input2.oninput = () => calc()
}