gSchool · XJoshuaRichmondX · Sep 6, 2022
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>pixArt</title>
+        <link rel="stylesheet" type="text/css" href="stylesheet.css">
+
+    </head>
+    <body>
+
+        <div id="container"></div>
+        <div id="colorButtons">
+        <div id="redButton" class="button">Red</div>
+        <div id="yellowButton" class="button">Yellow</div>
+        <div id="blueButton" class="button">Blue</div>
+        <div id="greenButton" class="button">Green</div>
+        <div id="purpleButton" class="button">Purple</div>
+
+        <script type="text/javascript" src="index.js"></script>
+
+    </div>
+    </body>
+<html>
diff --git a/index.js b/index.js
@@ -0,0 +1,68 @@
+function pixArt() {
+    var pixel = document.getElementById('container');
+    var rows = document.getElementsByClassName('rows');
+    var columns = document.getElementsByClassName('columns');
+    var colorButtons = document.getElementById('colorButtons')
+    var currentColor = "";
+
+
+
+    function makeRows(rowNum){
+        for (let i = 0; i < rowNum; i++) {
+            let rowDiv = document.createElement('div');
+            rowDiv.style.backgroundColor = 'white';
+
+            rowDiv.addEventListener("click",function(){
+                rowDiv.style.backgroundColor = currentColor});
+
+            rowDiv.addEventListener("mousedown",function(){
+                rowDiv.style.backgroundColor = currentColor
+            })
+            rowDiv.addEventListener("mouseenter",function(){
+                rowDiv.style.backgroundColor = currentColor
+            })
+            rowDiv.addEventListener("mouseup",function(){
+                rowDiv.style.backgroundColor = ""
+            })
+
+            pixel.appendChild(rowDiv).className = 'rows';
+
+        }
+    }
+
+
+function buttonChange(){
+ var redHolder = document.getElementById("redButton")
+ var yellowHolder = document.getElementById("yellowButton")
+ var blueHolder = document.getElementById("blueButton")
+ var greenHolder = document.getElementById("greenButton")
+ var purpleHolder = document.getElementById("purpleButton")
+
+
+ redHolder.addEventListener("click", function() {
+    currentColor = "red"
+ })
+ yellowHolder.addEventListener("click", function() {
+    currentColor = "yellow"
+ })
+ blueHolder.addEventListener("click", function() {
+    currentColor = "blue"
+ })
+ greenHolder.addEventListener("click", function() {
+    currentColor = "green"
+ })
+ purpleHolder.addEventListener("click", function() {
+    currentColor = "purple"
+ })
+
+}
+
+buttonChange();
+makeRows(144);
+}
+
+pixArt();
+
+//make buttons the colors that they represent
+//select an individual DIV 
+// create event listeners for on clicks on those DIV
diff --git a/stylesheet.css b/stylesheet.css
@@ -0,0 +1,8 @@
+ .rows {
+    border-style: 5px solid black;
+    height: 50px;
+    width: 50px;
+    display: inline-block; 
+    outline: 5px solid black;
+    outline-offset: -5px;
+ }