In: Computer Science
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.
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:
Additional item blocks should be appended after the first item in the list. Item blocks should stack vertically. <!DOCTYPE html> function textTyped(){ |
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.