markdown 待办事项

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown 待办事项相关的知识，希望对你有一定的参考价值。

<html>
<head>
	<title>Todo list</title>
	<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
	<link rel="stylesheet" type="text/css" href="assets/css/main.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div id="container">
	<h1>TO-DO List <i class="fa fa-arrow-down"></i></i>
</h1>
	<input type="text" name="" placeholder="Add new Todo">
	<ul>
		<li><span><i class="fa fa-trash" aria-hidden="true"></i>
</span> Go to Thailand</li>
		<li><span><i class="fa fa-trash" aria-hidden="true"></i>
</span> Walk dog</li>
		<li><span><i class="fa fa-trash" aria-hidden="true"></i>
</span> Practice code</li>	
	</ul>
</div>

<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>
//strikethrough when clicked

$("ul").on("click", "li", function() {
	$(this).toggleClass("clicked");
});

// click on x to delete a todo

$("ul").on("click", "span", function() {
	$(this).parent().fadeOut(500, function(){
		$(this).remove();
	});  
});

$("input[type='text']").keypress(function(event){
	if(event.which === 13) {
		var todoText = $(this).val();
		$(this).val("");
		$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>");
	}
});

$(".fa-arrow-down").click(function(){
	$("input[type='text']").fadeToggle();
});


#container {
	width: 360px;
	margin: 100px auto;
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	font-style: line-through;
	background-color: #f7f7f7;
}

.clicked {
	color: gray;
	text-decoration: line-through;
}

.fa-arrow-down {
	float: right;
}

body {
	font-family: 'Roboto', sans-serif;
	background: #780206;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #061161, #780206);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #061161, #780206); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}

span {
	background-color: #e74c3c;
	height: 40px;
	margin-right: 20px;
	color: white;
	text-align: center;
	width: 0;
	display: inline-block;
	transition: 0.3s linear;
	opacity: 0;
}

li:hover span {
	width: 40px;
	opacity: 1.0;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

li {
	background: #fff;
	height: 40px;
	line-height: 40px;
	color: #666;
}

li:nth-child(2n) {
	background-color: #f7f7f7;
}

h1 {
	background-color: #2980b9;
	color: white;
	margin: 0;
	padding: 10px 20px;
	font-weight: normal;
	font size: 24px;
	text-transform: uppercase;


}

input {
	padding: 13px 13px 13px 20px;
	width: 100%;
	background-color: #f7f7f7;
	font-size: 18px;
	box-sizing: border-box;
	color: #2980b9;
	border: 3px solid rgba(0,0,0,0);
}

input:focus {
	background: : #666;
	outline: none;
	border: 3px solid #2980b9;
}
To-Do App
---------


A [Pen](https://codepen.io/psychobuddha/pen/yXKyWE) by [Denis](https://codepen.io/psychobuddha) on [CodePen](https://codepen.io).

[License](https://codepen.io/psychobuddha/pen/yXKyWE/license).

以上是关于markdown 待办事项的主要内容，如果未能解决你的问题，请参考以下文章

markdown 待办事项

markdown 片段待办事项列表

求在安卓手机桌面显示日程待办事项的软件！

如何在GitLab注释中添加待办事项以增加待办事项数量？

NSDocument 用于关系数据/待办事项列表？

无法在初始渲染中显示待办事项列表