diff --git a/index.html b/index.html
index cb17c82..6c38433 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,8 @@
 <html>
 
 <head>
-  <title>SWE101</title>
+  <title>SWE101 Draw! 🖍</title>
+  <meta charset="UTF-8">
   <style>
     * {
       box-sizing: border-box;
@@ -39,31 +40,36 @@
 </head>
 
 <body>
-  <h1 id="header">SWE101! 🚀</h1>
+  <h1 id="header">SWE 101! 🚀</h1>
   <div id="container">
+    <p id="mode-change-instructions">For mode changes, enter: "line", "square", "triangle", "reverse-triangle",
+      "outline-square", or
+      "center-square".</p>
     <input id="my-input" />
-    <button id="my-button">Submit</button>
-    <p>Output:</p>
-    <div id="output">
+    <button id="my-button">submit</button>
+    <p>output:</p>
+    <div id="output">Welcome to 'Drawing with Emojis'! Current mode: default.
+      Please choose a mode by entering: "line", "square", "triangle", "reverse-triangle", "outline-square", or
+      "center-square". Enjoy!
     </div>
   </div>
-  <!-- Import program logic -->
   <script src="script.js"></script>
-  <!-- Define button click functionality -->
   <script>
     var button = document.querySelector('#my-button');
+
     button.addEventListener('click', function () {
-      // Set result to input value
+
       var input = document.querySelector('#my-input');
+
       var result = main(input.value);
 
-      // Display result in output element
       var output = document.querySelector('#output');
+
       output.innerHTML = result;
 
-      // Reset input value
       input.value = "";
     });
+
   </script>
 </body>
 
diff --git a/package.json b/package.json
index 90af81e..da8bab3 100644
--- a/package.json
+++ b/package.json
@@ -21,4 +21,4 @@
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-plugin-import": "^2.22.0"
   }
-}
\ No newline at end of file
+}
diff --git a/script.js b/script.js
index 0f68729..a4298ce 100644
--- a/script.js
+++ b/script.js
@@ -1,6 +1,225 @@
-// Please declare functions and variables above where they are used.
+// input: number of characters on the screen
 
+// line drawing
+var getLine = function (lineLength) {
+  var drawLine = 0;
+  var draw = '';
+  while (drawLine < lineLength) {
+    draw = draw + '🚃';
+    drawLine = drawLine + 1;
+  }
+  return draw;
+};
+
+// square drawing
+var getSquare = function (squareDimension) {
+  var draw = '';
+  var squareHeight = 0;
+  while (squareHeight < squareDimension) {
+    var squareLength = 0;
+    while (squareLength < squareDimension) {
+      draw = draw + '🥰';
+      squareLength = squareLength + 1;
+    }
+    draw = draw + '<br>';
+    squareHeight = squareHeight + 1;
+  }
+  return draw;
+};
+
+// triangle drawing
+var getTri = function (triDimension) {
+  var draw = '';
+  var triHeight = 0;
+  while (triHeight < triDimension) {
+    var triRows = 0;
+    // @height= 0, 1st row doesn't print
+    // used "<="" to get one extra row
+    while (triRows <= triHeight) {
+      draw = draw + '🗻';
+      triRows = triRows + 1;
+    }
+    draw = draw + '<br>';
+    triHeight = triHeight + 1;
+  }
+  return draw;
+};
+
+// reverse triangle drawing
+var getRevTri = function (revTriDimension) {
+  var draw = '';
+  var revTriHeight = 0;
+  while (revTriHeight < revTriDimension) {
+    var revTriRows = 0;
+    // to reverse triangle, legnth of triangle starts @max input and -1 each loop
+    var rowLength = revTriDimension - revTriHeight;
+    while (revTriRows < rowLength) {
+      draw = draw + '🍕';
+      revTriRows = revTriRows + 1;
+    }
+    draw = draw + '<br>';
+    revTriHeight = revTriHeight + 1;
+  }
+  return draw;
+};
+
+// Outline Square Drawing
+var getOutSquare = function (squareDimension) {
+  var draw = '';
+  var squareHeight = 0;
+  while (squareHeight < squareDimension) {
+    var squareLength = 0;
+    // for top and bottom borders
+    if (squareHeight == 0 || squareHeight == (squareDimension - 1)) {
+      while (squareLength < squareDimension) {
+        draw = draw + '😎';
+        squareLength = squareLength + 1;
+      }
+    } else {
+      while (squareLength < squareDimension) {
+        // for left and right borders
+        if (squareLength == 0 || squareLength == (squareDimension - 1)) {
+          draw = draw + '😎';
+          squareLength = squareLength + 1;
+          // fill in everything else
+        } else {
+          draw = draw + '🥰';
+          squareLength = squareLength + 1;
+        }
+      }
+    }
+    draw = draw + '<br>';
+    squareHeight = squareHeight + 1;
+  }
+  // error message to inform user to input higher number to see outline square
+  if (squareDimension <= 2) {
+    draw = draw + '<br> Error. In order to see outlined square, please input above 3';
+  }
+  return draw;
+};
+
+// Center Square Drawing
+var getCenSquare = function (squareDimension) {
+  var draw = '';
+  var squareHeight = 0;
+  // +0.5 to get center position
+  var squareMid = (squareDimension / 2) + 0.5;
+  // error messages (input validation)
+  if (squareDimension < 5) {
+    draw = 'Error. Square dimensions too small, due to limitations please enter only 5, 7, or, 9.';
+    return draw;
+  }
+  if (squareDimension >= 10) {
+    draw = 'Error. Square dimensions too big, due to limitations please enter only 5, 7, or, 9.';
+    return draw;
+  }
+  if ((squareDimension % 2) == 0) {
+    draw = 'Error. Please only enter an odd number 5 and above.<br>i.e. 5, 7, 9';
+    return draw;
+  }
+  // valid input -> drawing
+  if ((squareDimension % 2) == 1) {
+    while (squareHeight < squareDimension) {
+      var squareLength = 0;
+      // prioritize middle square; squareMid - 1 b/c offset 0 count
+      if (squareHeight == squareMid - 1) {
+        while (squareLength < squareDimension) {
+          // for left and right borders
+          if (squareLength == 0 || squareLength == (squareDimension - 1)) {
+            draw = draw + '😎';
+            squareLength = squareLength + 1;
+            // middle emoji; squareMid - 1 b/c offset 0 count
+          } else if (squareLength == (squareMid - 1)) {
+            draw = draw + '😮';
+            squareLength = squareLength + 1;
+            // fill in everything else
+          } else {
+            draw = draw + '🥰';
+            squareLength = squareLength + 1;
+          }
+        }
+        // for top and bottom borders
+      } else if (squareHeight == 0 || squareHeight == (squareDimension - 1)) {
+        while (squareLength < squareDimension) {
+          draw = draw + '😎';
+          squareLength = squareLength + 1;
+        }
+      } else {
+        while (squareLength < squareDimension) {
+          // for left and right borders
+          if (squareLength == 0 || squareLength == (squareDimension - 1)) {
+            draw = draw + '😎';
+            squareLength = squareLength + 1;
+            // fill in everything else
+          } else {
+            draw = draw + '🥰';
+            squareLength = squareLength + 1;
+          }
+        }
+      }
+      draw = draw + '<br>';
+      squareHeight = squareHeight + 1;
+    }
+  }
+  return draw;
+};
+
+// "line", "square", "triangle", "reverse-triangle", "outline-square", or "center-square"
+var drawMode = 'default';
 var main = function (input) {
-  var myOutputValue = 'hello world';
+  var myOutputValue = '';
+  // invalid entry: number < 10
+  if (input >= 10) {
+    myOutputValue = 'Error. Sorry, due to limitations, input has to be under 10';
+    return myOutputValue;
+  }
+  // changing modes
+  if (input == 'line') {
+    drawMode = 'line-drawing';
+    myOutputValue = 'Current mode: ' + drawMode + '. Input defines the number of emojis returned';
+    return myOutputValue;
+  }
+  if (input == 'square') {
+    drawMode = 'square-drawing';
+    myOutputValue = 'Current mode: ' + drawMode + '. Input defines the dimensions of the square';
+    return myOutputValue;
+  }
+  if (input == 'triangle') {
+    drawMode = 'triangle-drawing';
+    myOutputValue = 'Current mode: ' + drawMode + '. Input defines the dimensions of the triangle';
+    return myOutputValue;
+  }
+  if (input == 'reverse-triangle') {
+    drawMode = 'reverse-triangle-drawing';
+    myOutputValue = 'Current mode: ' + drawMode + '. Input defines the dimensions of the reverse triangle';
+    return myOutputValue;
+  }
+  if (input == 'outline-square') {
+    drawMode = 'outline-square-drawing';
+    myOutputValue = 'Current mode: ' + drawMode + '. Input defines the dimensions of the outline square';
+    return myOutputValue;
+  }
+  if (input == 'center-square') {
+    drawMode = 'center-square-drawing';
+    myOutputValue = 'Current mode: ' + drawMode + '. Input defines the dimensions of the square';
+    return myOutputValue;
+  }
+  // Drawing!
+  if (drawMode == 'default') {
+    myOutputValue = 'Please input a mode: "line", "square", "triangle", "reverse-triangle", "outline-square", or "center-square"';
+  } else if (drawMode == 'line-drawing') {
+    myOutputValue = getLine(input);
+  } else if (drawMode == 'square-drawing') {
+    myOutputValue = getSquare(input);
+  } else if (drawMode == 'triangle-drawing') {
+    myOutputValue = getTri(input);
+  } else if (drawMode == 'reverse-triangle-drawing') {
+    myOutputValue = getRevTri(input);
+  } else if (drawMode == 'outline-square-drawing') {
+    myOutputValue = getOutSquare(input);
+  } else if (drawMode == 'center-square-drawing') {
+    myOutputValue = getCenSquare(input);
+  }
+
   return myOutputValue;
 };
