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.
---------------------------------------
todo.html
--------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamically add/remove items from list - JavaScript</title>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<div id="myBlock1" class="header">
<form>
<label for="txt">New Item</label>
<input type="text" id="txt" onkeyup="manage(this)" /></br></br>
<center><input class="addBtn" id="btSubmit" onclick="addItem()" type="button" value="Submit" disabled>
</center>
</form>
</div>
<div id="myBlock2">
<center><em><strong><label for="male">Item-List</label></strong></em></center>
<p align="right">
<input id="rmBtn" onclick="removeItem()" type="button" value="X">
</p>
<center>
<ul id="myUL"></ul>
</center>
</div>
<script src="todo.js"></script>
</body>
</html>
---------------------------------------
todo.css
--------------------------------------
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #eee;
font-size: 18px;
transition: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul li:nth-child(odd) {
background: #f9f9f9;
}
.header {
background-color: #55aaff;
padding: 30px 40px;
color: white;
text-align: center;
}
---------------------------------------
todo.js
--------------------------------------
function manage(txt) {
var bt = document.getElementById('btSubmit');
if (txt.value != '') {
bt.disabled = false;
}
else {
bt.disabled = true;
}
}
function addItem() {
var d = new Date();
var n = d.toString();
var ul = document.getElementById("myUL");
var val = document.getElementById("txt");
var li = document.createElement("li");
li.appendChild(document.createTextNode(val.value + " "+n));
ul.appendChild(li);
document.getElementById("txt").value = "";
}
function removeItem() {
confirm("Are You Sure ?");
document.getElementById("myUL").innerHTML = "";
}
-------------------
NOTE
------------------
I am unable to find any attachment with this as you mentioned so
i made a simple UI for this if it doesn't fits your requirement let
me know and upload the sample.
Thanks :)