html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!--<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slipjs/2.1.0/slip.min.js"></script>
</head>
<body>
<ul id="todolist">
<li>
<div class="item">
<div class="id">1</div>
<div class="task">Mom asked me not to forget to drink more water at school</div>
<div class="alter">
<span class="compl">Completed</span>
<span onclick="" class="edit">edit</span>
<span onclick="" class="del">del</span>
</div>
</div>
</li>
<li>
<div class="item">
<div class="id">2</div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
font-family: 'Roboto', sans-serif;
background: #272822;
}
.task {
display: inline-block;
width: 85vw;
}
.id {
display: inline-block;
width: 5vw;
vertical-align: top;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
.item {
color: #fff;
background: #374850;
padding: 5px 5px;
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run