Skip to content

Commit 5802985

Browse files
rachelandrewrachelandrew
committed
Adding in tidied up editable parts
1 parent 842d72f commit 5802985

File tree

9 files changed

+379
-66
lines changed

9 files changed

+379
-66
lines changed

‎css-cookbook/center.html‎

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,66 @@
88
<title>CSS Cookbook: center an element</title>
99

1010
<link rel="stylesheet" href="styles.css">
11-
1211
<style>
1312
.container {
14-
height: 200px;
15-
display: flex;
16-
align-items: center;
17-
justify-content: center;
1813
border: 2px solid rgb(75, 70, 74);
1914
border-radius: .5em;
2015
}
2116

2217
.item {
23-
width: 10em;
2418
border: 2px solid rgb(95, 97, 110);
2519
border-radius: .5em;
2620
padding: 20px;
2721
}
2822
</style>
2923

24+
<style class="editable">
25+
.container {
26+
height: 200px;
27+
display: flex;
28+
align-items: center;
29+
justify-content: center;
30+
}
31+
32+
.item {
33+
width: 10em;
34+
}
35+
</style>
36+
3037
</head>
3138

3239
<body>
33-
<div class="container">
34-
<div class="item">I am centered!</div>
40+
<section class="preview">
41+
<div class="container">
42+
<div class="item">I am centered!</div>
43+
</div>
44+
</section>
45+
46+
<textarea class="playable playable-css">
47+
.container {
48+
height: 200px;
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
}
53+
54+
.item {
55+
width: 10em;
56+
}
57+
</textarea>
58+
59+
<textarea class="playable playable-html">
60+
<div class="container">
61+
<div class="item">I am centered!</div>
62+
</div>
63+
</textarea>
64+
65+
66+
<div class="playable-buttons">
67+
<input id="reset" type="button" value="Reset">
3568
</div>
3669
</body>
70+
<script src="playable.js"></script>
71+
3772

3873
</html>

‎css-cookbook/columns-flexbox-wrapping.html‎

Lines changed: 55 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,77 @@
1515
border-radius: .5em;
1616
padding: 20px 10px;
1717
width: 500px;
18+
}
19+
20+
.container>* {
21+
padding: 10px;
22+
border: 2px solid rgb(95, 97, 110);
23+
border-radius: .5em;
24+
}
25+
</style>
26+
27+
<style class="editable">
28+
.container {
1829
display: flex;
1930
flex-wrap: wrap;
2031
}
2132

2233
.container>* {
2334
margin: 0 10px;
2435
flex: 1 1 200px;
25-
padding: 10px;
26-
border: 2px solid rgb(95, 97, 110);
27-
border-radius: .5em;
2836
}
2937
</style>
3038

3139
</head>
3240

3341
<body>
34-
<div class="container">
35-
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
36-
melon azuki bean garlic.</p>
42+
<section class="preview">
43+
<div class="container">
44+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
45+
melon azuki bean garlic.</p>
46+
47+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
48+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
49+
50+
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed
51+
pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter
52+
purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
53+
</div>
54+
</section>
3755

38-
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
39-
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
56+
<textarea class="playable playable-css">
57+
.container {
58+
display: flex;
59+
flex-wrap: wrap;
60+
}
61+
62+
.container>* {
63+
margin: 0 10px;
64+
flex: 1 1 200px;
65+
}
66+
</textarea>
67+
68+
<textarea class="playable playable-html">
69+
<div class="container">
70+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
71+
melon azuki bean garlic.</p>
72+
73+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
74+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
75+
76+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
77+
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
78+
carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin
79+
onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot
80+
carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
81+
82+
</div>
83+
</textarea>
4084

41-
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea
42-
prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane
43-
fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
85+
<div class="playable-buttons">
86+
<input id="reset" type="button" value="Reset">
4487
</div>
4588
</body>
89+
<script src="playable.js"></script>
4690

4791
</html>

‎css-cookbook/columns-flexbox.html‎

Lines changed: 60 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,38 +14,80 @@
1414
border: 2px solid rgb(75, 70, 74);
1515
border-radius: .5em;
1616
padding: 20px 10px;
17-
display: flex;
1817
}
1918

2019
.container>* {
21-
margin: 0 10px;
2220
padding: 10px;
2321
border: 2px solid rgb(95, 97, 110);
2422
border-radius: .5em;
23+
}
24+
</style>
25+
26+
<style class="editable">
27+
.container {
28+
display: flex;
29+
}
30+
31+
.container>* {
32+
margin: 0 10px;
2533
flex: 1;
2634
}
2735
</style>
2836

2937
</head>
3038

3139
<body>
32-
<div class="container">
33-
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
34-
melon azuki bean garlic.</p>
35-
36-
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
37-
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
38-
39-
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
40-
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
41-
carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin
42-
onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot
43-
carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
44-
45-
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea
46-
prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane
47-
fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
40+
<section class="preview">
41+
<div class="container">
42+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
43+
melon azuki bean garlic.</p>
44+
45+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
46+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
47+
48+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
49+
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
50+
carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin
51+
onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi
52+
beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper
53+
artichoke.
54+
</p>
55+
56+
</div>
57+
</section>
58+
59+
<textarea class="playable playable-css">
60+
.container {
61+
display: flex;
62+
}
63+
64+
.container>* {
65+
margin: 0 10px;
66+
flex: 1;
67+
}
68+
</textarea>
69+
70+
<textarea class="playable playable-html">
71+
<div class="container">
72+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
73+
melon azuki bean garlic.</p>
74+
75+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
76+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
77+
78+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
79+
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
80+
carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin
81+
onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot
82+
carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
83+
84+
</div>
85+
</textarea>
86+
87+
<div class="playable-buttons">
88+
<input id="reset" type="button" value="Reset">
4889
</div>
4990
</body>
91+
<script src="playable.js"></script>
5092

5193
</html>

‎css-cookbook/columns-multicol.html‎

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@
1414
border: 2px solid rgb(75, 70, 74);
1515
border-radius: .5em;
1616
padding: 20px;
17+
}
18+
</style>
19+
20+
<style class="editable">
21+
.container {
1722
column-width: 10em;
1823
column-rule: 1px solid rgb(75, 70, 74);
1924
}
@@ -22,23 +27,53 @@
2227
</head>
2328

2429
<body>
25-
<div class="container">
26-
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
30+
<section class="preview">
31+
<div class="container">
32+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
33+
melon azuki bean garlic.</p>
34+
35+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
36+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
37+
38+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
39+
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
40+
carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin
41+
onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi
42+
beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper
43+
artichoke.
44+
</p>
45+
46+
</div>
47+
</section>
48+
49+
<textarea class="playable playable-css">
50+
.container {
51+
column-width: 10em;
52+
column-rule: 1px solid rgb(75, 70, 74);
53+
}
54+
</textarea>
55+
56+
<textarea class="playable playable-html">
57+
<div class="container">
58+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
2759
melon azuki bean garlic.</p>
2860

29-
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
61+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
3062
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
3163

32-
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
64+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
3365
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
3466
carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin
3567
onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot
3668
carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
3769

38-
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea
39-
prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane
40-
fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
70+
</div>
71+
</textarea>
72+
73+
<div class="playable-buttons">
74+
<input id="reset" type="button" value="Reset">
4175
</div>
4276
</body>
77+
<script src="playable.js"></script>
4378

4479
</html>

‎css-cookbook/playable.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
var section = document.querySelector('section');
2+
var editable = document.querySelector('.editable');
3+
var textareaHTML = document.querySelector('.playable-html');
4+
var textareaCSS = document.querySelector('.playable-css');
5+
var reset = document.getElementById('reset');
6+
var htmlCode = textareaHTML.value;
7+
var cssCode = textareaCSS.value;
8+
9+
function fillCode() {
10+
editable.innerHTML = textareaCSS.value;
11+
section.innerHTML = textareaHTML.value;
12+
}
13+
14+
reset.addEventListener('click', function () {
15+
textareaHTML.value = htmlCode;
16+
textareaCSS.value = cssCode;
17+
fillCode();
18+
});
19+
20+
textareaHTML.addEventListener('input', fillCode);
21+
textareaCSS.addEventListener('input', fillCode);
22+
window.addEventListener('load', fillCode);

0 commit comments

Comments
 (0)