Skip to content
HTML and CSS for a Taxi Kata involving Robots (the traffic kind)
JavaScript CSS HTML
Branch: gh-pages
Clone or download
Pull request Compare This branch is 44 commits ahead, 1 commit behind SteveBarnett:gh-pages.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_includes
_layouts
css
img
instructions
js
.gitignore
CNAME
LICENSE
README.md
_config.yml
app.js
app_tests.js
favicon.ico
index.md
saf.md
support.js
taxi.html
tests.html

README.md

layout
default

Cape Town Red

HTML and CSS for a Taxi Kata involving Robots (the traffic kind)

How it works

Everything lives inside a div.road: you don't need to change this.

Robots

The first robot looks like this:

{% highlight html%}

{% endhighlight %}

You can change light-go (green) to lights-slowdown (orange) or lights-stop (red).

Other robots need a position:

{% highlight html%}

...
{% endhighlight %}

The position class comes in three flavours: four slots, six slots, or nine slots. Positions are calculated as a percentage of the full width. Specify positions using a x-of-y pattern, for example: one-of-four, two-of-six, three-of-nine.

Taxi(s)

A taxi looks like this, and always needs a position:

{% highlight html%}

{% endhighlight %}

The position class comes in three flavours: four slots, six slots, or nine slots. Positions are calculated as a percentage of the full width. Specify positions using a slot-x-of-y pattern, for example: slot-one-of-four, slot-two-of-six, slot-three-of-nine.

Use the same number of slots for taxis and robots or things will look weird.

You can’t perform that action at this time.