diff --git a/index.html b/index.html
index e69de29b..52e92715 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+ Pixel Maker
+
+
+ Noah and Marc's Pixel Emporium
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pixel.css b/pixel.css
new file mode 100644
index 00000000..1737c7aa
--- /dev/null
+++ b/pixel.css
@@ -0,0 +1,36 @@
+#box {
+ margin: auto;
+ background-color: gray;
+ width: 1000px;
+ height: 1000px;
+ border: 1px solid black;
+
+}
+
+.pixels {
+ background-color: white;
+ width: 23px;
+ height: 23px;
+ border: 1px solid grey;
+ float: left;
+
+}
+
+
+
+#colorPalette {
+ margin: auto;
+ border: 3px solid black;
+ padding: 20px;
+ width: 100vw;
+ height: 5vw;
+
+
+
+}
+
+
+
+
+
+
diff --git a/pixel.js b/pixel.js
new file mode 100644
index 00000000..5f168deb
--- /dev/null
+++ b/pixel.js
@@ -0,0 +1,59 @@
+pixelFunc()
+var color = "red"
+
+function pixelFunc() {
+let box = document.getElementById('box')
+ for (let i = 0; i < 1600; i++) {
+ let pixel = document.createElement('div');
+ box.appendChild(pixel)
+ pixel.classList.add("pixels");
+}
+var colorPalette = document.getElementById('colorPalette')
+var palette = colorPalette.childNodes
+
+
+var item1 = palette.item(1)
+var colorPicker = document.getElementById('colorPicker')
+colorPicker.addEventListener("input", watchColorPicker);
+colorPicker.addEventListener("change", watchColorPicker);
+function watchColorPicker(event) {
+
+ color = event.target.value;
+ };
+}
+
+
+let pixels = document.getElementsByClassName('pixels');
+console.log(pixels);
+
+
+
+for ( let i = 0; i < pixels.length; i++) {
+ pixels[i].addEventListener("mousedown", function(e) {
+ pixels[i].style.backgroundColor = color
+
+ });
+
+}
+// for ( let i = 0; i < pixels.length; i++) {
+
+
+
+// pixels[i].addEventListener("mouseenter", function(e) {
+// pixels[i].style.backgroundColor = color
+
+// });
+
+// }
+
+//on mouse down, loop starts, on mouseenter loop continues, on mouseup, loop stops
+
+
+
+
+
+
+
+
+
+