Question

Using a state machine design pattern and keypress() create a website that can capture user keyboard input. Each time the userUSE THE GIVEN STARTER HTML & JS FILES (DON'T NEED CSS FILE):
$(document).ready(function() { $(li).css(id, uw); const states = [idle, gather, process]; var state = states[0];

0 0
Add a comment Improve this question Transcribed image text
Answer #1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    

    <script>

        $(document).ready(function() {

            $('#myinput').keypress(function(event){

                var keycode = (event.keyCode ? event.keyCode : event.which);

                if(keycode == '13'){ //keycode 13 stands for enter key

                    add()   // call add method

                }

            });

        });

        function add(){

            var ip = $('#myinput').val()

            var ele = document.createElement('li') //create list item element

            $(ele).html(ip) //write text to element

            $('#mylist').append(ele) //append element to list

            $('#myinput').val('') //clear input text

        }

        function reset(){

            $('#mylist').html('') //clears the list

        }

    </script>

</head>

<body style="padding: 10px;">

    <div id="todolist" style="padding: 10px;">

        <h2>To Do List</h2>

        <input type="text" id="myinput" placeholder="Enter here..">

        <button onclick="reset()">Reset</button>

    </div>

    <div style="border-style: solid; padding: 5px; margin: 5px;">

        <h3>Your todo list</h3>

        <ul id="mylist">

        </ul>

    </div>

</body>

</html>

Add a comment
Know the answer?
Add Answer to:
USE THE GIVEN STARTER HTML & JS FILES (DON'T NEED CSS FILE): Using a state machine...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • JQuery- need help with the option to Edit the items on To-Do list program...either an option...

    JQuery- need help with the option to Edit the items on To-Do list program...either an option for edit button or double clicking the item will enable user to edit the list   <div id="container"> <hl>To-Do List<i class=" fas fa-plus"></i></hl> <input type ="text" ame' placeholder="Add Items To Do" id-'nan kul id-"display" <li><span>i class="fas fa-trash"></i></span> Build An Todo List</li> <li><span><i class="fas fa-trash"></i></span>Build Color Game</li> <li><span><i class="fas fa-trash"></i></span> Build Calculator</li> </ul> <button onclick="save ()">save< /button> </div> ("ul").on("click", "li",function () 5 $(this).toggleclass ("completed"); 6 7...

  • given below are the project description and their Html and css files i need javascript according...

    given below are the project description and their Html and css files i need javascript according to the project and other files! WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...

  • given below are the project description and their Html and css files i need javascript according to the project and other files!

    HTML------------------------------------------------------CSS---------------------------------------------------WEB230 - JavaScript 1 Assignment 7 - FormsSome of these tasks would be better done in HTML or CSS but do them in JavaScript to practice whatwe have learned.1. Select the form element and save it in a variable. From here we can access all of the form fields.2. When the page loads do the following:add the password value "monkey"select the favourite city "New York"clear the textarea3. Add an event handler to the "name" field to change the background color...

  • In this problem, you will create a selectable “To Do” List. To add a task to...

    In this problem, you will create a selectable “To Do” List. To add a task to this list, the user clicks the Add Task button and enters a description of the task. To delete a task from the list, the user selects the task and then clicks the Delete Task button. Open the HTML and JavaScript files provided as start-up files (index.html from within todo_list_Q.zip file). Then, review the HTML in this file. Note, within the div element, there is...

  • the is my HTML and CSS code. I didn't attach the image or the CSS file...

    the is my HTML and CSS code. I didn't attach the image or the CSS file because of the space limit. two things I wanted to incorporate on this page are to make "MY TOP 3 MUSIC GENRES" blink using javascript and to make the video links autoplay using javascript both should be using javascript requirement: our professor told us not to use <div> or alert. thank you for your help <!DOCTYPE html> <!-- I used w3school for the formatting...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to...

    Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to have my text in the body, white. All text and the picture centered but how do I have margins on the left and right side?. I have a figcaption and I dont know have to place it under the picture but I am having a hard time. Can you help me? Thank you! HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"...

  • URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

    URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to download the uncompressed latest version of jQuery Copy the jQuery.x.x.x.js file in the folder and specified as source file. Task 2: Download and install HTML-Kit 1. Navigate to htmlkit.com. 2. Click Download HTML-Kit 292. After it downloads, launch HKSetup.exe. Choose Full installation (the default) Uncheck Yes, download and install HTML-Kit Tools Trial. 6. Click Next>Finish. Task 3: Creating a Simple jQuery Application Launch HTML-Kit....

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT