четверг, 3 августа 2017 г.

Учим JavaScript. 33. Создаем ToDo список дел. Не закончено.

index.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js"></script>
</head>
<body>
<input type="text" id="in">
<button id="add">Добавить</button>
<hr>
<div id="out"></div>
</body>
</html>

 1.js
window.onload = function() {

var todoList = []; // глобальный пустой массив
// {todo: Купить хлеб, check: false}

if(localStorage.getItem('todo') !=undefined) {
todoList = JSON.parse(localStorage.getItem('todo'));
out();
}

document.getElementById('add').onclick = function() {
var d = document.getElementById('in').value; // получаем введенное значение из input
var temp = {}; // промежуточный массив
temp.todo = d; // добавляем новое дело
temp.check = false;
var i = todoList.length;
todoList[i] = temp;
console.log(todoList);
out();
localStorage.setItem('todo', JSON.stringify(todoList)); // Метод JSON.stringify() преобразует значение JavaScript в строку JSON.

}

function out() {
var out = '';
for (var key in todoList) {
if(todoList[key].check == true) {
out += '<input type="checkbox" checked="checked">';
}
else {
out += '<input type="checkbox">';
}
out += todoList[key].todo + '<br>';
}

document.getElementById('out').innerHTML = out;
}

}
Автор: на

1 комментарий:

Подписаться на: Комментарии к сообщению (Atom)