Changing color of certain words in html <textarea>-CodePudding

I am creating an interactive programming website where users can type 3 commands: turn right, turn left and forward n.

I have the following <textarea> where the user can type commands:

<textarea name="codeEditor" id="codeEditor" ></textarea>

Right now, this is how it looks, where if a function is typed then the text is white.

However, I want to implement it so if the user types something like turn right or turn left or any of the commands then the text would turn orange

However, I'm not sure how to accomplish this with a <textarea>.

I took a look at other questions, but I can't figure out how to implement it in my case.

Any help is appreciated!

CodePudding user response：

If i got your question right, if you want to simply change the text color within your <textarea>, you can do this -as referred to by this answer- in this way:

For inline CSS:

style="color:oragne;"

For a CSS File:

textarea {
  color: #fff;
    }

However, if you want to change the text color based on an event, let's say by clicking a button for example, some JavaScript might be needed:

const btn = document.getElementById('btn'); // 'btn' is the id for the desired button

btn.addEventListener('click', function onClick(event) {
  const text = document.getElementById('codeEditor');

  box.style.color = 'orange';
});

CodePudding user response：

This approach uses an <input> element for entry and a list to display the command history. There is a transition to highlight the previous command and an error message to help the user.

const entry = document.getElementById("entry");
const error = document.getElementById("error");
const history = document.getElementById("history");
let last = document.getElementById("last");
let prev;
entry.addEventListener("change", evt => {
  const valid = evt.target.checkValidity()
  error.classList.toggle("hidden", valid);
  if (valid) {
    prev = document.createElement("li");
    prev.textContent = entry.value;
    history.insertBefore(prev, last);
    last = prev;
    entry.value = '';
  }
});

* {
  margin: 0;
  padding: 0;
  font-family: verdana, sans-serif;
  font-size: 28px;
  background-color: black;
}

#history {
  list-style: none;
  height: 9rem;
  color: white;
}

#history li {
  color: white;
  transition: color 2s;
}

#history li:first-child {
  color: #0ff;
}

#entry {
  background-color: black;
  color: #2f2;
  border: 1px solid white;
  outline: none;
}

.hidden {
  visibility: hidden;
}

.error {
  font-size: .5rem;
  color: red;
}

<input type="text" id="entry" placeholder="command" pattern="(turn (left|right)|forward \d )" required>
<span id="error" >'turn left', 'turn right' or 'forward #'</span>
<ul id="history">
  <li id="last"></li>
</ul>