appearance improvements

agdillon · agdillon · commit ceeae2f035b8 · 2018-09-06T23:00:56.000-06:00
diff --git a/index.html b/index.html
@@ -3,14 +3,17 @@
   <head>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href = "styles.css">
+    <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
     <script src="script.js" type="text/javascript"></script>
     <title>Pixel Art Maker</title>
   </head>
   <body>
-    <div id="grid">
-    </div>
-
-    <div id="palette">
+    <h1>Pixel Art Maker</h1>
+    <div id="container">
+      <div id="grid">
+      </div>
+      <div id="palette">
+      </div>
     </div>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,10 +1,16 @@
 document.addEventListener("DOMContentLoaded", function () {
   let grid = document.getElementById("grid")
-  let gridSize = 24
-  let colorNames = ["red", "orange", "yellow", "green", "blue", "purple", "black", "white", "SaddleBrown"]
+  let container = document.getElementById("container")
+  let pixels = 24
+  let colorNames = ["red", "orange", "yellow", "green", "blue", "purple", "black", "white", "gray", "SaddleBrown"]
   let currentColor = ""
   let cell, row, col, colorCell, indicator
 
+  // pixels * width of each pixel (20px) + (pixels + 1) * border (1px) = total grid size
+  grid.style.width = (pixels * 21 + 1) + "px"
+  grid.style.height = (pixels * 21 + 1) + "px"
+  container.style.width = (pixels * 21 + 50) + "px"
+
   function changeColor(event) {
     event.target.style.backgroundColor = currentColor
   }
@@ -15,22 +21,21 @@ document.addEventListener("DOMContentLoaded", function () {
   }
 
   function makeGrid() {
-    for (let rows = 0; rows < gridSize; rows++) {
+    for (let rows = 0; rows < pixels; rows++) {
       row = document.createElement("div")
       row.className = "row"
-      // row.style.height = 100/gridSize + "%"
-      for (let cols = 0; cols < gridSize; cols++) {
+
+      for (let cols = 0; cols < pixels; cols++) {
         cell = document.createElement("div")
         cell.className = "cell"
 
-        // if (rows === 0) {
-        //   cell.style.borderTop = "1px solid black"
-        // }
-        // if (cols === 0) {
-        //   cell.style.borderLeft = "1px solid black"
-        // }
+        if (rows === 0) {
+          cell.style.borderTop = "1px solid black"
+        }
+        if (cols === 0) {
+          cell.style.borderLeft = "1px solid black"
+        }
 
-        // cell.style.width = 100/gridSize + "%"
         row.appendChild(cell)
       }
       grid.appendChild(row)
@@ -54,6 +59,5 @@ document.addEventListener("DOMContentLoaded", function () {
 
   indicator = document.createElement("div")
   indicator.className = "indicator"
-  indicator.textContent = "current color"
   palette.appendChild(indicator)
 })
diff --git a/styles.css b/styles.css
@@ -1,29 +1,48 @@
+h1 {
+  font-family: 'VT323', monospace;
+  text-align: center;
+}
+
 .row {
-  height: 19px;
+  height: 20px;
 }
 
 .cell {
   display: inline-block;
   height: 100%;
-  width: 19px;
-  border: 1px solid black;
+  width: 20px;
+  border-width: 0 1px 1px 0;
+  border-style: solid;
 }
 
 .color {
+  border-radius: 50%;
   display: inline-block;
-  height: 50px;
-  width: 50px;
+  height: 35px;
+  width: 35px;
   border: 1px solid black;
+  margin: 0 0 1px 3px;
 }
 
 .indicator {
+  border-radius: 50%;
   display: inline-block;
-  height: 50px;
-  width: 50px;
+  height: 35px;
+  width: 35px;
   border: 1px solid black;
+  margin: 30px 0 0 3px;
+}
+
+#container {
+  margin: 0 auto;
 }
 
 #grid {
-  height: 525px;
-  width: 525px;
+  display: inline-block;
+}
+
+#palette {
+  display: inline-block;
+  height: 400px;
+  width: 40px;
 }
