<h2>Решение</h2>
<input type="text">
<div id="out"></div>

<hr>
<h2>Задание</h2>

<div>
  После нажатия кнопки или нажатия кнопки ввода на клавиатуре вам необходимо добавить введенный текст на страницу и выделить его в:
зеленый, если пользователь ввел более 3-х символов;
красный, если пользователь ввел специальный символ (! @ # $ & *%) и т. д.
После добавления текста ввод должен быть очищен 
</div>

#out{
  height:2em;
}

(function() {
  document.querySelector('input').addEventListener('keydown', function(e) {
   if (e.keyCode !== 13) return;
   var v= this.value;
   this.value='';
   out.textContent= v;
   out.style.color= 'black';
   
   if(v.length>3) out.style.color= 'green';
   if(/[!@#$&*%]/.test(v)) out.style.color= 'red';
  });
})();