CoderDojo NYC

Sustainable Simpsons

Description of Station

The popular American Simpsons family is currently facing a little bit of a problem...they aren't recycling and their waste is being put in the Hudson River.

We'll be utilizing the following technologies to help them become a more sustainable/eco-friendly family.

HTML* - For basic page scaffolding/structuring*

CSS* - Everything seen at the start of this project is a pure CSS lego block [Simpsons, waste, river]*

Javascript/jQuery* - Animating the legos/blocks of waste in to the river.*

Goal

The goal of this project is very loosely defined. Ideally the student or group is as creative as possible with ideas as to how to make the Simpsons family more eco-friendly. Technologically at the end of this project the student should demonstrate a strong understanding of how each of the 3 major technologies are utilized on this HTML page and the specific purpose each technology serves.

**Steps **(include approx time per step)

*** NOTE: each of these sections of steps can be done individually and in no particular order ***

Group 1:

** students will notice from the get go, something is wrong! Lisa is missing! *(5min)

• 1. Find and verify that the css class for lisa is available in the css section.*
• 2. Create a new div element in between Bart & Maggie.*
• 3. Add the class names "lisa" and "lego" to the newly created div element.*

Group 2:

** Change the background of the canvas *(5min)

• 1. Add a body css identifier body { /* code-goes-here }*
• 2. Within that newly created identifier add the following lines*

•  Background-image:       url("http://vignette3.wikia.nocookie.net/simpsons/images/c/ca/742_Evergreen_Terrace.png/revision/latest");*
  

• background-size:cover;*

• background-position: center;*

Group 3:

** Use IMG's - Change CSS Simpsons out for imgs *(5min)

• 1. Locate each family members div with the class "lego" and “”*
• 2. Place an img tag in the middle of this div*
• 3. Add a src corresponding with the correct name to this img element*

Homer - https://static.simpsonswiki.com/images/thumb/1/1b/Homer_slipping.png/180px-Homer_slipping.png

Marge - https://upload.wikimedia.org/wikipedia/en/0/0b/Marge_Simpson.png

Bart - https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png

Maggie - https://upload.wikimedia.org/wikipedia/en/9/9d/Maggie_Simpson.png

*Lisa - **https://upload.wikimedia.org/wikipedia/en/e/ec/Lisa_Simpson.pn*g

** * or you may find your own images and link the src***

• 4. If you’d like the adjust the size of these images, utilize the width attribute on the img element. (i.e. width="175)*

Group 4

• • Adjust HTML - Sort the trash into different HTML elements*
• 1. Locate the section where all the trash elements are currently in HTML*
• 2. Sort the names of the waste elements. Potential types could include: *

• Plastic

• Paper

• Glass

• Fish

• Trash

• Metal

• Organic

• Electronic Waste

• 3. Change the name of each piece of trash to the waste element by locating the span element in each containing div element*
• 4. Add an inline style or create a new CSS class for each waste element by adding a background-color attribute*

Group 5

• • Use Data-attrs to manipulate JS loop of trash - Sort the trash to the newly created sorting centers*

1. *Locate where the HTML element is for the Hudson River. *

2. *Add similar div elements for the number of recycling centers you’d like. Potential types could include: *

• Compost Bin

• Recycle Bin

• Landfill

• 3. Add a unique id or class to each trash div element*
  

• 4. Add a control statement in the javascript, if or switch, mutating the directions object, adding various directions ex: directions["left"] = 200 to where your sorting centers are located*
  

Notes

If the student can or cannot extrapolate on where and how the 3 major technologies are utilize on the page, it should be obvious based on their answer where they can extrapolate on their current project.

** positioning of elements aren't right? - adjust the HTML*

** Trash is all the same color? - students need to dive deeper in to CSS/inline-styles*

** Recycling is going to the same place? - think about a sorting center manipulating the javascript trash for loop*

Reflection of station

As an organizer of this station, I can tell you when I was briefing the mentors/teachers ahead of time there was quite a few looks of uncertainty. With that said, the ingredients of this station created one of the best learning environments I've seen @ a game jam once the students got their hands on the project. It has...

** a starting place (a template)*

** powerful technologies (HTML, CSS, Javascript, jQuery)*

** no boundaries (right or wrong answer)*

this coupled with the use of side-by-side live editor like Mozilla Thimble saw the students immediately want to start typing to effect change.