html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<h6>Add new</h6>
<input type="text" value="" size="6
9" maxlength="12">
<button onclick="add(this.previousElementSibling)" >Submit</button>
</div>
<ul id="yourList">
<li class="f" onclick="go(this)">be cool</li>
<li class="f" onclick="go(this)">learn javascript</li>
<li class="f" onclick="go(this)">learn figma</li>
<li class="f" onclick="go(this)">learn adobe</li>
</ul>
</body>
</html>
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
body {
}
div {
position: relative;
left:25%;
top: 25px;
}
ul {
position: relative;
top: 75px;
border: 3px solid;
min-height: 200px;
letter-spacing: 3px;
box-shadow: 50px 20px;
padding: 20px;
}
li {
margin: 10px;
padding: 10px;
box-shadow: 5px 10px;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function add(input) {
let el = document.createElement("li");
el.innerText = input.value;
document.getElementById("yourList").appendChild(el);
}
/*function go() {
document.getElementByClassName("f").style.textDecoration = "underline overline";
}*/
function go(el) {
let lis = document.getElementsByClassName("f");
for(li of lis) li.style.textDecoration = "";
el.style.textDecoration = "line-through";
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run