Modernize project and fix images

gSchool · Apr 5, 2023 · 9657d41 · 9657d41
1 parent 9ee4cf4
commit 9657d41
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 7 deletions.
diff --git a/images/basic.png b/images/basic.png
diff --git a/images/gradient.png b/images/gradient.png
diff --git a/images/random.png b/images/random.png
diff --git a/index.html b/index.html
@@ -3,6 +3,12 @@
   <head>
     <title>Checkerboard</title>
     <script defer src="script.js"></script>
+    <style>
+      html,
+      body {
+        height: 100%;
+      }
+    </style>
   </head>
   <body></body>
 </html>
diff --git a/readme.md b/readme.md
@@ -6,18 +6,22 @@ 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**
 
 You are not allowed to edit the html file, which means that you must create all the tiles dynamically.  Same goes for CSS: no CSS in the html file or in a separate stylesheet. You must set all the style properties using Javascript.
 
 **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