Добавлять class в div при вводе текста в input

[skwz]

Всем привет!

Помогите пожалуйста сделать, заранее очень сильно благодарен вам!

Вводим в input, слово start.

это слово добавляется как class в div с уже фиксированным class'ом SOS.

<div class="SOS start">текст</div>

Не прерывая сеанса, если вписать слово stop, то второй класс меняется на:

<div class="SOS stop">текст</div>

если вписать слово status, то второй класс меняется на:

<div class="SOS status">текст</div>

Ну и добить проверкой, чтобы слова start, stop, status заранее были вписаны в скрипт js чтобы он их добавлял, тобишь если написать слово prostotext или какое либо другое которого нет в списке на проверку, скрипт будет вставлять class под именем error

<div class="SOS error">текст</div>

Кому не трудно, у кого есть пару минут свободного времени, помогите пожалуйста, буду очень благодарен и +1000 к карме.

[Malleys]

<div class="sos">CSS is awesome. I &hearts; JS</div>
<input class="sos" id="my-field" type="text" autofocus placeholder="Введи stop, start...">
<style>
	.sos {
		--x-color: var(--color, black);
		padding: 1em;
		margin: 1em;
		border-radius: .4em;
		font-weight: bold;
		outline: 0;
		border: .2em solid var(--x-color);
		color: var(--x-color);
		transition: 1s;
	}
	
	.sos:hover {
		box-shadow: inset 0 0 0 3em var(--x-color);
		color: white;
	}
	
	.sos.start {
		--color: #52cc11;
	}
	
	.sos.stop {
		--color: #cc112e;
	}
	
	.sos.status {
		--color: #11cc92;
	}
	
	.sos.error {
		--color: #c4bfb1;
	}
</style>
<script>
{
	let classNamesRE = /^(start|stop|status)$/;
	let input = document.getElementById("my-field");
	let div = document.querySelector(".sos");
	
	let onInputHandler = event => {
		let match = event.target.value.match(classNamesRE);

		if(!match) match = ["", "error"];

		event.target.className = div.className = ["sos", match[1]].join(" "); 
	};

	input.addEventListener("input", onInputHandler);
};
</script>

Для изменения цвета используются пользовательские CSS-свойства, которые позволяют значительно сократить код. Этот пример использует переменные таким образом, которым вы не можете действительно сделать с Sass.

[рони]

Malleys,
а если так ...

{
  let classNamesRE = /^(?:start|stop|status)$/;
  let input = document.getElementById("my-field");
  let div = document.querySelector(".sos");

  let onInputHandler = event => {
    let match = event.target.value.match(classNamesRE)||"error";
    event.target.className = div.className = "sos " + match;
  };

  input.addEventListener("input", onInputHandler);
};

и не могли бы вы на пальцах обьяснить, для тех кто не в танке фразу

Этот пример использует переменные таким образом, которым вы не можете действительно сделать с Sass.

[skwz]

Работает, спасибо ребят!
Есть 1 нюанс который хотелось бы исправить и про который я наверное забыл сказать ранее, подскажите пожалуйста как сделать чтобы class'ы добавлялись не моментально при вводе текста, а при нажатии на enter

[рони]

skwz,

{
  let classNamesRE = /^(?:start|stop|status)$/;
  let input = document.getElementById("my-field");
  let div = document.querySelector(".sos");

  let onInputHandler = event => {
    let match = (event.code === "Enter" && event.target.value.match(classNamesRE))||"error";
    event.target.className = div.className = "sos " + match;
  };

  input.addEventListener("keyup", onInputHandler);
};

[skwz]

Прям как нужно спасибо) только хотелось бы еще чтобы class error тоже по нажатию на Enter срабатывал, если стирать текст с поля, то class error тоже по сути должен удаляться. И тогда получится то что я и хотел

[рони]

skwz,

{
  let classNamesRE = /^(?:start|stop|status)$/;
  let input = document.getElementById("my-field");
  let div = document.querySelector(".sos");

  let onInputHandler = event => {
    let val = event.target.value.trim();
    let match = event.code === "Enter" && val ? (val.match(classNamesRE)||"error") : "";
    event.target.className = div.className = "sos " + match;
  };

  input.addEventListener("keyup", onInputHandler);
};

[skwz]

рони, спасибо, вы меня очень выручили

[Malleys]

и не могли бы вы на пальцах объяснить, для тех кто не в танке фразу

Переменные созданные в Sass, после компиляции браузер ничего не знает о них. Соответственно их невозможно менять в браузере.

[рони]

Malleys,
Спасибо огромное!