Question

In: Computer Science

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

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.

<!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">

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;
}
      
   </div>
</body>
</html>

Solutions

Expert Solution

todo.html

<!DOCTYPE html>
<html>
<head>
   <title>TODO List</title>
   <link href="todo.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <script src="todo.js" type="text/javascript"></script>
    <h1>TODO LIST : </h1>
    <form>

        <!--At the top of the page, create a HTML form with the label New Item.-->
       <label>New Item</label></br>

       <!--The form should contain two elements: a textarea and a submit button.-->
       <TextArea rows="5" cols="20" id="itemTxt" onkeypress="textTyped()"></TextArea>
       <br/><br/>

       <!--The submit button should be disabled if there is no text in the textarea. Inputting text in the textarea should enable the button.-->
       <button onclick="return addItem()" id="submit" disabled>Submit</button>

   </form>

   <div id="itemBlock">
    <label>Item List</label></br>
   </div>
</body>
</html>

todo.css

#itemBlock{          
    color : black;
    visibility : hidden;
    width : 500px;
    height : 50px;  
}
button{
    width : 150px;
    height : 30px;
    border-radius : 5px;
    border: 3px solid rgb(4, 33, 77);
    background-color : rgba(0, 255, 255, 0.623); /* colour when disabled */
    color : black;
} 

button:hover{
    background-color : rgb(4, 33, 77); 
    color: white;
}

form, h1, div{
    margin: 20px;
    padding: 10px;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
}

todo.js

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("itemBlock");  
    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;
 }

I have done some minor changes. The code does what it should do. If you need any other things feel free to ask.

venereology answered 2 years ago
Next > < Previous

Related Solutions

For this assignment you need to create a ToDo list using Javascript, along with HTML and...
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...
For this assignment you need to create a ToDo list using Javascript, along with HTML and...
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...
For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML...
For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML <canvas> tag. The game will be played "hot seat" where players take turns using the same device. Requirements: The canvas should be 600px tall and wide, with the gameplay area occupying most of the canvas. The X's and O's may be drawn using polygons or large-font text The grid should be drawn using polygons, specifically long, thin rectangles Before & between games, the canvas...
The code to create a Search/Filter Data with Javascript or html from html page.
The code to create a Search/Filter Data with Javascript or html from html page.
Using HTML/Javascript (if needed) I want to create a table for a website that pulls data...
Using HTML/Javascript (if needed) I want to create a table for a website that pulls data from another website where the data is being updated on. Example: https://investors.coca-colacompany.com/stock-information/historical-data I cannot just put in the numbers to a table as they will be getting updated daily. So it needs to link the the website elements. DATE OPEN HIGH LOW CLOSE VWAP VOLUME % CHG CHANGE TRADE VAL TOTAL TRADES 2020-10-13 -- -- -- 51.09 -- -- 0.00% -- -- -- 2020-10-12...
Using HTML and JAVASCRIPT Create a Content area on the main entry page will include inputs...
Using HTML and JAVASCRIPT Create a Content area on the main entry page will include inputs for customer entry for the following: Entry field (with labeling) for the Customer's name Entry field (with labeling) for the Customer's email address Entry field (with labeling) for which room the customer is planning on painting Entry field (with labeling) for the width of the room Entry field (with labeling) for the length of the room Entry field (with labeling) using a colour box...
Using brackets you will need to create the HTML page and CSS style sheet for the...
Using brackets you will need to create the HTML page and CSS style sheet for the given Form example. Form 1: create an HTML page with a form that contains a text input field. The label for the text field should be “City”. Beneath it should be a submit button “Lookup”. Place a horizontal line beneath the Lookup button and add three radio buttons labeled “Beginner”, “Intermediate”, and “Advanced”. Your page should have a title and a header in the...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript or Bootstrap. Website theme can be anything you want: a country, a town, a place, a hobby, people (yourself, your family...), pets, flowers, food, or anything that you find interesting or useful. It may be about real people/places/things or fictitious. Part 1: Content (HTML) After you decide the theme of your website, create HTML pages with the content you want to present. Remember to...
This assignment is about using attributes in HTML. The attributes you will use for this assignment...
This assignment is about using attributes in HTML. The attributes you will use for this assignment include the lang attribute, the type attribute, and the start attribute. For this assignment, you will write an HTML document to create a web page that contains ordered lists with numbers, uppercase letters, lowercase letters, uppercase Roman numerals, and lowercase Roman numerals; and a list with lowercase Roman numerals that starts at a value other than 1. Your document can be about any topic...
Please Use JavaScript and HTML 5) Number guesser (easier) Create a number guessing name, using an...
Please Use JavaScript and HTML 5) Number guesser (easier) Create a number guessing name, using an input and a button to gather a number. The number to be guessed should be a hard-coded whole number between 1 and 20. Tell the user if the number is too high, equal to, or too low than a number you have hard-coded in your application. Remove the text in the input when the user clicks the button.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT