wdi-sg · russellcxl · Jun 15, 2020
diff --git a/index.html b/index.html
@@ -2,18 +2,17 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
   </head>
   <body>
-    <input class="starter" id="input" placeholder="input"/>
-    <h2>output:</h2>
-    <p class="starter" id="output"></p>
-    <script>
-      document.querySelector('#input').addEventListener('change', function(event){
-        var currentInput = event.target.value;
-        inputHappened(currentInput)
-      });
-
-    </script>
+    <div>
+      <p id='emoji-list'>Select your emoji: </p>
+      <input class="starter" id="input" placeholder="'clear [row]' / 'triangle [number]'"/>
+      <h2>output:</h2>
+      <p class="starter" id="output"></p>
+    </div>
     <script src="script.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,11 +1,84 @@
-console.log("hello script js");
+let input = document.getElementById('input');
+let output = document.getElementById('output');
+
+
+//-------------------------------EMOJI-SELECTION--------------------------
+
+
+let currentEmoji = '🍍';
+let emojis = ['☠️', '👽', '👾', '🤖', '🎃'];
+
+for (let i = 0 ; i < emojis.length ; i++) {
+  let newButton = document.createElement('button');
+  newButton.className = 'btn btn-info';
+  newButton.innerText = emojis[i];
+  newButton.style = 'margin: 10px;';
+  let emojiList = document.getElementById('emoji-list');
+  emojiList.appendChild(newButton);
+}
+
+let emojiButtons = document.querySelectorAll('button');
+// console.log(emojiButtons)
+// console.log(Object.keys(emojiButtons));
+// console.log(emojiButtons[1].innerText)
+for (let i = 0 ; i < emojis.length ; i++) {
+  emojiButtons[i].addEventListener('click', function(e) {
+    currentEmoji = emojiButtons[i].innerText;
+    for (let j = 0 ; j < emojiButtons.length ; j++) {
+      emojiButtons[j].disabled = false;
+    }
+    emojiButtons[i].disabled = true;
+  });
+}
+
+
+//-------------------------------INPUT--------------------------
+
+
+input.addEventListener('keypress', function(x) {
+  if (x.key === 'Enter') {
+    if (input.value.match(/^(clear)(\s\d+)?/)) {
+      //console.log(input.value.match(/^(clear)\s?(\d+)?/));
+      if (input.value === 'clear') {
+        clear();
+      }
+      else {
+        clear(input.value.toString().split(' ')[1]);
+      }
+    }
+    else if (input.value.match(/(triangle\s\d+)/)) {
+      for (let i = 1 ; i <= input.value.match(/\d+/) ; i++) {
+        enumerate(i);
+      }
+    }
+    else {
+      enumerate(input.value);
+    }
+    input.value = '';  
+  }
+});
+
+
+//------------------------------FUNCTIONS------------------------------
+
+
+function enumerate(x) {
+  let arr = [];
+  for (let i = 0 ; i < x ; i++) {
+    arr.push(currentEmoji);
+  }
+  let newPara = document.createElement('p');
+  newPara.innerText = arr.join('');
+  output.appendChild(newPara);
+}
+
+function clear(x) {
+  if (x) {
+    output.removeChild(output.childNodes[x-1]);
+  }
+  else {
+    output.innerText = '';
+  }
+}
 
-var inputHappened = function(currentInput){
-  console.log( currentInput );
-  display( "WOW SOMETHING HAPPENED" );
-};
 
-var display = function(stuffToDisplay){
-  // your DOM manipulation code here
-
-};
diff --git a/style.css b/style.css
@@ -1,11 +1,20 @@
+div {
+  background-color:peachpuff;
+  margin-left: 10%;
+}
+
 .starter{
   font-size:30px;
   padding:10px;
   display:block;
   margin:40px;
-  border:3px solid blue;
+  border:3px solid black;
 }
 
 #output{
-  background-color:pink;
+  background-color:white;
 }
+
+#input {
+  width: 500px;
+}