Initial setup

jttmckee · Jul 12, 2017 · 5ae39a4 · 5ae39a4
1 parent d523c60
commit 5ae39a4
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 0 deletions.
diff --git a/css/sketchpad.css b/css/sketchpad.css
@@ -0,0 +1,28 @@
+/*Copyright Jason McKee 2017 All rights reserved. */
+#container{
+  height: 480px;
+  width: 480px;
+  margin-left: auto;
+  margin-right: auto;
+  float:left;
+}
+div {
+  border: 1px dashed gray;
+}
+#reset-button{
+  float:left;
+  margin-left: 20px;
+  margin-top: 100px;
+  font-size: 18px;
+  font-family: arial,sans-serif;
+  background-color: #eeeeee;
+  color:gray;
+  border-radius:3px;
+}
+#reset-button:hover {
+  color:black;
+}
+#reset-button:focus {
+  box-shadow:none;
+  outline-style:none;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <title>Sketch Pad</title>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script src="js/sketchpad.js"></script>
+  <link rel="stylesheet" href="css/sketchpad.css">
+</head>
+<body>
+  <div id="container">
+
+  </div>
+  <input type="button" id="reset-button" value="Reset">  </input>
+</body>
+</html>
diff --git a/js/sketchpad.js b/js/sketchpad.js
@@ -0,0 +1,45 @@
+//Copyright Jason McKee 2017.  All rights reserved.
+var width = 16;
+var widthpx = 480;
+var borderWidth = 1;
+
+function setup(width, widthpx, borderWidth) {
+  for (var i = 0; i < width; i++ ) {
+    for (var j = 0; j < width; j++) {
+      blockID="u-"+i+"-"+j;
+      $("#container").append(
+        "<div class=\'unit-block\' id=\'"+ blockID + "\'></div>");
+        blockID = "#" + blockID;
+        $(blockID).css('display','inline');
+        $(blockID).css('margin','0');
+        $(blockID).css('padding','0');
+        unitWidth = (widthpx / width) - (2*borderWidth);
+        $(blockID).css('height',unitWidth +'px');
+        $(blockID).css('width',unitWidth +'px');
+
+        if (j === 0) {
+          $(blockID).css('float','left');
+        }
+
+        else  {
+          $(blockID).css('float', 'right');
+        }
+    }
+  }
+}
+$(document).ready(function() {
+
+  setup(width,widthpx, borderWidth);
+
+  $(".unit-block").hover( function() {
+    $(this).css('background-color',"#000000")
+  });
+
+
+  $("#reset-button").on('click', function() {
+    var newWidth = prompt('Please enter the width you would like', width);
+    width = newWidth;
+
+  });
+
+});