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.
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.
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>
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. :)
Get Answers For Free
Most questions answered within 1 hours.