Shane | draw-this

index.html

@@ -7,6 +7,9 @@
     <input class="starter" id="input" placeholder="input"/>
     <h2>output:</h2>
     <p class="starter" id="output"></p>
+    <p class="starter" id="line-1"></p>
+    <p class="starter" id="line-2"></p>
+    <p class="starter" id="line-3"></p>
     <script>
       document.querySelector('#input').addEventListener('change', function(event){
         var currentInput = event.target.value;
@@ -16,4 +19,4 @@ <h2>output:</h2>
     </script>
     <script src="script.js"></script>
   </body>
-</html>
+</html>

script.js

@@ -1,11 +1,56 @@
 console.log("hello script js");
 
+//          What I need to do
+
+//1. a function to display a string to output
+
+//2. to check if user input is a number
+
+//3. make an array and record user input
+
+//4. run a loop for each array input
+
+//5. display a pineapple for each loop
+
+//6. create a new <p> for each user input
+
+
+
+
+
+
+
+
+
+//Variable to be shown when a number is entered
+var pineApple = "🍍";
+//to
+var countInput = [];
+
+
+//this assigns a variable for function that runs when user enters a value
 var inputHappened = function(currentInput){
+  //this logs the entered value into the console
   console.log( currentInput );
-  display( "WOW SOMETHING HAPPENED" );
-};
+  //boolean argument before returning
+  if (isNaN(currentInput)){
+    console.log("that is not a number");
+    alert("That is not a number");
+    return
+  }
+    console.log("that is a number");
+    display()
+}
+
+
+// your DOM manipulation code here
+var display = function(outputBox){
+
+    //This searches for the p element output in the html document and change the text
+    outputBox = document.getElementById("output");
+
+    output.innerHTML = "Heres a 🍍";
+
+    console.log();
 
-var display = function(stuffToDisplay){
-  // your DOM manipulation code here
-
-};
+  };

style.css

@@ -4,8 +4,9 @@
   display:block;
   margin:40px;
   border:3px solid blue;
+  background-color: pink;
 }
 
 #output{
   background-color:pink;
-}
+}