diff --git a/index.html b/index.html index 77832ae..1ce70ce 100644 --- a/index.html +++ b/index.html @@ -2,18 +2,17 @@ + + - -

output:

-

- +
+

Select your emoji:

+ +

output:

+

+
+ diff --git a/script.js b/script.js index 6582e0d..9892c16 100644 --- 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 index 282077b..93129e3 100644 --- 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; +} \ No newline at end of file