Skip to content

Commit 9004729

Browse files
rachelandrewrachelandrew
committed
test example for Macro
1 parent 4ffce0c commit 9004729

1 file changed

Lines changed: 114 additions & 0 deletions

File tree

‎flexbox/basics/the-flex-container.html‎

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

0 commit comments

Comments
 (0)