zev/color_blocks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
zevav
2017-09-05 17:50:08 -04:00
commit 38994fc540
8 changed files with 125 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.100_blocks.css.swp Normal file
View File

Binary file not shown.

BIN
.100_blocks.html.swp Normal file
View File

Binary file not shown.

BIN
.100_blocks.js.swp Normal file
View File

Binary file not shown.

BIN
.README.md.swp Normal file
View File

Binary file not shown.

47
100_blocks.css Normal file
View File

@@ -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;
}

17
100_blocks.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="100_blocks.css"/>
</head>
<body>
<div id="palettes"></div>
<div id="current-palette"></div>
<div id="gridcontainer"></div>
<script type="text/javascript" src="100_blocks.js"></script>
</body>
</html>

58
100_blocks.js Normal file
View File

@@ -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;
}

3
README.md Normal file
View File

@@ -0,0 +1,3 @@
# 100 Blocks A Day
Inspired by this [Tim Urban post](https://waitbutwhy.com/2016/10/100-blocks-day.html).