Calculator app with theme swtcher

This is my solution for this amazing challenge

Built with:

• HTML5. (I tried to use as many semantic tags as I could)
• CSS. (Pure CSS)
• JavaScript.

Challenges while tackling this project:

• The theme switcher. My solution was to create three input type radio and assign each one of them a data-theme:

<div>
<input
  data-theme="theme_A"
  class="theme_toggle"
  name="theme"
  type="radio"
  checked
/>
<input
  data-theme="theme_B"
  class="theme_toggle"
  name="theme"
  type="radio"
/>
<input
  data-theme="theme_C"
  class="theme_toggle"
  name="theme"
  type="radio"
/>
</div>

• Then create a function in my js file to get the value from the data theme, and set it as a class to my html :root

const themeToggle = document.querySelectorAll('.theme_toggle');

themeToggle.forEach((toggle) => {
  toggle.addEventListener('click', (e) => {
    const root = document.documentElement;
    const theme = e.target.getAttribute('data-theme');
    root.className = theme;
    localStorage.setItem('theme', theme);
  });
});