gSchool · just-hey · Sep 23, 2017 · Sep 23, 2017 · Mar 18, 2018 · Mar 18, 2018
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+just-hey-pixels.surge.sh
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # Pixel Art Maker
 
+[deployed](just-hey-pixels.surge.sh)
+
 In this exercise, you'll create your own pixel art maker which will allow a user to choose colors from a palette and then paint pixel art. The interface is completely up to you, but it could look something like this.
 
 ![Example of Pixel Art Maker](pixel-art-maker-alt.png)
@@ -41,7 +43,7 @@ Research [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Storage
 
 ### Bonus 4
 
-Create a fill tool that will [flood fill](https://en.wikipedia.org/wiki/Flood_fill) boundaries with a chosen paint color. 
+Create a fill tool that will [flood fill](https://en.wikipedia.org/wiki/Flood_fill) boundaries with a chosen paint color.
 
 
 ### Deployment

diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Pixel Art</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script/main.js" charset="utf-8"></script>
+  </head>
+  <body>
+    <div id="bigDiv">
+    </div>
+    <div id="colors">
+    </div>
+  </body>
+</html>
diff --git a/script/main.js b/script/main.js
@@ -0,0 +1,49 @@
+var holdingColor = ''
+
+document.addEventListener('DOMContentLoaded', function () {
+console.log("working");
+
+var grid = ''
+
+//altering css? this also needs to be changed
+for (var i = 0; i < 20; i++) {
+  for (var j = 0; j < 20; j++) {
+    grid += '<div class="cell" id="cell' + [j] + 'by' + [i] + '">'
+    grid += '</div>'
+  }
+}
+document.getElementById('bigDiv').innerHTML = grid
+
+var chart = ''
+
+var colorArr = ['#4286f4', '#58259e', '#c409bb', '#db0f19','#fafafa', '#000', '#e87a30', '#ffe100', '#96d811', '#048e14', '#08e0c7']
+
+for (var i = 0; i < colorArr.length; i++) {
+  chart += '<div class="circle" ' + [i] + '">'
+  chart += '</div>'
+}
+document.getElementById('colors').innerHTML = chart
+
+for (var i = 0; i < colorArr.length; i++) {
+  document.getElementsByClassName('circle')[i].style.backgroundColor = colorArr[i]
+}
+
+var allCircles = document.getElementsByClassName('circle')
+
+for (var i = 0; i < allCircles.length; i++) {
+  allCircles[i].addEventListener('click', function () {
+    holdingColor = this.style.backgroundColor
+  })
+}
+
+//write nested for loops again? need to getElementById of "cell[j]by[i]"
+var cellArray = document.getElementsByClassName('cell')
+
+for (var i = 0; i < cellArray.length; i++) {
+  cellArray[i].addEventListener('click', function () {
+    this.style.backgroundColor = holdingColor
+    this.style.outline = 'none'
+  })
+}
+
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,29 @@
+body {
+  width: 100%;
+}
+#bigDiv {
+  /*if changing width also alter javascript for loop width*/
+  width: 640px;
+  margin: 0 auto;
+}
+.cell {
+  margin-bottom: -4px;
+  display: inline-block;
+  height: 2rem;
+  width: 2rem;
+  outline: 1px solid black;
+}
+
+#colors {
+  width: 700px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.circle {
+  border-radius: 50%;
+  display: inline-block;
+  height: 3rem;
+  width: 3rem;
+  border: 1px solid black;
+}