Business, Economics, Accounting and Finance
Ming's Backyard: A teaching material for Girls Who Code Club, Millbrae (Dec. 7)
A backyard made with loads of CSS.
โ€‹Ming's Backyardโ€‹
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.

Welcome to my backyard!

It's a bit basic for now...
1
<sky>
2
</sky>
3
<ground>
4
</ground>
Copied!

Big things I have in my backyard

I have a barn, a garden, and a picnic table in my backyard. They are placed on the ground, rather than in the sky:
1
<sky>
2
</sky>
3
<ground>
4
โ€‹
5
<barn>
6
</barn>
7
โ€‹
8
<garden>
9
</garden>
10
โ€‹
11
<picnic-table>
12
</picnic-table>
13
โ€‹
14
</ground>
Copied!

Some touch-ups

There's a fence in my garden, and there's grass growing on the ground:
1
<sky>
2
</sky>
3
<ground>
4
โ€‹
5
<barn>
6
</barn>
7
โ€‹
8
<garden>
9
<fence></fence> <!-- -->
10
</garden>
11
โ€‹
12
<picnic-table>
13
</picnic-table>
14
โ€‹
15
<grass></grass> <!-- -->
16
โ€‹
17
</ground>
Copied!

Add more things

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
Put in a less exciting format: here.
I only named 3 of them!
A recap:
$1+1+1=3$

Do I have space to put them?

Find some place where I can put these things!
  • In the sky?
  • On the table?
  • On the ground?
  • In the barn?
  • In the garden?

Where should I put each type of things?

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" };

Notice that you can have repeating values on the right side of the colons, but not on the left side!

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".

Now let's actually put the things to where they belong!

1
// For each thing in `things`... oh wait, instead of "thing", let's call each "thing" "info" (for "information").
2
things.forEach(info => {
3
โ€‹
4
// `info` has a `type` attribute that is something like "food", "toy", ...
5
// "Let type be info's type."
6
let type = info.type;
7
โ€‹
8
// Consult our `map` about which location I should put this type of things to.
9
// "Let location be whatever map points this type to."
10
let location = map[type];
11
โ€‹
12
// Use a tool called "jQuery" (What else tech stuff is capitalized on the second letter?) to locate the container inside that location.
13
// "Let space be the container element at that location."
14
let space = $(location + " > container");
15
โ€‹
16
// Create an image element.
17
// "Let thing be a new image element created on the HTML document's root."
18
let thing = document.createElement("img");
19
// Tell the image element to load this particular image.
20
thing.src = info.image;
21
// Tell the image element to draw ("render") the image at this particular width given.
22
thing.width = info.size;
23
// Actually put this element there.
24
space.append(thing);
25
});
Copied!

Quiet!

There's too much going on in my backyard :weary:
I want to remove everything that makes a noise!
2 questions:
  1. 1.
    What makes noise? wizard, cloud, airplane, food, toy, pet, bike, horse, tree. Let's call them noisyTypes:
    1
    let noisyTypes = ['', '', ''];
    Copied!
  2. 2.
    How to make them disappear? There's many ways to do that:
    1. 1.
      Remove these things from the things list.
    2. 2.
      Before adding them to my backyard (things.forEach(info => {), filter out things whose type is in noisyTypes.
      1
      let quietThings = things.filter(info => {return noisyTypes.contains(info.type);});
      Copied!
      Let's see if the result makes sense:
      1
      console.log(quietThings);
      Copied!
      (Alternatively, we can do: quietThings.map(info => {return info.type;}).join(', ').)

Line up by height!

Small->large:
1
let sortedThings = things.sort((a,b)=>{return a.size-b.size;});
Copied!
Large->small:
1
b.size-a.size
Copied!