Skip to content

Commit d883c66

Browse files
rachelandrewrachelandrew
committed
additional example for glossary entries
1 parent 9ccb861 commit d883c66

File tree

1 file changed

+130
-0
lines changed

1 file changed

+130
-0
lines changed

‎flexbox/basics/simple-example-anon.html‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>A simple example of Flexbox with an anonymous item</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
height: 160px;
20+
background-color: #F4F7F8;
21+
border: none;
22+
border-left: 6px solid #558ABB;
23+
color: #4D4E53;
24+
width: 90%;
25+
max-width: 700px;
26+
padding: 10px 10px 0px;
27+
font-size: 90%;
28+
}
29+
30+
textarea:nth-of-type(1) {
31+
height: 80px
32+
}
33+
34+
textarea:nth-of-type(2) {
35+
height: 160px
36+
}
37+
38+
.playable-buttons {
39+
text-align: right;
40+
width: 90%;
41+
max-width: 700px;
42+
padding: 5px 10px 5px 26px;
43+
font-size: 100%;
44+
}
45+
46+
section {
47+
width: 90%;
48+
max-width: 700px;
49+
border: 1px solid #4D4E53;
50+
border-radius: 2px;
51+
padding: 10px 14px 10px 10px;
52+
margin-bottom: 10px;
53+
}
54+
55+
section input {
56+
display: block;
57+
margin: 5px;
58+
}
59+
60+
.box {
61+
width: 500px;
62+
border: 2px dotted rgb(96, 139, 168);
63+
}
64+
65+
.box>* {
66+
border: 2px solid rgb(96, 139, 168);
67+
border-radius: 5px;
68+
background-color: rgba(96, 139, 168, .2);
69+
padding: 10px;
70+
margin: 0;
71+
}
72+
</style>
73+
<style class="editable">
74+
.box {
75+
display: flex;
76+
}
77+
</style>
78+
</head>
79+
80+
<body>
81+
<section>
82+
<div class="box">
83+
<h2>One</h2>
84+
<div>Two</div>
85+
Three is an unwrapped string
86+
</div>
87+
88+
</section>
89+
<textarea class="playable-css">
90+
.box {
91+
display: flex;
92+
}
93+
</textarea>
94+
<textarea id="code" class="playable-html">
95+
<div class="box">
96+
<h2>One</h2>
97+
<div>Two</div>
98+
Three is an unwrapped string
99+
</div>
100+
</textarea>
101+
<div class="playable-buttons">
102+
<input id="reset" type="button" value="Reset">
103+
</div>
104+
</body>
105+
<script>
106+
var section = document.querySelector('section');
107+
var editable = document.querySelector('.editable');
108+
var textareaHTML = document.querySelector('.playable-html');
109+
var textareaCSS = document.querySelector('.playable-css');
110+
var reset = document.getElementById('reset');
111+
var htmlCode = textareaHTML.value;
112+
var cssCode = textareaCSS.value;
113+
114+
function fillCode() {
115+
editable.innerHTML = textareaCSS.value;
116+
section.innerHTML = textareaHTML.value;
117+
}
118+
119+
reset.addEventListener('click', function () {
120+
textareaHTML.value = htmlCode;
121+
textareaCSS.value = cssCode;
122+
fillCode();
123+
});
124+
125+
textareaHTML.addEventListener('input', fillCode);
126+
textareaCSS.addEventListener('input', fillCode);
127+
window.addEventListener('load', fillCode);
128+
</script>
129+
130+
</html>

0 commit comments

Comments
 (0)