<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>CC</title>
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div>
<button id = 'speech' onclick = 'speech()'>VOICE ASSISTENT</button>
</nav>
</div>
<section id = "tdZone">
<div id = 'out'>
</div>
<input type = 'text' placeholder = 'What are you going to do today?' autocomplete = 'off' id = 'tdIn'>
</section>
</body>
<script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src = 'tdApp.js' ></script>
</html>
var tdList = $('#tdZone div');
var tdMask = 'tdl_';
function showTasks(){
var isLen = localStorage.length;
if(isLen > 0){
for(var i = 0; i < isLen; i++){
var key = localStorage.key(i);
if (key.indexOf(tdMask) == 0){
$('<li></li>').addClass('tdItem').attr('data-itemid', key).attr('data-itemid'))).text(localStorage.getItem(key)).appendTo(tdList);
}
}
}
}
showTasks()
var nId;
var str;
alert($('.tdItem').attr('data-itemid'));
$('#tdZone input').on('keydown', function(e){
if (e.keyCode != 13){
return;
}
var str = e.target.value;
e.target.value = '';
if (str.length > 0){
var nId = 0;
tdList.children().each(function(index, el){
var jelId = $(el).attr('data-itemid').slice(4);
if(jelId > nId){
nId = jelId;
}
})
nId++;
localStorage.setItem(tdMask + nId, str);
$('<li></li>').addClass('tdItem').attr('data-itemid', tdMask + nId).attr('data-itemid'))).text(str).appendTo(tdList);
}
});
<code lang="html">
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>CC</title>
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<div>
<a id = 'header'></a>
<p id = 'username'></p>
<button id = 'speech' onclick = 'speech()'>VOICE ASSISTENT</button>
<nav>
<ul>
<li><a href = "Pro.html">Main</a></li>
<li><a href = "TBL.html">To do list</a></li>
<li><a href = "Sing.html">Sing in</a></li>
<li><a href = "Reg.html">Create an account</a></li>
</ul>
</nav>
</div>
<section id = "tdZone">
<div>
</div>
<input type = 'text' placeholder = 'What are you going to do today?' autocomplete = 'off' id = 'tdInput'>
</section>
</body>
<script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src = 'Pro.js' ></script>
</html>
</code>