Tip calculator using plain HTML/CSS/JS

Community feedback

• 

  Adarsh•1,640

  @adram3l3chPosted almost 3 years ago

  function updateDOM (){
      
          let billValue = billInput.value;
          let tipValue = document.querySelector('input[name="tip"]:checked').value;
          let numberOfPeople = peopleInput.value;
  
          let resultTip = calculateTip(billValue, tipValue, numberOfPeople);
          let resultTotal = calculateTotal(billValue, tipValue, numberOfPeople);
  
          resultTipElt.innerText = `${resultTip}`;
          resultTotalElt.innerText = `${resultTotal}`;
  }
  
  function inputHandler (e){
        e.stopPropagation;
        if (resetButton.getAttribute('disabled') != null) {
          resetButton.removeAttribute('disabled');
        }
        let inputIsEmpty = inputsEmpty();
        if ((inputIsEmpty == true)) {
          console.log('input empty');
          resetButton.setAttribute('disabled',"");
        }
        let inputIsValid = checkInputs();
        if (inputIsValid == true) {
             updateDOM()
        }
  }
  
  function clickHandler (e){
        e.stopPropagation;
        let inputIsValid = checkInputs();
        if (inputIsValid == true) {
             updateDOM()
        }
  }
  
  document
    .querySelectorAll("input")
    .forEach(element => {
      element.addEventListener('input',inputHandler )
      element.addEventListener('click',clickHandler )
  });
  

  You can convert the repeating code to functions

  Marked as helpful

  0

  ---

  

  Ambre•170

  @Yunie08Posted almost 3 years ago

  @adram3l3ch Thank you so much! I don't know why I find it very difficult to organize my javascript code clean and dry. You input helps a lot !

  1