Skip to content

Instantly share code, notes, and snippets.

@HuangStanley050

HuangStanley050/index.html

Created February 1, 2018 12:33
Show Gist options
  • Save HuangStanley050/2cd889569fd526a75ee07df4b385df78 to your computer and use it in GitHub Desktop.
Save HuangStanley050/2cd889569fd526a75ee07df4b385df78 to your computer and use it in GitHub Desktop.
Download ZIP
ToDo List
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title Goes Here</title>
<link href="./resources/something.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-offset-2 col-xs-8 todo">
<h2>TO DO LIST</h2>
<i id="hide_form" class="fa fa-plus"></i>
</div>
</div>
<div class="row">
<input class="col-xs-offset-2 col-xs-8" id="task" placeholder="New Task"></input>
</div>
<div class="row" id="task_list">
</div>
</div>
</body>
</html>
Raw
script.js
$( document ).ready(function() {
var task;
function add_task(task){
//alert(task);
var trash_icon='<i style="font-size:20px" class="fa fa-trash"></i>';
$("#task_list").append("<div class=\"col-xs-8 col-xs-offset-2 task\">"+trash_icon+task+"</div>");
}
$("input").keypress(function(e){
if(e.which===13){
task=$("#task").val();
add_task(task);
$("input").val("");
}
});
$("body").on("click", ".col-xs-8.task", function(){
$(this).css({"text-decoration":"line-through",
"text-decoration-color":"red"}
);
});
$("#hide_form").click(function(){
$("input").toggle();
});
$("body").on("click", ".fa.fa-trash", function(){
//alert("hi");
$(this).parent().fadeOut("slow");
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.css
body{
background: linear-gradient(to right, #8080ff, #0080ff);
}
h2{
color: white;
display: inline-block;
}
.fa.fa-plus{
color: white;
font-size: 20px;
margin-top: 25px;
margin-left: 20px;
cursor: pointer;
}
.col-xs-8.todo{
margin-top: 50px;
height: 80px;
background-color: #002080;
display: flex;
flex-direction: row;
justify-content: space-between;
}
input.col-xs-8{
height: 50px;
font-size: 20px;
}
.col-xs-8.task{
height: 40px;
background-color: #adc2eb;
border-width: 1px;
border-color: black;
border-style: solid;
cursor: pointer;
transition: 3s ease-out;
overflow: hidden;
/*position: relative;*/
}
#task_list{
font-size: 20px;
color: white;
}
.fa.fa-trash{
color: red;
position: relative;
margin-right: 5px;
left: -30px;
}
.col-xs-8.task:hover .fa.fa-trash{
transition: 1s;
left: 0;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment