Im creating a classic To Do list application in html/JS/CSS, where i have the following functionality :
- User types inn his/hers Task
- The task is then printet below with a checkbox on the same line
- The task is also stored in an object with a timestamp.
- All new tasks are added above old ones.
How can i solve the following problem, using ONLY css :
When the user checks the checkbox, the task on the corresponding line should be "lined out" so that it becomes clear that its completed.
I made a jsfiddle, but i cant make it run there, anyway here it is: http://ift.tt/2epac6l
What i have so far :
JS :
var tasks = {}
function addTask(){
var task = document.getElementById("inn").value
var ol = document.getElementById("ol")
var li = document.createElement("li")
var d = new Date()
var box = document.createElement("input")
box.type = "checkbox"
box.id = "box"
li.appendChild(box)
li.appendChild(document.createTextNode(task))
ol.insertBefore(li, ol.childNodes[0])
tasks[d.getTime()] = task
console.log(tasks)
}
CSS:
input[type=checkbox] + li {
text-decoration: overline;
}
HTML:
<body>
<div id="container">
<div id="inner">
<h1> To Do List </h1>
<form id="skjema">
Enter Task: <input type="text" id="inn" required="true">
<button type="button" onclick="addTask()"> Submit Task </button> <br>
Count task: <input type="text" id="ut" disabled="true">
</form>
<ol id="ol">
</ol>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire