Creative Computing

Index of /

Week 5


This Week

Using Logic

else if

In plain english, we often say things like this:

if this thing happens, do something. Otherwise if this other thing happens, do something else. If all else fails, go to the backup plan.

Using JavaScript syntax, that same statement might look like this:

if ( this == true ) { 
    do something 

else if ( this other thing == true ) { 
    do something 

else { 
    backup plan! 

Finding Patterns

The next set of assignments will be based around a single unit repeated to create a 4×4 grid of squares. There are several ways to create a grid. We can create a grid by stacking units one by one, left to right, until that grid is full.

Or we can create a grid by composing 4 rows of 4 columns each.

When we build our grids using rows and columns, we create a set of axes we can reference to define more specific coordinates. We use such coordinate systems when we play Chess or Battle Ship.


In addition to specifying the axis (i.e., row or column), we can use math and look for patterns to target groups of coordinates. For example: if row is equal to column.

if ( row == column ) { 
    // do something

Or maybe we'd like to look for squares evenly divisible by 2 when we add row + column.

if ( (row + column) % 2 == 0 ) { 
    // do something

Using subtraction, we could target squares less than -1 or greater than 1:

if ( (row - column) > 1 || (row - column) < -1 ) { 
    // do something

What else?



  1. Read & Review. Read the content above about logic & patterns.
  1. Repeatable unit: Design a program that creates a pattern you find interesting and beautiful. Use this template to get started. We will approach this project in steps, the first of which is to get your CSS and pattern states established:


    Your unit should exist in 3 forms:

    • A default state (.square + your initials i.e., .th if your name is Tiff Hockin) that is unique to your pattern.
    • At least two additional visual states, created using conditional statements and CSS classes.


    • Does your pattern have a theme?
    • What is the system behind your pattern? Is your logic clear to the uninitiated?
    • Is it exciting?


You can find the answer to almost any question here!

JavaScript ⟵ Comparison & Logical Operators ⟵ So easy, your cat can do it!

CSS Shapes
CSS Layout Basics ⟵ An interactive guide to some basic CSS principles
How to make a triangle with CSS

CSS Properties to Experiment With

box-shadow (and box-shadow generator!)

If you’re feeling ambitious …

Pseudo classes

Animate, Transition & Transform
CSS Animations
CSS Transform
CSS Transitions