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>
<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>
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;
}
</html>
PLEASE GIVE IT A THUMBS UP, I SERIOUSLY NEED ONE, IF YOU
NEED ANY MODIFICATION THEN LET ME KNOW, I WILL DO IT FOR
YOU
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
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("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;
}
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
index.html
<!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>