Переписать js код c применениям local storage

287

17 ноября 2017, 09:44

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
</head> 
 
<style>  
 
ul { 
color: #F5F5F5; 
background-color: #f29c6a; 
font-size: 30px; 
  } 
 
.brd { 
    border: 4px double black; 
    background-image: url(1.png);  
    padding: 10px; 
	position: absolute; 
    top: 30%; 
    left: 45%; 
    margin: -125px 0 0 -125px; 
}  
 
</style> 
<body> 
	<div class="brd"> 
<div id="menu"> 
Введите задание:<br> 
    <br><label> 
      <textarea id="myInput" placeholder="Что нужно сделать..." style="display:block;width:313px;height:80px"></textarea> 
    </label><br> 
 
    <input type="button" onclick="newElement()" value="Добавить"> 
    <button onclick="sort()">Сортировать</button> 
    <button onclick="reverse()">Реверс</button> 
    <button onclick="reset()">Обновить</button> 
    </div> 
 
<div> 
 
<div id="canvas"> </div> 
 
</div> 
 
<script type="text/javascript"> 
 
function newElement() { 
  var add = document.createElement("add"); 
  var inputValue = document.getElementById("myInput").value; 
  plan.push (inputValue); 
 
 render(); 
 
   document.getElementById("myInput").value = ""; 
} 
 
 
let plan = []; // массив с заданиями 
 
 
 
function render () { 
  const canvas = document.getElementById("canvas");canvas.innerHTML = ""; 
  // запись в "планируется"  
  let a = document.createElement('ul'); 
  for(let i in plan){ 
     
    let li = document.createElement('li'); 
    li.innerHTML = plan[i] + '<button onclick="removePlan('+ i +')">X</button>'; 
    a.append(li); 
  } 
 
    canvas.append(a); 
    // запись в "планируется" 
} 
 
render(); 
 
 function sort() { // ф-ция сортировки тасков в массиве А-Я 
    plan.sort(); 
    render() 
  } 
 
function reverse() { // ф-ция сортировки Я-А 
    plan.reverse(); 
    render() 
  } 
 
 
function removePlan(i) { 
	plan.splice(i, 1); 
	render (); 
} 
// ф-ция для удаления записей с массива планировка 
 
function reset() { // ф-ция обновить страницу 
  location.reload(); 
 
} 
 
</script> 
 
 
</body> 
 
</html>