My to-do List

by BloodStorm

HTML

<body>
<div id="header">
<h2>Список Заданий</h2>
<input id="write" placeholder="Title..." type="text">
<button id ="addElement">Add</button>
</div>

<ul id = "list">
<li class = "check">Вставать в 7:00 утра</li>
<li>Выпить Чай</li>
<li>Очередная атака на Пентагон</li>
<li>Захватить МИР</li>
</ul>
</body>

CSS

body{
	font: 1em/1.4em sans-serif;
}

/*Эт главный <div> сэлемент*/
#header{
	background-color: #008CBA;
	text-align: center;
	padding: 20px 0px 30px;;
	margin: 0px auto;
	color: white;
	font-size: 27px;
}
/*Тут понятно <h2> элемент*/
h2{
	margin: 0px 0px 20px;
}
/*Эт  <input> внутри написано Tite... */
#write{
	width:60%;
	font-size:14px;
	padding:14px;
}
/*Эт конпка <button>*/
#addElement{
	background-color: #f44336;
	border: none;
	color: white;
	padding: 15px 32px;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	transition: 0.3s;
}
/*Эт псевдокласс :hover, подсветка конпки*/
#addElement:hover{
	background-color: #f42336;
}
/*Общий стиль листа и <li> элементов*/
ul{
	margin: 0;
  padding: 0;
}
ul li{
	cursor: pointer;
	position: relative;
	padding: 10px 8px 12px 40px;
	background-color: LightSkyBlue ;
	text-align:center;
	font-size:25px;
	transition: 0.5s;
}

ul li:nth-child(odd) {
    background: LightSteelBlue;
}

ul li:hover{
	background-color: DodgerBlue ;
}

/*Это подчеркивание элемента из списка*/
ul li.check{
		background: #888;
    color: #fff;
    text-decoration: line-through;
}
ul li.check::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;
}

/*Это кнопка для Удаления Списка*/
.close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 16px 12px 16px;
}

.close:hover {
    background-color: #f44336;
    color: white;
}

JavaScript

/*Создает кнопку «закрыть» и добавьте ее в каждый элемент списка*/
var MyList = document.getElementsByTagName("li");
var i;
for(i = 0; i < MyList.length; i++){
	var span = document.createElement("SPAN");
	var text = document.createTextNode("\u00D7");
	span.className = "close";
	span.appendChild(text);
	MyList[i].appendChild(span);
}

/*Нажмите кнопку закрытия, чтобы скрыть текущий элемент списка.*/
var CloseElem = document.getElementsByClassName("close");
var i = 0;
while(i < CloseElem.length){
CloseElem[i].onclick = function(){
var HeaderClelm = this.parentElement;
HeaderClelm.style.display = "none";
}
i++
}

/*Добавьте символ «checked», когда вы нажимаете на элемент списка*/
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('check');
  }
}, false);

/*Создайте новый элемент списка при нажатии кнопки «Добавить»*/
$("#addElement").click(function(){
clickElm();
});

function clickElm()
{
	var li = document.createElement("li");
  var inputValue = document.getElementById("write").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
	if(inputValue == ""){
	alert("Пишите что нибудь")
	}else{
	document.getElementById("list").appendChild(li);
	}
	document.getElementById("write").value = "";

	var span = document.createElement("SPAN");
	var text = document.createTextNode("\u00D7");
	span.className = "close";
	span.appendChild(text);
	MyList[i].appendChild(span);
	
	for(i=0;i < CloseElem.length;i++)
	{
	CloseElem[i].onclick = function()
		{
			var HeaderClelm = this.parentElement;
			HeaderClelm.style.display = "none";
		}
	}
}