As always, fork and clone this repo. Submit the link to your fork when you're done.
On the master branch, write code to generate a checkboard pattern as seen below:
The Rules
Your index.html must look like this:
<!DOCTYPE html>
<html>
<head>
<title>Checkerboard</title>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
You are not allowed to add any other elements to 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
floatproperty toleft - Each tile's paddingBottom is
11.1%
JUST TO REITERATE, YOU WILL NOT WRITE ANY HTML OR CSS FOR THIS EXERCISE. ONLY JS!!!
On a new branch called randomcolors, implement the following changes:
- 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.
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.
On a new branch called flashing, write code to change each tile's color to a new random color every 2 seconds.
Get some audio playing to accompany your trippy visuals, using only JS. No editing the HTML!