Tengo una lista con tareas y necesito que al oprimir enter se agregue la nueva tarea ingresada en el inṕut una vez se oprima enter.
He tratado de hacer definiedo los siguiente pero no me funciona.
app.js
$(document).ready(function()
{
$('input').keyup(function(e){
if(e.keyCode == 13)
{
var valorTexto = $(this).text();
$("ul li:last").after( '<li'> + valorTexto)
}
});
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Más tareas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="list">
<h3>Por hacer:</h3>
<ul class="todo">
<li>Sacar la ropa</li>
<li>Hacer la cama</li>
<li>Leer un rato</li>
</ul>
<input type="text" id="new-task" placeholder="Ingresa una tarea y oprime Enter">
</div>
</div>
<!-- incluye acá jQuery y crea la referencia a app.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
style.css
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.list {
display: inline-block;
width: 330px;
vertical-align: top;
margin: 0 50px;
}
ul {
font-size: 18px;
background-color: #f5f5f2;
padding: 0;
min-height: 50px;
border: 1px solid #DBDBD3;
}
ul li {
color: #66665D;
list-style-type: none;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid #DBDBD3;
}
ul li:last-child {
border-bottom: none;
}
input[type=text] {
box-sizing: border-box;
font-size: 16px;
width: 100%;
border: 1px solid #ccc;
padding: 13px;
}