diff --git a/images/basic.png b/images/basic.png new file mode 100644 index 00000000..8d33d528 Binary files /dev/null and b/images/basic.png differ diff --git a/images/gradient.png b/images/gradient.png new file mode 100644 index 00000000..f293ae21 Binary files /dev/null and b/images/gradient.png differ diff --git a/images/random.png b/images/random.png new file mode 100644 index 00000000..5ce2fe68 Binary files /dev/null and b/images/random.png differ diff --git a/index.html b/index.html index 7e8a1d00..3ed1f6df 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,12 @@ Checkerboard + diff --git a/readme.md b/readme.md index 0894ae67..40fff875 100644 --- a/readme.md +++ b/readme.md @@ -6,7 +6,7 @@ As always, fork and clone this repo. Submit the link to your fork when you're d On the master branch, write code to generate a checkerboard pattern as seen below: -![Screen Shot 2015-05-12 at 9.28.07 PM.png](https://draftin.com:443/images/29112?token=H321vjS2Gw41xPTjzAyQEaanRGjm6cAAskSoQgbnGA3El3ojEIP8BRWE8sjyUGBBkd7o1MKNRCpIzYc32qvwsyQ) +![Basic Checkerboard](images/basic.png) **The Rules** @@ -14,10 +14,14 @@ You are not allowed to edit the html file, which means that you must create all **Hints** -* Each tile should be a `div` -* Each tile's width is `11.1%` -* Set each tile's `float` property to `left` -* Each tile's paddingBottom is `11.1%` +* Create a container for your tiles with the following styles: + * `display = "flex"`; + * `flexWrap = "wrap"`; + * `width = "800px"`; + * `height = "800px"`; +* Each tile should have the following styles: + * `width = "12.5%'` + * `height = "12.5%'` **JUST TO REITERATE, YOU WILL NOT WRITE ANY HTML OR CSS FOR THIS EXERCISE. ONLY JS!!!** @@ -27,13 +31,13 @@ On a new branch called `randomcolors`, implement the following changes: 1. Instead of being either red or black, each tile should be a random color. How do you generate random colors? You can use RGB or Hexadecimal as your color system. -![Screen Shot 2015-05-12 at 10.19.59 PM.png](https://draftin.com:443/images/29115?token=g0Da9o1sdpfxhhNjHJVQ2578h9pJatEhrE_4ysca-j-FXB3EX58CGJmXZT0087rlBo22A_MgqflTfIxhMsUfuV8) +![Random Checkerboard](images/random.png) ### Gradient On a new branch called `gradient`, write code to color the tiles using some sort of gradient. It does not need to look exactly like the image below, but it should have some sort of increasing/decreasing color values. -![Screen Shot 2015-05-12 at 10.17.24 PM.png](https://draftin.com:443/images/29114?token=rfd8xRPfnvVY9rkIhhzxIl8b3vWWgz6_sprT3mzf2K2uvZ39L9w6pHD4JlE8BxU6vmkDCTmxzm0kw7m2gbSNhBw) +![Gradient Checkerboard](images/gradient.png) ### Flashing Colors