Added Color Themes

[LyubomirT]

Added different color themes, so the calculator will become customizable to users' liking.

I used a custom attribute "theme" for elements like .calc, .num, .equal, .operator, and .clear, and .result. At the top-right hand corner of the HTML webpage, there is a dropdown menu, which has the following options:

    <select id="theme-selector">
      <option value="default">Default</option>
      <option value="minimal">Minimal</option>
      <option value="minimal-dark">Minimal Dark</option>
      <option value="mint">Mint</option>
      <option value="mint-dark">Mint Dark</option>
    </select>

When an item is selected, this will be ran:

// Add an event listener for the theme selector.
theme_selecor.addEventListener("change", (event) => {
  // Get all the number buttons, and set their "theme" attribute to the selected theme.
  const number_buttons = document.querySelectorAll(".num");
  number_buttons.forEach((button) => {
    button.setAttribute("theme", event.target.value);
  });

  // Get all the operator buttons, and set their "theme" attribute to the selected theme.
  const operator_buttons = document.querySelectorAll(".operator");
  operator_buttons.forEach((button) => {
    button.setAttribute("theme", event.target.value);
  });

  // Get the calc container, and set its "theme" attribute to the selected theme.
  const calc_container = document.querySelector(".calc");
  calc_container.setAttribute("theme", event.target.value);

  // Get the result input, and set its "theme" attribute to the selected theme.
  const result_input = document.querySelector(".result");
  result_input.setAttribute("theme", event.target.value);

  // Get the clear button, and set its "theme" attribute to the selected theme.
  const clear_button = document.querySelector(".clear");
  clear_button.setAttribute("theme", event.target.value);

  // Get the equal button, and set its "theme" attribute to the selected theme.
  const equal_button = document.querySelector(".equal");
  equal_button.setAttribute("theme", event.target.value);

  // Get the element with ID "msg", and set its "theme" attribute to the selected theme.
  const msg = document.querySelector("#msg");
  msg.setAttribute("theme", event.target.value);

  // Get the element with class "header", and set its "theme" attribute to the selected theme.
  const header = document.querySelector(".header");
  header.setAttribute("theme", event.target.value);

});

And then, the proper color will be applied thanks to the "theme" attribute. The current color applier sample looks like this:

  .clear[theme="mint-dark"] {
    background-color: #549e37;
    color: #fff;
  }

  .equal[theme="default"] {
    background-color: #01801f;
    color: rgb(11, 11, 11);
  }

  .equal[theme="minimal"] {
    background-color: #a2ecff;
    color: #000;
  }

  .equal[theme="minimal-dark"] {
    background-color: #435da1;
    color: #fff;
   }

   ...

Please note that I had to apply the ID #msg to the <p> element, which says "Made with ❤ by Taj", to avoid conflicts with other <p> elements that you may add.

Let me know if you have any questions about this pull request!

[LyubomirT]

Screenshots:

Default Theme:

Minimal Theme:

Minimal Theme (Dark):

Mint Theme:

Mint Theme (Dark):