i\'m making a \"to do list\" website can someone added links and pictures to the
ID: 3904906 • Letter: I
Question
i'm making a "to do list" website
can someone added links and pictures to the code below
i left steps in the code to be fill in with links about a to do list . The list can be about any thing
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("");
}
});
Explanation / Answer
Please confirm where exactly you want the links to be placed in. For now, I am creating all the tasks as a link.
<!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 -->
<style>
.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;
}
</style>
<!-- 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 -->
</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" value="here">
</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>
<script>
$(document).ready(function(){
$('#itemAddId').on('click', itemAddId);
$('#listOftoDoIds').on('change', '.itemCompleteId', itemCompleteId);
$('#listOftoDoIds').on('click', '.itemDeleteId', itemDeleteId);
function itemCompleteId(event){
$(this).parent().toggleClass('toggleDoneClass');
}
function itemDeleteId(event){
$(this).parent().remove();
}
function itemAddId(event){
var toDoNewText = $('#toDoNewId').val();
$('#listOftoDoIds').append('<li><a href="#"><input class = "itemCompleteId" type = "checkbox">' + toDoNewText + '<span class = "glyphicon glyphicon-trash itemDeleteId"></span></a></li>');
$('#toDoNewId').val("");
}
});
</script>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.