Ming's Backyard: A teaching material for Girls Who Code Club, Millbrae (Dec. 7)
A backyard made with loads of CSS.
A backyard made with loads of CSS.
I don't actually have a backyard in real life.
:(
Disclaimer: I did not create most of the images that are used in this session. Although the images may be subject to copyright, since I am using and distributing the images for teaching, my usage of these images may qualify as a fair use. Do not use whatever images you find on the Internet -- you might infringe someone else's rights.
It's a bit basic for now...
<sky>
</sky>
<ground>
</ground>
I have a
barn, a garden, and a picnic table in my backyard. They are placed on the ground, rather than in the sky:<sky>
</sky>
<ground>
<barn>
</barn>
<garden>
</garden>
<picnic-table>
</picnic-table>
</ground>
There's a
fence in my garden, and there's grass growing on the ground:<sky>
</sky>
<ground>
<barn>
</barn>
<garden>
<fence></fence> <!-- -->
</garden>
<picnic-table>
</picnic-table>
<grass></grass> <!-- -->
</ground>
I have lots of interesting things I want to put in my backyard. They are:
Picture | Name | What is this? |
 | | wizard, cloud, airplane, food, toy, pet, bike, horse, tree |
 | Potter | wizard, cloud, airplane, food, toy, pet, bike, horse, tree |
 | | wizard, cloud, airplane, food, toy, pet, bike, horse, tree |
 | | wizard, cloud, airplane, food, toy, pet, bike, horse, tree |
 | Jose | wizard, cloud, airplane, food, toy, pet, bike, horse, tree |
 | | wizard, cloud, airplane, food, toy, pet, bike, horse, tree |
 | | wizard, cloud, airplane, food, toy, pet, bike, horse, tree |
 | Sausage | wizard, cloud, airplane, food, toy, pet, bike, horse, tree |
 | | wizard, cloud, airplane, food, toy, pet, bike, horse, tree |
 | | wizard, cloud, airplane, food, toy, pet, bike, horse, tree |
 | | wizard, cloud, airplane, food, toy, pet, bike, horse, tree |
 | | wizard, cloud, airplane, food, toy, pet, bike, horse, tree |
I only named 3 of them!
A recap:$1+1+1=3$
Find some place where I can put these things!
- In the sky?
- On the table?
- On the ground?
- In the barn?
- In the garden?
Complete the association!
Type | Where to put this type of things? |
🧙 wizard | sky, table, ground, barn, garden |
☁️ cloud | sky, table, ground, barn, garden |
✈️ airplane | sky, table, ground, barn, garden |
🍲 food | sky, table, ground, barn, garden |
🧸 toy | sky, table, ground, barn, garden |
🐕 pet | sky, table, ground, barn, garden |
🚲 bike | sky, table, ground, barn, garden |
🐎 horse | sky, table, ground, barn, garden |
🌳 tree | sky, table, ground, barn, garden |
CLICK ME let map = { wizard: "sky", cloud: "sky", airplane: "sky", food: "picnic-table", toy: "picnic-table", pet: "ground", bike: "ground", horse: "barn", tree: "garden" };
A dictionary may tell you:
Splendid" means "good".Marvelous" means "good".Devastating" means "bad".
However, it makes no for a dictionary to say:
Splendid" means "good".Splendid" means "good". (I know that already!)Devastating" means "bad".
Or, worse:
Splendid" means "good".Splendid" means "bad". (Which one???)Devastating" means "bad".
// For each thing in `things`... oh wait, instead of "thing", let's call each "thing" "info" (for "information").
things.forEach(info => {
// `info` has a `type` attribute that is something like "food", "toy", ...
// "Let type be info's type."
let type = info.type;
// Consult our `map` about which location I should put this type of things to.
// "Let location be whatever map points this type to."
let location = map[type];
// Use a tool called "jQuery" (What else tech stuff is capitalized on the second letter?) to locate the container inside that location.
// "Let space be the container element at that location."
let space = $(location + " > container");
// Create an image element.
// "Let thing be a new image element created on the HTML document's root."
let thing = document.createElement("img");
// Tell the image element to load this particular image.
thing.src = info.image;
// Tell the image element to draw ("render") the image at this particular width given.
thing.width = info.size;
// Actually put this element there.
space.append(thing);
});
There's too much going on in my backyard :weary:
I want to remove everything that makes a noise!
2 questions:
- 1.What makes noise? wizard, cloud, airplane, food, toy, pet, bike, horse, tree. Let's call them
noisyTypes:let noisyTypes = ['', '', '']; - 2.How to make them disappear? There's many ways to do that:
- 1.Remove these things from the
thingslist. - 2.Before adding them to my backyard (
things.forEach(info => {), filter out things whosetypeis innoisyTypes.let quietThings = things.filter(info => {return noisyTypes.contains(info.type);});Let's see if the result makes sense:console.log(quietThings);(Alternatively, we can do:quietThings.map(info => {return info.type;}).join(', ').)
Small->large:
let sortedThings = things.sort((a,b)=>{return a.size-b.size;});
Large->small:
b.size-a.size