Using a state machine design pattern and keypress()
create a website that can capture user keyboard input. Each timethe user
types in something and hits <enter> a new TODO list itemwill be
added to the panel. Using click() add a reset button that clearsthe list.
GIVEN STARTER HTML AND JS FILES:
<html>
<head>
<title>JQuery Todo</title>
<link rel=’stylesheet’href=’https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css’>
<link rel=”stylesheet” href=”style.css”>
<scriptsrc=’https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js’></script>
<scriptsrc=’https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js’></script>
<script src=”jqtodo.js”></script>
</head>
<body>
<div class=”container”>
<div class=”card”>
<div class=”card-body”>
<h4 class=”card-title”>JQUERY TODO LIST</h4>
<ul class=”list-group”>
<div class=”control”>
<input type=”text” />
<button type=”button” class=”btnbtn-secondary”>RESET</button>
</div>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function() { $(“li”).css(“id”, “uw”);
const states = [“idle”, “gather”, “process”];
var state = states[0]; var words = new Array();
var ndx = 0; $(“ul”).on(“mouseover”, “li”, function() {
console.log(“x:” + $(this).text()); $(this).attr(“id”, “uw”);}); $(“ul”).on(“mouseleave”, “li”, function() {
$(this).attr(“id”, “uw-gold”); });
$(“button”).on(“click”, function(e) {});
$(“input”).on(“keypress”, function(e) {
var code = e.which;
var char = String.fromCharCode(code);
console.log(‘key:’ + code + ‘tstate:’ + state); switch (state) {
idle case “idle”: break;
case “gather”: break; process case “process”: break; default:break; } });});
Expert Answer
Answer to Using a state machine design pattern and keypress() create a website that can capture user keyboard input. Each time the…