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

<sky>
</sky>
<ground>
</ground>

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:

<sky>
</sky>
<ground>
โ€‹
<barn>
</barn>
โ€‹
<garden>
</garden>
โ€‹
<picnic-table>
</picnic-table>
โ€‹
</ground>

Some touch-ups

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>

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!

// 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);
});

Quiet!

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 things list.

    2. Before adding them to my backyard (things.forEach(info => {), filter out things whose type is in noisyTypes.

      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(', ').)

Line up by height!

Small->large:

let sortedThings = things.sort((a,b)=>{return a.size-b.size;});

Large->small:

b.size-a.size