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
<!--
How to turn callback functions on or off
-->
<!DOCTYPE html>
<html>
<head>
<title>Boolean Flags</title>
</head>
<body>
<h4>Callback management with boolean flags</h4>
<div id="box" class="box">
<h1 id="txt">1</h1>
</div>
<span class="sp">
<button id="b1">color</button>
<input type="checkbox" id="cb1">
<label for="cb1">enable</label>
</span>
<br>
<span class="sp">
<button id="b2">number</button>
<input type="checkbox" id="cb2">
<label for="cb2">enable</label>
</span>
<br>
<span class="sp">
<button id="b3">size</button>
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 {
margin:0;
padding:0;
box-sizing:border-box;
display:grid;
place-items:center;
}
.box{
display:grid;
place-items:center;
margin:50px;
width:100px;
height:100px;
outline:1px solid black;
text-align:center;
}
.sp{
display:flex;
margin:auto;
margin-left:30vw;
}
button{
display:inline-grid;
place-items:center;
width:75px;
}
.red{
background-color: red;
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run