In: Computer Science
Here is HTML code for a Daily Planner (To-Do List). Along with screenshots of the web application.
<html>
<head>
<title>Daily Planner</title>
</head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<h3 id="date"></h3>
<p> Today's Tasks</p>
<div id="taskDisplay" class="card scroll" style="overflow:auto; width:300px; height:300px;">
<div id="taskList">
</div>
</div>
<br><br>
<div class="form-inline">
<input class="form-control" style="width:200px; margin-right:20px;" type="text" placeholder="Enter Task Here" required id="task">
<button class="btn btn-info" onclick="addTask(document.getElementById('task').value)">Add Task</button>
</div>
<div id="helperText" style="display: none"><font color=red size=2>Please enter some text</font></div>
<script>
let i = 1;
function addTask(task){
if(task!=''){
document.getElementById("taskList").innerHTML += `<div id="task${i}">
<input type="checkbox" id="ch${i}" name="horns" onclick=toggleTask('${i}')>
<label for="task" id="to-do${i++}">${task}</label>
</div>`;
document.getElementById("task").value="";
document.getElementById('helperText').style.display='none';
}else{
document.getElementById('helperText').style.display='block';
}
}
function toggleTask(i){
document.getElementById('ch'+i).setAttribute('checked', 'true');
const divId = 'to-do'+i;
const html = document.getElementById(divId).innerText.strike();
document.getElementById(divId).innerHTML = html;
}
function calcDate(){
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var dateObj = new Date();
var month = dateObj.getUTCMonth(); //months from 1-12
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
newdate = day+" "+monthNames[month]+" "+year;
return newdate;
}
document.getElementById('date').innerHTML = calcDate();
</script>
</body>
</html>