epam-js-jun-2019 · YakovlevaNatasha · Aug 5, 2019
diff --git a/YakovlevaNatasha/img/background.jpg b/YakovlevaNatasha/img/background.jpg
diff --git a/YakovlevaNatasha/index.html b/YakovlevaNatasha/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+
+	<!-- Шрифты -->
+	<link href="https://fonts.googleapis.com/css?family=Lacquer&display=swap" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Lato:400,700i&display=swap" rel="stylesheet">
+
+
+	<link rel="stylesheet" type="text/css" href="main.css">
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
+
+	<script type="text/javascript" src="script.js"></script>
+	<title>To Do List</title>
+</head>
+<body>
+	<header>
+		Create your own to-do list! Let's start!
+	</header>
+
+	<main>
+		<span class="add-task">
+			<input id="add-task__text" type="text" name="task" placeholder="Add new task" size="40">
+			<input id="add-task__button" type="button" name="add" value="Add task">
+		</span>
+
+		<div class="container">
+			<ul id="tasks" type="none">
+				<!-- created tasks will be here-->
+			</ul>
+		</div>
+	</main>
+
+</body>
+</html>
diff --git a/YakovlevaNatasha/main.css b/YakovlevaNatasha/main.css
@@ -0,0 +1,107 @@
+html {
+	width: 100%;
+	height: 100vh;
+	background-image: url('img/background.jpg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    font-family: 'Lato', sans-serif;
+    font-size: 18px;
+
+}
+
+header {
+	margin-top: 40px;
+	text-align: center;
+	font-size: 30px;
+	font-weight: 700;
+	color: #133754;
+	font-family: 'Lacquer', sans-serif;
+}
+
+.add-task {
+
+	height: 30px;
+	margin-top: 30px;
+	margin-bottom: 50px;
+	display: flex;
+    /*выравнивание по основной оси*/
+    justify-content: center;
+}
+
+#add-task__text {
+	padding-left: 5px;
+	padding-right: 5px;
+	margin-right: 15px;
+}
+
+#add-task__button {
+	border: 0px;
+	border-radius: 50px;
+	background-color: rgba(7, 138, 31, 0.7);
+	color: #fff;
+}
+
+#add-task__button:hover {
+	background-color: rgba(7, 138, 31, 1);
+	color: #fff;
+	font-weight: 700;
+	transition: 0.2s ease-out;
+}
+
+
+ul {
+
+	margin: auto;
+	padding-left: 10px;
+	padding-right: 10px;
+}
+
+ul li {
+	cursor: default;
+
+	padding-left: 15px;
+	padding-right: 15px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+
+	background: #eee;
+    -ms-user-select: none; 
+    -moz-user-select: none; 
+    -webkit-user-select: none; 
+    user-select: none; 
+
+    position: relative;
+
+}
+
+ul li:hover {
+	background: #ddd;
+}
+
+ul li.checked {
+	color: #eee;
+	background: #31ad31;
+}
+
+ul li.checked::before {
+	padding-right: 5px;
+	content: "\2714";
+	/*color: green;*/
+}
+
+.close {
+	color: #000;
+	font-size: 20px;
+	float: right;
+
+	padding-right: 5px;
+	padding-left: 5px;
+
+}
+
+.close:hover {
+	background-color: #000;
+	border-radius: 50px;
+	color: white;
+}
diff --git a/YakovlevaNatasha/script.js b/YakovlevaNatasha/script.js
@@ -0,0 +1,58 @@
+
+window.onload = function() {
+
+	showClosingButtons();
+
+	//strike out a task
+	var listOfTasks = document.querySelector('ul');
+	listOfTasks.addEventListener('click', function(event){
+
+		event.target.classList.toggle("checked");
+
+	});
+
+	//create task
+	document.getElementById('add-task__button').onclick = function () {
+
+		var li = document.createElement('li');
+		var newTask = document.getElementById('add-task__text').value;
+
+		if (!newTask.match(/\S/)) {
+			alert("Поле не может быть пустым");
+
+		} else {
+			var newNode = document.createTextNode(newTask);
+			li.appendChild(newNode);
+			document.getElementById("tasks").appendChild(li);
+			createClosingButton(li);
+		}
+
+	}
+
+	//show closing buttons
+	function showClosingButtons() {
+		var tasks = document.getElementsByTagName('li');
+		for (var i=0; i<tasks.length; ++i){
+
+			createClosingButton(tasks[i]);
+
+		}
+	}
+
+	function createClosingButton(task) {
+
+		var span = document.createElement("span");
+		var closeBtn = document.createTextNode("\u00D7");
+
+		span.className = "close";
+		span.appendChild(closeBtn);
+		task.appendChild(span);
+
+		span.onclick = function () {
+			task.style.display = "none";
+		}
+
+
+	}
+
+}