How to let user pick the color of the selected text like google docs

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.

Here is the code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Editor</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <button class="bold" onclick="document.execCommand('bold',false,null);">𝗕</button>
    <button class="italic" onclick="document.execCommand('italic',false,null);">𝘐</button>
    <button class="underline" onclick="document.execCommand('underline',false,null);">U̲</button>
    <button class="redText">Change text to red</button>

    
    <fieldset class="userInput" contenteditable="true"></fieldset>

    <script>
      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');
      });
    </script>

  </body>
</html>

Solution

one way to achieve what you want is to use an input type color, where you can select a specific color, then use a function to change the color of the selected text by executing the commands: styleWithCss and foreColor, both to create the style property to the text that is selected Read here.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Editor</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <button class="bold" onclick="document.execCommand('bold',false,null);">𝗕</button>
    <button class="italic" onclick="document.execCommand('italic',false,null);">𝘐</button>
    <button class="underline" onclick="document.execCommand('underline',false,null);">U̲</button>
    <input type="color" class="color-picker" id="colorPicker" oninput="changeColorText(this.value);"/>
    <label>Select color</label>

    
    <fieldset class="userInput" contenteditable="true"></fieldset>

    <script>
      var boldBtn = document.querySelector('.bold');
      var italicBtn = document.querySelector('.italic');
      var underlineBtn = document.querySelector('.underline');
      var colorPicker = document.querySelector('.color-picker');

      boldBtn.addEventListener('click', function() {
        boldBtn.classList.toggle('inUse');
      });

      italicBtn.addEventListener('click', function() {
        italicBtn.classList.toggle('inUse');
      });

      underlineBtn.addEventListener('click', function() {
        underlineBtn.classList.toggle('inUse');
      });
      
      colorPicker.addEventListener('click', function(){
         colorPicker.classList.toggle('inUse');
      });
      
      const changeColorText = (color) => {
        document.execCommand('styleWithCSS', false, true);
        document.execCommand('foreColor', false, color);
      }
    </script>

  </body>
</html>

Also the function changeColorText is a type of arrow function Read here.