title: How to let user pick the color of the selected text like google docs
body: <p>I am trying to make a google docs like project, and I am currently on the part of allowing the user to pick a color to make the text. I want to let them select the text inside the input box and then select a color using the buttons. I have made the button to change the text to the color red, but I don't know what to do after that.</p>
  <p>Here is the code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;title&gt;Editor&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;index.css&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;button class=&quot;bold&quot; onclick=&quot;document.execCommand('bold',false,null);&quot;&gt;&lt;/button&gt;
      &lt;button class=&quot;italic&quot; onclick=&quot;document.execCommand('italic',false,null);&quot;&gt;&lt;/button&gt;
      &lt;button class=&quot;underline&quot; onclick=&quot;document.execCommand('underline',false,null);&quot;&gt;U̲&lt;/button&gt;
      &lt;button class=&quot;redText&quot;&gt;Change text to red&lt;/button&gt;
  
      
      &lt;fieldset class=&quot;userInput&quot; contenteditable=&quot;true&quot;&gt;&lt;/fieldset&gt;
  
      &lt;script&gt;
        var boldBtn = document.querySelector('.bold');
        var italicBtn = document.querySelector('.italic');
        var underlineBtn = document.querySelector('.underline');
  
        boldBtn.addEventListener('click', function() {
          boldBtn.classList.toggle('inUse');
        });
  
        italicBtn.addEventListener('click', function() {
          italicBtn.classList.toggle('inUse');
        });
  
        underlineBtn.addEventListener('click', function() {
          underlineBtn.classList.toggle('inUse');
        });
      &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>