Question

Please linked both files. For this assignment you need to create a ToDo list using Javascript,...

Please linked both files.

For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS.

Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link in CSS from a separate file).

On the todo.html page, create two blocks of content (see the attached diagram).

At the top of the page, create a HTML form with the label New Item.

  • The form should contain two elements: a textarea and a submit button.
  • The submit button should be disabled if there is no text in the textarea. Inputting text in the textarea should enable the button.
  • If the submit button is clicked while enabled, a new item should be added to the Item List section below the form. Once the item is added, the textarea should be cleared.

Below the form, create a block with the label Item List. This block will initially be empty.

When the submit button in the form is clicked, a new sub-block of content ('item block') should be created containing the following:

  • The text from the textarea in the form.
  • A timestamp below the text. This timestamp should be in a user-friendly format showing date and time (down to minute) that the item was created. This should be auto-generated based on the computer's local time.
  • A delete button in the upper right of the item block, floated to the right of the text. When the delete button is clicked, the entire item block should be deleted. (You can include an 'Are you sure' confirm dialog if you like.)

Additional item blocks should be appended after the first item in the list. Item blocks should stack vertically.

HOW TO LINKED BOTH FILES TOGETHER?

<!DOCTYPE html>
<html>
<head>
   <title>TODO List</title>
   <script src="todo.js"></script>
   <style>
   #secondBlock{          
       color : black;
       visibility : hidden;
       width : 500px;
       height : 50px;  
   }
   button{
       width : 150px;
       height : 30px;
       border-radius : 5px;
       background-color : cyan;
       color : black;
   }  
   </style>
</head>
<body>
   <h1>TODO LIST : </h1>
   <form>
       <label>New Item</label></br>
       <TextArea rows="5" cols="20" id="itemTxt" onkeypress="textTyped()"></TextArea>
       <br/><br/>
       <button onclick="return addItem()" id="submit" disabled>Submit</button>
   </form>
   <div id="secondBlock">
      
   </div>
</body>
</html>

how could you linked them?

<!DOCTYPE html>
<html>
<head>

function textTyped(){
   var inputText = document.getElementById("itemTxt").value;
   var submitBtn = document.getElementById("submit");  
   if(inputText.length == 0) {
       submitBtn.disabled = true;
   }else {
       submitBtn.disabled = false;
   }
}
function addItem() {  
   var inputText = document.getElementById("itemTxt");  
   var submitBtn = document.getElementById("submit");  
   var nextBlock = document.getElementById("secondBlock");  
   var newPara = document.createElement("p");  
   var date = new Date();
   newPara.innerHTML = inputText.value + "<br>" + date.getDate() + "/" + (parseInt(date.getMonth())+1) + "/" + date.getFullYear() + " "
   + date.getHours() + ":" + (date.getMinutes()-1) + ":" + date.getSeconds();  
   var deleteBtn = document.createElement("BUTTON");
   deleteBtn.innerHTML = "DELETE ITEM";
   deleteBtn.onclick = function() {
       newPara.remove();
   }
   newPara.style.width = "500px";
   deleteBtn.style.cssFloat = "right";  
   newPara.appendChild(deleteBtn);
   nextBlock.appendChild(newPara);      
   nextBlock.style.visibility = "visible";  
   inputText.value = "";
   submitBtn.disabled = true;
   return false;
}

</body>
</html>

Homework Answers

Answer #1

As you mentioned , name the first html file as todo.html or however you wish to . And the second file should be named as todo.js because thats how it is mentioned and linked " <script src="todo.js"> ".

By looking at the second file I assume you page doesnt supported JS , because of the inappro. tags .

Its easy , just look into the todo.js file.

" <!DOCTYPE html>
<html>
<head> "

These are html tags and only used in html files mostly , not for scripts or styles. So now do we do to get it fixed?

SIMPLE , Just replace those tags with script tags ! Still confused? Use <script> </script> tags.

The first three lines are replaced with <script> and last two with ending tag </script>. Now save and try running. :)

Know the answer?
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
Similar Questions
Need this done using PHP code and not javascript Create a PHP form with a textarea...
Need this done using PHP code and not javascript Create a PHP form with a textarea field input and a submit button. The textarea field should be able to accept up to 250 characters. When the user clicks the Submit button, read the text in the textarea and display the following results on a web age. At the bottom of the page include a link back to the form. Number of characters: Number of words: (hint: explode the string into...
You must implement a dynamic webpage the provides a basic task-list functionality. In particular, you page...
You must implement a dynamic webpage the provides a basic task-list functionality. In particular, you page should provide a user an interface to add and remove a task as well as mark a task as completed. For this version of the assignment, the tasks will be added directly in the HTML page by manipulating the DOM. Moreover, you should maintain an array that stores task details. Each task comprise of three fields: task-title: which is a one-line description of the...
Java Script I need the code to produce these 3 output. I can only get it...
Java Script I need the code to produce these 3 output. I can only get it to produce input #3 I need it to produce the following: // Input #1: // http://www.example.com // Output // http://www.example.com // Input #2: // http://www.example.com?name=r2d2 // Output // http://www.example.com // name: r2d2 // Input #3: // http://www.example.com?name=r2d2&email=r2d2%40me.com&human=no // Output // http://www.example.com // name: r2d2 // email: [email protected] // human: no THIS IS WHAT I HAVE SO FAR: HTML <!DOCTYPE html> <html lang="en"> <head> <meta...
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS...
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS OR SWITCH STATEMENTS IN THE JAVASCRIPT. Even though there is stylesheet in the HTML file do no create a new one. Project Standards: Students will use click events to capture user input. Students will use variables to store information needed by their application and keep track of their program’s state. Students will use conditionals to control project flow. Project Task You will be building...
For this assignment, create an html page that has a login form. The form should have...
For this assignment, create an html page that has a login form. The form should have 3 input elements -- 1. This should have a type text for the user to enter UserName 2. This should have a type password (like text except cannot see the text that is typed in), for the user to enter password. 3. Submit button (type submit, as we did in class on 2/6). The form method should be set to POST and the action...
<?php    if(isset($_GET['submit'])){ //sanitize the input        /* Check the error from the input: if...
<?php    if(isset($_GET['submit'])){ //sanitize the input        /* Check the error from the input: if input from user is empty -> get an error string variable if input is not empty -> use preg_match() to match the pattern $pattern = "/^[1-9][0-9]{2}(\.|\-)[0-9]{3}(\.|\-)[0-9]{4}$/"; -> if it's a matched, get a success string variable */           } ?> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link...