{"version":3,"sources":["script.js"],"names":["selectedButton","reset","max","personInput","document","querySelector","billInput","tipInput","error","buttons","querySelectorAll","resetButton","r","totalElement","tipPerPerson","formatter","Intl","NumberFormat","minimumFractionDigits","maximumFractionDigits","maxLength","e","target","value","length","slice","enableResetButton","disabled","style","setProperty","getComputedStyle","getPropertyValue","removeCustomValue","validInput","input","border","resetValues","errorInputOutlines","showInputs","inputFields","forEach","classList","remove","textContent","removeSelectedButton","button","checkTipInputZero","console","log","checkIfZero","add","toggleError","parentElement","previousElementSibling","children","totalBill","tip","toFixed","calculateTip","concat","percent","dataset","addEventListener","clearTimeout","setTimeout","format","key","preventDefault","replace"],"mappings":"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","file":"script.js","sourcesContent":["const personInput = document.querySelector(\".input__field-person\");\r\nconst billInput = document.querySelector(\".input__field-bill\");\r\nconst tipInput = document.querySelector(\".input__field-tip\");\r\nconst error = document.querySelector(\".input__error\");\r\nconst buttons = document.querySelectorAll(\".tip__button\");\r\nconst resetButton = document.querySelector(\".results__button\");\r\nconst r = document.querySelector(\":root\");\r\nconst totalElement = document.querySelector(\".total\");\r\nconst tipPerPerson = document.querySelector(\".tip-person\");\r\nlet selectedButton;\r\nlet reset;\r\nlet max;\r\n\r\nconst formatter = new Intl.NumberFormat(\"en-US\", {\r\n  minimumFractionDigits: 2,\r\n  maximumFractionDigits: 2,\r\n});\r\n\r\n//add event listener to each button and remove the prior selected button before highlighting new one\r\nbuttons.forEach((button) => {\r\n  button.addEventListener(\"click\", (e) => {\r\n    removeCustomValue();\r\n    removeSelectedButton();\r\n    enableResetButton();\r\n    e.target.classList.add(\"tip__selected\");\r\n    selectedButton = document.querySelector(\".tip__selected\");\r\n    calculateTip();\r\n  });\r\n});\r\n\r\n// on input use a timeout so user has enough time to change number before it limit to 2 decimal places\r\nbillInput.addEventListener(\"input\", (e) => {\r\n  clearTimeout(reset);\r\n  enableResetButton();\r\n  reset = setTimeout(() => {\r\n    if (e.target.value === \"\") {\r\n      e.target.value = \"\";\r\n    } else {\r\n      e.target.value = formatter.format(e.target.value);\r\n      calculateTip();\r\n    }\r\n    validInput(billInput);\r\n    toggleError(e, billInput);\r\n  }, 1000);\r\n});\r\n\r\ntipInput.addEventListener(\"input\", (e) => {\r\n  checkTipInputZero(e);\r\n  removeSelectedButton();\r\n  enableResetButton();\r\n  calculateTip();\r\n  validInput(tipInput);\r\n});\r\n\r\npersonInput.addEventListener(\"keydown\", (e) => {\r\n  if (e.key === \".\") {\r\n    e.preventDefault();\r\n  }\r\n});\r\n\r\npersonInput.addEventListener(\"input\", (e) => {\r\n  e.target.value = e.target.value.replace(/[^0-9]*/g, \"\");\r\n  if (e.target.value.length < 2) {\r\n    max = false;\r\n  }\r\n  maxLength(e);\r\n  toggleError(e, personInput);\r\n  enableResetButton();\r\n  validInput(personInput);\r\n  if (!max) {\r\n    calculateTip();\r\n  }\r\n\r\n  if (e.target.value.length === 2) {\r\n    max = true;\r\n  }\r\n});\r\n\r\nbillInput.addEventListener(\"keydown\", (e) => {\r\n  if (e.key === \"e\") {\r\n    e.preventDefault();\r\n  }\r\n});\r\n\r\nresetButton.addEventListener(\"click\", resetValues);\r\n\r\n// uses the inputs maxlength prop to set maxlength on number inputs\r\nfunction maxLength(e) {\r\n  if (e.target.value.length > e.target.maxLength) {\r\n    e.target.value = e.target.value.slice(0, e.target.maxLength);\r\n  }\r\n}\r\n\r\nfunction enableResetButton() {\r\n  resetButton.disabled = false;\r\n  resetButton.style.setProperty(\r\n    \"background\",\r\n    getComputedStyle(r).getPropertyValue(\"--strong-cyan-2\")\r\n  );\r\n}\r\n\r\nfunction removeCustomValue() {\r\n  tipInput.value = \"\";\r\n}\r\n\r\nfunction validInput(input) {\r\n  if (input.value.length > 0 && +input.value !== 0) {\r\n    input.style.border = \"2px solid hsla(172, 67%, 45%, 1)\";\r\n  } else {\r\n    input.style.border = \"none\";\r\n  }\r\n}\r\n\r\nfunction resetValues() {\r\n  let errorInputOutlines = document.querySelectorAll(\".input__error-outline\");\r\n  let showInputs = document.querySelectorAll(\".input__show\");\r\n  let inputFields = document.querySelectorAll(\".input__field\");\r\n  errorInputOutlines.forEach((input) =>\r\n    input.classList.remove(\"input__error-outline\")\r\n  );\r\n  inputFields.forEach((input) => (input.style = \"\"));\r\n  showInputs.forEach((input) => input.classList.remove(\"input__show\"));\r\n  tipInput.value = \"\";\r\n  personInput.value = \"\";\r\n  billInput.value = \"\";\r\n  resetButton.disabled = true;\r\n  resetButton.style = \"\";\r\n  totalElement.textContent = \"$0.00\";\r\n  tipPerPerson.textContent = \"$0.00\";\r\n  removeSelectedButton();\r\n}\r\n\r\nfunction removeSelectedButton() {\r\n  buttons.forEach((button) => {\r\n    button.classList.remove(\"tip__selected\");\r\n  });\r\n}\r\n\r\nfunction checkTipInputZero(e) {\r\n  console.log(\"hello bye\");\r\n  if (checkIfZero(e)) {\r\n    tipInput.classList.add(\"input__error-outline\");\r\n  } else {\r\n    tipInput.classList.remove(\"input__error-outline\");\r\n  }\r\n}\r\n\r\nfunction checkIfZero(e) {\r\n  if (e.target.value === \"\") {\r\n    return false;\r\n  } else {\r\n    return +e.target.value === 0 ? true : false;\r\n  }\r\n}\r\n\r\nfunction toggleError(e, input) {\r\n  if (checkIfZero(e)) {\r\n    input.parentElement.previousElementSibling.children[1].classList.add(\r\n      \"input__show\"\r\n    );\r\n    input.classList.add(\"input__error-outline\");\r\n  } else {\r\n    input.parentElement.previousElementSibling.children[1].classList.remove(\r\n      \"input__show\"\r\n    );\r\n    input.classList.remove(\"input__error-outline\");\r\n  }\r\n}\r\n\r\nfunction totalBill(tip) {\r\n  return (+billInput.value * (+tip / 100)).toFixed(2);\r\n}\r\n\r\nfunction calculateTip() {\r\n  if (\r\n    billInput.value &&\r\n    personInput.value &&\r\n    (selectedButton || tipInput.value)\r\n  ) {\r\n    if (tipInput.value) {\r\n      totalElement.textContent = `$${totalBill(tipInput.value)}`;\r\n      tipPerPerson.textContent = `$${(\r\n        totalBill(tipInput.value) / +personInput.value\r\n      ).toFixed(2)}`;\r\n    } else if (selectedButton) {\r\n      let percent = selectedButton.dataset.percent;\r\n      totalElement.textContent = `$${totalBill(percent)}`;\r\n      tipPerPerson.textContent = `$${(\r\n        totalBill(percent) / +personInput.value\r\n      ).toFixed(2)}`;\r\n    }\r\n  }\r\n}\r\n"]}