commit 38994fc540edf141c990d5ea9ad411e2b4ea8810 Author: zevav Date: Tue Sep 5 17:50:08 2017 -0400 first diff --git a/.100_blocks.css.swp b/.100_blocks.css.swp new file mode 100644 index 0000000..06c2d90 Binary files /dev/null and b/.100_blocks.css.swp differ diff --git a/.100_blocks.html.swp b/.100_blocks.html.swp new file mode 100644 index 0000000..3eb414b Binary files /dev/null and b/.100_blocks.html.swp differ diff --git a/.100_blocks.js.swp b/.100_blocks.js.swp new file mode 100644 index 0000000..f5c076c Binary files /dev/null and b/.100_blocks.js.swp differ diff --git a/.README.md.swp b/.README.md.swp new file mode 100644 index 0000000..ebeafa8 Binary files /dev/null and b/.README.md.swp differ diff --git a/100_blocks.css b/100_blocks.css new file mode 100644 index 0000000..554fd84 --- /dev/null +++ b/100_blocks.css @@ -0,0 +1,47 @@ +div#gridcontainer +{ + width: 800px; + line-height: 0; +clear: both; +} + +div.griditem, div.palette +{ + display: inline-block; + width: 70px; + height: 70px; + margin-left: 4px; + margin-bottom: 8px; + background: #AAA; +} + +div.palette { + + border-radius: 50%; + margin-left: 20px; + margin-top: 30px; + border: 2px solid black; + +} + +div#current-palette { + + width: 90px; + height: 90px; + float: right; + margin: 20px 60px 30px; + border: 2px solid black; + +} + +body { + + background: #333; + +} + +#palettes { + +float: left; + +} diff --git a/100_blocks.html b/100_blocks.html new file mode 100644 index 0000000..e09d92b --- /dev/null +++ b/100_blocks.html @@ -0,0 +1,17 @@ + + + + + + + + +

+ + + + + + diff --git a/100_blocks.js b/100_blocks.js new file mode 100644 index 0000000..b8b46ec --- /dev/null +++ b/100_blocks.js @@ -0,0 +1,58 @@ +function changeColor(o){ + + o.style.backgroundColor = o.style.backgroundColor == paletteColor ? '#AAA' : paletteColor; + + } + + +function setPalette(o) { + + paletteColor = o.style.backgroundColor; + currentPaletteDiv.style.backgroundColor = paletteColor; + +} + + +window.onload = function () { + + paletteColors = ['red', 'blue', 'yellow', 'green']; + paletteColor = paletteColors[0]; + gridContainer = document.getElementById('gridcontainer'); + palettesDiv = document.getElementById('palettes'); + + for (i=0; i<100; i++) { + + box = document.createElement('div'); + box.className = 'griditem'; + + box.addEventListener('click', function () { + + changeColor(this); + + }); + + box.style.marginRight = '4px'; + gridContainer.appendChild(box); + + } + + for (colorIndex in paletteColors) { + + paletteElement = document.createElement('div'); + paletteElement.className = 'palette'; + paletteElement.style.backgroundColor = paletteColors[colorIndex]; + paletteElement.addEventListener('click', function () { + + setPalette(this); + +}); + + palettesDiv.appendChild(paletteElement); + +} + + currentPaletteDiv = document.getElementById('current-palette') + currentPaletteDiv.style.backgroundColor = paletteColor; + + +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..7f2b25f --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# 100 Blocks A Day + +Inspired by this [Tim Urban post](https://waitbutwhy.com/2016/10/100-blocks-day.html).