darrell's NOT broken code :)

index.html

@@ -7,6 +7,7 @@
     <input class="starter" id="input" placeholder="input"/>
     <h2>output:</h2>
     <p class="starter" id="output"></p>
+    <!-- <input type="button" id="reset" value="Reset" onclick="clearPineapple();"/> -->
     <script>
       document.querySelector('#input').addEventListener('change', function(event){
         var currentInput = event.target.value;

script.js

@@ -2,10 +2,38 @@ console.log("hello script js");
 
 var inputHappened = function(currentInput){
   console.log( currentInput );
-  display( "WOW SOMETHING HAPPENED" );
+  var inputString = currentInput.split(" ");
+  if(inputString[0] == "clear"){
+    //run clear function
+    clearPineapple(parseInt(inputString[1]));
+  } else {
+    display(parseInt(inputString[0]), parseInt(inputString[1]));
+  }  
 };
 
-var display = function(stuffToDisplay){
+var pee;
+var display = function(stuffToDisplay, num){
   // your DOM manipulation code here
-
+  //🍍
+  if(num > 1){
+    for(var i = 0; i < num; i++){ //create multiple rows
+      pee = document.createElement('p'); //create a <p> tag
+      pee.textContent = pineapplePen(stuffToDisplay);
+      document.querySelector('#output').appendChild(pee);
+    }
+  } else {
+    pee = document.createElement('p'); //create a single row <p> tag
+    pee.textContent = pineapplePen(stuffToDisplay);
+    document.querySelector('#output').appendChild(pee);
+  }
 };
+
+var clearPineapple = function(number){
+  var pineappleArray = document.querySelectorAll('#output p');
+  pineappleArray[number-1].remove();
+}
+
+var pineapplePen = function(num){
+  var pineApples = "🍍";
+  return pineApples.repeat(num);
+}