Великоват конечно будет...
Последний кусок кода, который должен менять обратно текстовую часть, закомментирован, т.к. он вызовет ошибку....
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset="utf-8" />
<title>ToDoList</title>
<style>
.data{
width: 70%;
height: 50%;
margin-top: -2%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
background: #eee;
font-size: 18px;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>ToDoList</h1>
</div>
<div class="string">
<input type="text" placeholder="Type your task..." id="toDoEl" >
</div>
<ul id="list">
</ul>
<button id="remove" class="remove" onclick="remove()" >
Clear list
</button>
</div>
</div>
<script>
var list = document.querySelector('ul');
list.addEventListener('click', function (ev) {
if(ev.target.tagName === "LI") {
ev.target.classList.toggle('checked');
} else if(ev.target.tagName === "SPAN") {
var div = ev.target.parentNode;
div.remove();
}
}, false);
var reg = /^([\.\?\!\-\_\s\d]{0,}[a-zа-я]{1,})$/gim
list.addEventListener('click', function(event) {
if(event.target.tagName === "BUTTON") {
var div = event.target.parentNode;
var target = event ? event.target : window.event.srcElement;
var input = document.createElement('input');
input.className = 'data';
input.value = div.firstChild.data;
div.replaceChild(input, div.firstChild);
if (div == target) input.focus();
}
}, false);
function newElement() {
var li = document.createElement('li');
var inputValue = document.getElementById('toDoEl').value;
var t = document.createTextNode(inputValue);
li.appendChild(t); t
if(reg.test(inputValue) === false) {
alert("Type your task!");
} else {
document.getElementById('list').appendChild(li);
}
document.getElementById('toDoEl').value = "";
var span = document.createElement('span');
var txt = document.createTextNode("X");
span.className = "close";
span.appendChild(txt);
var button = document.createElement('button');
var name = document.createTextNode('Edit');
button.className = 'edit';
button.appendChild(name);
li.appendChild(button);
;
li.appendChild(span);
}
var text = document.getElementById("toDoEl");
text.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) newElement();
});
var remove = function(){
var liel = document.getElementById('list');
if (document.querySelector('li') === null){
alert('The List is empty');
} else {
while (liel.firstChild) {
liel.removeChild(liel.firstChild);
}
}
}
/*var input = document.querySelectorAll('.data');
input.addEventListener('keyup', function(event) {
if (event.keyCode === 13) {
var div = event.target.parentNode;
var span = document.createElement('span');
span.data = div.firstChild.value;
div.replaceChild(span, div.firstChild);
};
}, false);*/
</script>
</body>
</html>