mdutro002
4/10/2018 - 8:00 PM
TaskManager
TaskManager
<html>
<!--Meta tag for a responsive viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>ChallengeOne</title>
<!--Typically, I stay away from inline styling for webpages, but for simplicity's sake, I've done so here-->
<style>
#headerLine {
height: 70px;
font-family: Verdana, Georgia;
background-color: lightblue;
border: 2px;
border-style: solid;
padding: 6px;
}
#taskAdd {
width: 30%;
max-width: 40%;
height: 500px;
background-color: lightgreen;
font-family: Verdana, Georgia;
float:left;
clear:left;
border-style: solid;
padding: 20px;
}
#submitButton{
font-family: Verdana;
background-color: white;
cursor: pointer;
}
#masterList{
float: right;
position: relative;
width: 60%;
max-width: 70%;
padding: 21px;
border: none;
}
#userTask{
max-width: 25%;
}
#listTask{
margin: 0;
padding: 0;
}
#listTask li{
border-style: solid;
position: relative;
font-family: Verdana;
padding: 5px;
width: 40%;
}
#listTask li button {
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<!--Header -->
<div id=headerLine>
<h1> Task Manager</h1>
</div>
<!--Form to collect task -->
<div id="taskAdd">
<form>
<p>What tasks do you need to accomplish today?</p>
<input type='text' id=userTask>
<button id="submitButton" type="button">Add Task</button>
</form>
</div>
<!--Div to contain tasks-->
<div id="masterList">
<h3>To Do:</h3>
<ul id="listTask"></ul>
</div>
<!--Javascript-->
<script src="app.js"></script>
</body>
</html>//Function takes input from the form field (userTask tag) and creates a todo item with corresponding remove button
function addItem() {
var item = document.getElementById('userTask').value;
var ul = document.getElementById('listTask');
var li = document.createElement('li');
var removeButton = document.createElement('button');
removeButton.appendChild(document.createTextNode('Complete'));
removeButton.className = 'removeButton1'
li.appendChild(document.createTextNode(item));
li.appendChild(removeButton);
ul.appendChild(li);
document.getElementById('userTask').value="";
}
//Removing tasks
document.getElementById('masterList').addEventListener('click', function removeItem(){
if (event.target.matches('.removeButton1')){
var hitThis = (event.target.closest('li'));
document.getElementById('listTask').removeChild(hitThis);
}
});
//Adding tasks
document.getElementById("submitButton").addEventListener("click", addItem);