Goal Design a fully functional, visually pleasant, \"TO DO list app. Recommended
ID: 3904166 • Letter: G
Question
Goal Design a fully functional, visually pleasant, "TO DO list app. Recommended Procedure: 1. Start from a working example, such as the TO DO list from http://javascriptbook.com/code/c07/example.html Run the example and ensure that you understand it. Modify the example in meaningful ways, one change at a time. (OPTIONAL) Look at the example from http://todomvc.com/examples/iquery/ for inspirat Design your own app! Make sure it does not resemble the examples above in any way that would look (and behave) like an obvious copy of any of them. To be clear, ideally, the functionality should be comparable to any example in http://todomvc.com. But the looks underlying implementation should not be a blatant copy of any existing example. Test your app after every significant change/ addition. Once you've reached a point where your app is complete and fully functional in the browse your choice (Chrome, Firefox, Opera, or Safari), prepare the final package (single zip, all tha needed, and nothing else) Submit the final package via Canvas. 2. 3. 4. 5. 6. 7. 8. Minimum requirements: Your app must be your own work. If you use a site, app, textbook example or any other sou as "inspiration" along the way, please make a note of it in your report. You must use jQuery (and you're allowed to use jQuery plugins, provided that you give pro credit in your app and/or report) Your app must be fully functional, i.e., it must allow: . Adding, editing, deleting, marking as complete, and unmarking as complete each individual entry. Storage of the list items in the user's client machine, i.e., the list should be oExplanation / Answer
As per your requirement i have written code which fulfill all your requirements please follow it step by step.And please include all these files separately with their paths and names.
index.html
----------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>To Do List</title>
<!-- Here we will inlcude Bootstrap cdn -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Here we will include our custom CSS -->
<link rel="stylesheet" href="css/todo.css" media="screen" charset="utf-8">
<!-- Next here we will include jQuery cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- Here we are going to include our todo application logic -->
<script src="js/todo.js"></script>
</head>
<body>
<!-- Here we will deisgn a container -->
<div class = "container">
<!-- In that we will create a row -->
<div class = "row">
<div class = "col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3">
<div class="page-header">
<h1>Todo</h1>
<!-- Here form will start -->
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
<!-- Here we will create input tag-->
<input type="text" class="form-control" id="toDoNewId" placeholder=" Here do laundry">
</div>
<!-- created button by using button tag -->
<button type="button" id = "itemAddId" class="btn btn-success">Add To Do</button>
</div>
</form>
</div>
<!-- created UL list view -->
<ul id = "listOftoDoIds">
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
todo.css
--------
.toggleDoneClass {
text-decoration: line-through;
opacity: 0.5;
}
#listOftoDoIds {
list-style-type: none;
margin: 0;
padding: 0;
}
input[type=checkbox] {
margin-right: 15px;
}
.itemDeleteId {
float: right;
color: #E06C75;
cursor: pointer;
}
#listOftoDoIds li {
padding: 20px 0px 20px 0px;
border-bottom: 1px solid #eee;
}
todo.js
-------
$(document).ready(function(){
$('#itemAddId').on('click', itemAddId);
$('#listOftoDoIds').on('change', '.itemCompleteId', itemCompleteId);
$('#listOftoDoIds').on('click', '.itemDeleteId', itemDeleteId);
$('#toDoNewId').on('keypress', function(eventObject) {
if(eventObject.which === 13) {
itemAddId();
}
eventObject.preventDefault();
});
function itemCompleteId(event){
$(this).parent().toggleClass('toggleDoneClass');
}
function itemDeleteId(event){
$(this).parent().remove();
}
function itemAddId(event){
var toDoNewText = $('#toDoNewId').val();
$('#listOftoDoIds').append('<li><input class = "itemCompleteId" type = "checkbox">' + toDoNewText + '<span class = "glyphicon glyphicon-trash itemDeleteId"></span></li>');
$('#toDoNewId').val("");
}
});
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.