diff --git a/index.html b/index.html index 77832ae..b8dbdc8 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - +

output:

- + \ No newline at end of file diff --git a/script.js b/script.js index 6582e0d..79e51f2 100644 --- a/script.js +++ b/script.js @@ -1,11 +1,52 @@ console.log("hello script js"); +//---------------------------------------------defined variables-------------------------------------------// +var totalEmojis = ""; +var output = document.getElementById("output"); +var emoji = "😼"; + +//-------------------------------------------------functions-----------------------------------------------// + +//clear input value +var clearInput = function() { + + document.getElementById("input").value = ""; + +} + + +// add emoji to total emojis and append to output in 'p' +var display = function(currentInput) { + + var emojiRow = document.createElement("p"); + + for ( i = 0 ; i < currentInput ; i++ ) { + + totalEmojis += emoji; + + } + + emojiRow.innerText = totalEmojis; + + output.appendChild(emojiRow); + + totalEmojis = ""; + + clearInput(); + +} + + +// clear output var inputHappened = function(currentInput){ + console.log( currentInput ); - display( "WOW SOMETHING HAPPENED" ); -}; -var display = function(stuffToDisplay){ - // your DOM manipulation code here - -}; + display(currentInput); + + if ( currentInput === "clear" ){ + + document.querySelector("#output").innerHTML = ""; + } + +}; \ No newline at end of file diff --git a/style.css b/style.css index 282077b..9ee4596 100644 --- a/style.css +++ b/style.css @@ -6,6 +6,17 @@ border:3px solid blue; } -#output{ - background-color:pink; +#input { + display: block; + margin: 0 auto; + text-align: center; +} + +body { + text-align: center; } + +#output{ + background-color: black; + text-align: center; +} \ No newline at end of file