You are required to create a to-do-list in JavaScript based. This application mu
ID: 3709905 • Letter: Y
Question
You are required to create a to-do-list in JavaScript based. This application must cover basic features, such as add, edit and remove an item from the list. Upon adding an item, user can define the priority of it. There are three different levels of priorities, which are high, medium and low priorities. Each item must be arranged according to the periority set. For an example, all the items that set in high priority must be placed on top of the list. The design and outlook of the list is based on your creativity, for instance, you may use three colours to differentiate the different level of priority. You are allowed to use any external open source library (with proper citation and acknowledgment required) in order to enhance the visual effect or to achieve something needed for your application. You are also encouraged to add any extra feature that suit the need of your application for rewarding some bonus marks.
Please answer as the requirements need.
Explanation / Answer
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
</head>
<body>
<form>
<div id="add-data-here" align="center">
<h3 align="center"> To Do List Here </h2>
<form>
<table border="1" align="center">
<tr>
<td>
Enter To Do:
</td>
<td>
<input id="testings" name="todoname" type="text" placeholder="Enter To Do"></input>
</td>
</tr>
<tr>
<td>
Preference:
</td>
<td>
<input type="radio" name="preference" value="High"> High
<input type="radio" name="preference" value="Medium"> Medium
<input type="radio" name="preference" value="Low"> Low
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="ADD">
</td>
</tr>
</table>
</form>
</div>
<h3>Data Table Is Here</h3>
<!--
<table class="table table-striped table-bordered " id="dataTable" width="100%">
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</thead>
<tr> <td>dataOne</td> <td>dataTwo</td> <td>dataThree</td> </tr>
<tr> <td>data1</td> <td>data2</td> <td>data3</td> </tr>
<tr> <td>data1</td> <td>data2</td> <td>data3</td> </tr>
<tr> <td>data1</td> <td>data2</td> <td>data3</td> </tr>
</table>
-->
<table id="user_mailbox_count_table" class="display table table-striped" width="100%"></table>
<script>
$('#dataTable').DataTable( {
paging: true,
ordering: true,
searching: true
} );
var header_list= ["sl","ToDo","Prefence","Add"];
var table_data=[];
function user_mailbox_count_draw_table(header_list, table_data_tr, id_name) {
$('#'+id_name).html('');
var columns_data=[];
for(var i=0; i< header_list.length; i++){
columns_data.push({ 'title': header_list[i]+''});
}
$('#'+id_name).DataTable( {
data: table_data_tr,
paging: false,
searching: false,
bInfo : false,
destroy: true,
columns: columns_data
} );
}
function removeElement(index){
alert(index);
list.splice(index, 1);
for(i=0;i<list.length;i++){
list[i][0]=i;
list[i][3]="<input type='submit' value='Remove'></input>";
}
user_mailbox_count_draw_table(header_list,list,'user_mailbox_count_table');
}
var list = [];
function addElement(){
//list.push($('#testings').val())
var todoName = $('input[name=todoname]').val();
var prefName = $('input[name=preference]:checked').val();
list.push([0,todoName,prefName,"<input type='submit' value='Remove'></input>"]);
for(i=0;i<list.length;i++){
list[i][0]=i;
list[i][3]="<input type='submit' value='Remove'></input>";
}
user_mailbox_count_draw_table(header_list,list,'user_mailbox_count_table');
}
//user_mailbox_count_draw_table(header_list,table_data,'user_mailbox_count_table');
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.