html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title>Type🌹 </title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<h1 class="h1" >Type🌕 </h1>
<input type="text" id="name" />
<div id="msg"></div>
<button>Click Me to Change Color! </button>
</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
#msg {
font-size: 16pt;
font-weight: bold;
}
.red{
color: red;
}
body {
background-color: gray;
}
input{
background-color: #000;
color: #fff;
}
button{
background-color: #efe;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
$(function() {
$("#name").keydown(function() {
$("#msg").html($("#name").val());
});
});
$(function() {
$("button").click(function() {
$("#msg").toggleClass("red")
});
});
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run