Введое в текстовое поле значение отображается в виде списка чекбоксов

[rfhnjirf]

1. Создайте текстовое поле для добавления контакта в список.
2. Каждая запись должна содержать имя, телефон и электронный адрес человека, информация о котором вносится в список контактов.
3. После нажатия клавиши Enter введенный контакт отображается в списке контактов. (Пустую строку текста в виде контакта добавить нельзя!)
4. Для добавления контакта проверьте корректность телефона и адреса электронной почты.
5. Список контактов представлен в виде компонента checkbox.
6. Если нажать на чекбокс - контакт считается важным, подчеркивается и становится красного цвета, чекбокс при этом пропадает.
7. Справа от каждой контакта располагается значок, позволяющий удалить указанный контакт.
8. Для выполнения редактирования контакта, необходимо выполнить по нему двойной щелчок, тогда вместо пункта списка появляется текстовое поле с текстом контакта.
9. После выполнения редактирования контакта, нужно нажать клавишу Enter и контакт изменится. Текстовое поле при этом исчезнет.

[Nexus]

Список задач имеется, отсутствует главное - сам вопрос))

[ksa]

Или сумма за решение той задачи...

[rfhnjirf]

нужно именно как сделать чтобы при вводе и нажатии enter появлялся список контактов в виде чекбокса,помогите пожалуйста

[рони]

rfhnjirf,
разбей задачу на функции, потом их соедини ... начните, иначе в раздел работа.
может помочь поиск по форуму, подскажет многие примеры на подобную тему.
дока
про Enter
https://learn.javascript.ru/keyboard-events
про создание/удаление
https://learn.javascript.ru/modifying-document

[Dilettante_Pro]

Что-то ТС замолчал... Надо его подбодрить.
Вариации на тему

<div id="container">
   <div style="border:1px solid black">
       <input type="text" id="new" placeholder="Введите новый контакт" style="margin-left:21px; width: 250px;">
   </div>
</div>
<script>
function setRed() {
    this.nextSibling.style="display:inline; width: 250px;color:red";
    this.style="opacity:0;";
}
function removeThis() {
      container.removeChild(this.parentNode);
}
function enableThis() {
      this.querySelector('input:disabled').disabled = false;
}
function disableThis() {
     this.disabled = true;
}
function checkText(text) {
     if(text.length<10) return true;
     var arr = text.split(" ");
     if (arr.length < 3) return true;
     var eMail = arr[arr.length - 1];
     var re = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;
     if(!re.test(eMail)) return true;
     var phone = '';
     for(var i = 1; i < arr.length - 1; i++) {
         phone = phone + arr[i];
     }
     re = /^\d[\d\(\)\ -]{4,14}\d$/;
     if(!re.test(phone)) return true;
}
document.querySelector("#new").onchange = function() {
    var newText = this.value;
    var errorText = checkText(newText);
    if(errorText) return;
    var newDiv = document.createElement('div');
    newDiv.style = "height:22px; border:1px solid black;";
    newDiv.ondblclick = enableThis;
    container.appendChild(newDiv);

    var newInput = document.createElement('input');
    newInput.type = "checkbox";
    newInput.style = "display:inline;";
    newInput.onclick = setRed;
    newDiv.appendChild(newInput);
    newInput.focus();

    newInput = document.createElement('input');
    newInput.value = newText;
    newInput.style = "display:inline; width: 250px;";
    newInput.onchange = disableThis;
    newInput.disabled = "true";
    
    newDiv.appendChild(newInput);

    newInput = document.createElement('input');
    newInput.type = "button";
    newInput.style = "display:inline;  border:1px solid red; border-radius:10px; color:red;";
    newInput.value="X";
    newInput.onclick = removeThis;
    newDiv.appendChild(newInput);    
    
    this.value = "";
}
</script>

[рони]

Dilettante_Pro,
в каких браузерах работает это

newInput.style =

?

[Dilettante_Pro]

рони,
У меня в хроме прекрасно работает. В ИЕ - нет.
Так это я написал на троечку, для затравки

[рони]

Dilettante_Pro,
безопаснее так ...
newInput.style.cssText =

[Dilettante_Pro]

рони,
Надо же и ТС что-то оставить