From 00f79af03fd2e8c125607f817100902a8b624b10 Mon Sep 17 00:00:00 2001
From: jcleow <jc.leow94@gmail.com>
Date: Mon, 28 Sep 2020 21:34:39 +0800
Subject: [PATCH] Submission for 9.2 loops

---
 index.html |   8 ++-
 script.js  | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 161 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 69cabfc..f3470f7 100644
--- a/index.html
+++ b/index.html
@@ -44,7 +44,11 @@ <h1 id="header">Drawing! ✏️</h1>
     <input id="my-input" />
     <button id="my-button">Submit</button>
     <p>Output:</p>
-    <div id="output">Enter a number to draw!</div>
+    <div id="output">Please Key in Question Number</div>
+    <li>Qn 1: Number of Characters</li>
+    <li>Qn 2: Square</li>
+    <li>Qn 3: Triangle</li>
+    <li>Qn 4: Outline Square</li>
   </div>
   <!-- Import program logic -->
   <script src="script.js"></script>
@@ -66,4 +70,4 @@ <h1 id="header">Drawing! ✏️</h1>
   </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
index bbe8a29..8330bf6 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,158 @@
+//initialize state for question:
+var stateOfProgram = 'question selection'; // 1) starts with input of question followed by 2) number of characters
+
 var main = function (input) {
-  var myOutputValue = 'hello world';
+  var myOutputValue = '';
+
+
+
+  //First Input on selection of question:
+  if (input == '1' && stateOfProgram == 'question selection') {
+    myOutputValue = 'Enter a number to draw!'
+    stateOfProgram = 'numOfCharacters';
+
+  } else if (input == '2' && stateOfProgram == 'question selection') {
+    myOutputValue = 'Enter a number to draw!'
+    stateOfProgram = 'square';
+
+  } else if (input == '3' && stateOfProgram == 'question selection') {
+    myOutputValue = 'Enter a number to draw!'
+    stateOfProgram = 'triangle';
+
+  } else if (input == '4' && stateOfProgram == 'question selection') {
+    myOutputValue = 'Enter a number to draw!'
+    stateOfProgram = 'outline square';
+
+  } else if (stateOfProgram == 'numOfCharacters') {
+    myOutputValue = numOfCharacter(input);
+
+  } else if (stateOfProgram == 'square') {
+    myOutputValue = square(input);
+
+  } else if (stateOfProgram == 'triangle') {
+    myOutputValue = triangle(input);
+
+  } else if (stateOfProgram == 'outline square') {
+    myOutputValue = outlineSquare(input);
+  }
+
   return myOutputValue;
+
 };
+
+// Qn 1: Number of Characters
+var numOfCharacter = function (input) {
+  var characterCounter = 0;
+  var outputDrawing = "";
+  var inputNumber = Number(input);
+
+  while (characterCounter < inputNumber) {
+    outputDrawing = outputDrawing + '👍';
+    console.log(outputDrawing);
+    characterCounter += 1;
+  };
+
+  return outputDrawing;
+}
+
+// Qn 2: Square
+var square = function (input) {
+  var lineCounter = 0;
+  var outputDrawing = "";
+  var inputNumber = Number(input);
+
+  while (lineCounter < inputNumber) {
+    var characterCounter = 0;
+
+    while (characterCounter < inputNumber) {
+      outputDrawing = outputDrawing + '👍';
+      characterCounter += 1;
+    };
+    outputDrawing = outputDrawing + '<br>';
+    lineCounter += 1;
+  }
+  return outputDrawing;
+}
+
+// Qn 3: triangle
+var triangle = function (input) {
+  var lineCounter = 0;
+  var inputNumber = Number(input);
+  var outputResult = "";
+
+  while (lineCounter < inputNumber) {
+    lineCounter += 1;
+
+    console.log('lineCounter is ' + lineCounter);
+
+    var characterCounter = 0;
+    var outputDrawing = "";
+
+    while (characterCounter < lineCounter) {
+      outputDrawing = outputDrawing + '👍';
+      characterCounter += 1;
+    }
+    outputResult = outputResult + outputDrawing + '<br>';
+
+    console.log('break is added');
+    console.log('outputResult is ' + outputResult);
+
+  }
+  return outputResult;
+};
+
+// Qn 4: outline square
+var outlineSquare = function (input) {
+  var lineCounter = 0;
+  var outputDrawing = "";
+  var inputNumber = Number(input);
+
+
+  while (lineCounter < inputNumber) {
+    var characterCounter = 0;
+
+    //If lineCounter = 0 or lineCounter is the last line, print only fists
+    if (lineCounter == 0 || lineCounter == inputNumber - 1) {
+      while (characterCounter < inputNumber) {
+        outputDrawing = outputDrawing + '✊';
+        characterCounter += 1;
+      };
+
+      outputDrawing = outputDrawing + '<br>';
+
+      //else the lines being printed are the middle segments
+    } else {
+      //start the outputDrawing with a fist first
+      outputDrawing = outputDrawing + '✊';
+
+      //no matter the size, the inner lines will always have exactly 2 fists. Hence the number of inner thumbs up are exactly inputNumber - 2;
+
+      while (characterCounter < inputNumber - 2) {
+        outputDrawing = outputDrawing + '👍';
+        characterCounter += 1;
+      }
+      //end the outputDrawing with a fist and a break
+      outputDrawing = outputDrawing + '✊' + '<br>';
+    }
+    //increment the lineCounter to start printing the next line
+    lineCounter += 1;
+  }
+
+  return outputDrawing;
+}
+
+//Qn 5: Triangles within Square
+
+
+//👍
+//✊
+
+
+//👍✊✊
+//👍👍✊
+//👍👍👍
+
+//✊✊✊✊
+//👍✊✊✊
+//👍👍✊✊
+//👍👍👍✊
\ No newline at end of file