title: How to integrate KaTeX into memory card application
body: <p>How to integrate KaTeX into memory card application given here.</p>
  
  <p>Repository : <a href="https://github.com/bradtraversy/vanillawebprojects" rel="nofollow noreferrer">https://github.com/bradtraversy/vanillawebprojects</a></p>
  
  <p>Demo : <a href="https://vanillawebprojects.com/projects/memory-cards/" rel="nofollow noreferrer">https://vanillawebprojects.com/projects/memory-cards/</a></p>
  
  <p>I have added katex files inside  and tried. Its not working.</p>
  
  <p>I want memory card's front and back side accept KaTeX.</p>
  
  <p>The zip file for the full memory card application with KaTeX links is uploaded here
  <a href="https://workupload.com/file/jypmgv5p" rel="nofollow noreferrer">https://workupload.com/file/jypmgv5p</a><a href="https://workupload.com/file/jypmgv5p" rel="nofollow noreferrer"></a></p>
  
  <p>The html file is added below [index.html]</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
  
  
      &lt;link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
        integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
        crossorigin="anonymous"
      /&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
  
  
  
      &lt;title&gt;Memory Cards&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;button id="clear" class="clear btn"&gt;
        &lt;i class="fas fa-trash"&gt;&lt;/i&gt; Clear Cards
      &lt;/button&gt;
  
      &lt;h1&gt;
        Memory Cards
        &lt;button id="show" class="btn btn-small"&gt;
          &lt;i class="fas fa-plus"&gt;&lt;/i&gt; Add New Card
        &lt;/button&gt;
      &lt;/h1&gt;
  
      &lt;div id="cards-container" class="cards"&gt;
       &lt;div class="card active"&gt;
          &lt;div class="inner-card"&gt;
            &lt;div class="inner-card-front"&gt;
              &lt;p&gt;
                What is PHP?
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="inner-card-back"&gt;
              &lt;p&gt;
                A programming language
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="card"&gt;
          &lt;div class="inner-card"&gt;
            &lt;div class="inner-card-front"&gt;
              &lt;p&gt;
                What is PHP?
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="inner-card-back"&gt;
              &lt;p&gt;
                A programming language
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="navigation"&gt;
        &lt;button id="prev" class="nav-button"&gt;
          &lt;i class="fas fa-arrow-left"&gt;&lt;/i&gt;
        &lt;/button&gt;
  
        &lt;p id="current"&gt;&lt;/p&gt;
  
        &lt;button id="next" class="nav-button"&gt;
          &lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;
        &lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div id="add-container" class="add-container"&gt;
        &lt;h1&gt;
          Add New Card
          &lt;button id="hide" class="btn btn-small btn-ghost"&gt;
            &lt;i class="fas fa-times"&gt;&lt;/i&gt;
          &lt;/button&gt;
        &lt;/h1&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="question"&gt;Question&lt;/label&gt;
          &lt;textarea id="question" placeholder="Enter question..."&gt;&lt;/textarea&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="answer"&gt;Answer&lt;/label&gt;
          &lt;textarea id="answer" placeholder="Enter Answer..."&gt;&lt;/textarea&gt;
        &lt;/div&gt;
  
        &lt;button id="add-card" class="btn"&gt;
          &lt;i class="fas fa-plus"&gt;&lt;/i&gt; Add Card
        &lt;/button&gt;
      &lt;/div&gt;
  
      &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous"&gt;
  
      &lt;!-- The loading of KaTeX is deferred to speed up page rendering --&gt;
      &lt;script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;!-- To automatically render math in text elements, include the auto-render extension: --&gt;
      &lt;script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
          onload="renderMathInElement(document.body);"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>