JSFiddle - React, Tailwind, and code Playground

by zordaxy

HTML

<!DOCTYPE html>
<html>
<head>
	<title>To-Do List</title>
</head>
<body>

<div class = "content"></div>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<button id = "b">Add A Task</button>
<div class = "To-Do">
<div class = "modal-content">
<p align = "center" id = "aat" onclick='checked()'>ADD A TASK</p>
<input type = "text" placeholder = "task" id = "task">
<input type = "date" id = "date">
<div class = "close">+</div>
<input type = "submit" id = "s">
</div>
</div>
<div id = "task2"></div>
<h2>YOUR TASKS</h2>
</body>
</html>

JavaScript

document.getElementById("b").onclick = function() {
	document.querySelector(".To-Do").style.display = 'flex';
}
document.querySelector(".close").onclick = function() {
	document.querySelector(".To-Do").style.display = 'none';
}

document.getElementById("s").onclick = function() {
	var newEl = document.createElement("p");
	newEl.setAttribute("id", "tsks" );
     newEl.innerHTML =  "<input type = 'checkbox' id = 'check' onclick = 'checked2(this);'>"  + task.value  + '&nbsp;' + date.value;
	document.getElementById('task2').appendChild(newEl);


}
function checked2(item) {
	console.log(item);
	 item.parentElement.style.textDecoration = "line-through";
}