title: How to toggle class for font awesome icons with pure javascript?
body: <p>I am trying to learn javascript and trying to toggle between the empty circle icon and the circle with check mark when the icon is clicked. However, it does not seem to be working.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;i class="far fa-circle" id="toggle"&gt;&lt;/i&gt;
   &lt;script&gt;
      document.addEventListener('click', (event) =&gt;{
          if(event.target.id == 'toggle'){
              document.getElementById('toggle').classList.toggle("fas fa-check-circle");
          }
      });
   &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>