Tip Calculator App (HTML, SASS, JS)

What are you most proud of, and what would you do differently next time?

Array.from to convert node list into an array. Useful to append additional node to a list. Niche use, but nice to know.

const tipElements = Array.from(
   tipFieldSet.querySelectorAll(".tip-list__option")
);

What challenges did you encounter, and how did you overcome them?

Adding the icon in the input. Since input is a void element and I cant use ::before. We have to wrap the input in a wrapper, then use ::before to the wrapper.

<div class="bill__amount-wrapper input__wrapper">
   <input
      type="number"
      step="any"
      min="0"
      class="input__number"
      name="bill__amount-input"
      id="bill__amount-input"
   />
</div>

&__amount-wrapper {
   &::before {
      content: "";
      background-image: url("../images/icon-dollar.svg");
      width: 0.8125rem;
      height: 1rem;
   }
}

What specific areas of your project would you like help with?

Anything, I'm open for feedback!