title: JavaScript classes, how does one apply "Separation of Concerns" and "Don't repeat Yourself" (DRY) in practice
body: <p>I'm just in the process of learning how JavaScript classes work and I'm just looking for some advice on how to achieve something quite simple I hope regarding animating some elements. </p>
  
  <p>I have created a class named <code>myAnimation</code>, the constructor takes in 1 argument which is an element. All its doing is fading a heading out and in, all very simple. It works fine when there is just one heading element on the page, I'm just not to sure how I go about getting it to work with more than one heading.</p>
  
  <p>Please excuse my naivety with this; it's all very new to me, this is just a basic example I have managed to make myself to try and help myself understand how it works.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class myAnimation {
    constructor(element) {
      this.element = document.querySelector(element);
    }
    fadeOut(time) {
      if (this.element.classList.contains('fadeout-active')) {
        this.element.style.opacity = 1;
        this.element.classList.remove('fadeout-active');
        button.textContent = 'Hide Heading';
      } else {
        this.element.style.opacity = 0;
        this.element.style.transition = `all ${time}s ease`;
        this.element.classList.add('fadeout-active');
        button.textContent = 'Show Heading';
      }
    }
  }
  
  const heading = new myAnimation('.heading');
  const button = document.querySelector('.button');
  button.addEventListener('click', () =&gt; {
    heading.fadeOut(1);
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="intro"&gt;
    &lt;h1 class="heading"&gt;Intro Heading&lt;/h1&gt;
    &lt;p&gt;This is the intro section&lt;/p&gt;
    &lt;button class="button"&gt;Hide Heading&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="main"&gt;
    &lt;h1 class="heading"&gt;Main Heading&lt;/h1&gt;
    &lt;p&gt;This is the main section&lt;/p&gt;
    &lt;button class="button"&gt;Hide Heading&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>