diff --git a/index.html b/index.html index 77832ae..bfd2334 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,24 @@ - - - - - - -

output:

-

- - - - + + + + + + + +

output:

+ +

+ + + + + + + \ No newline at end of file diff --git a/script.js b/script.js index 6582e0d..10a3a0b 100644 --- a/script.js +++ b/script.js @@ -1,11 +1,63 @@ -console.log("hello script js"); +// console.log("hello script js"); -var inputHappened = function(currentInput){ - console.log( currentInput ); - display( "WOW SOMETHING HAPPENED" ); -}; +// var inputHappened = function (currentInput) { +// console.log(currentInput); +// display("WOW SOMETHING HAPPENED"); +// }; -var display = function(stuffToDisplay){ - // your DOM manipulation code here - -}; + + +// var display = function (stuffToDisplay) { +// your DOM manipulation code here + +// }; + + +/* Version 1 */ +const input = document.querySelector('#input'); +const output = document.querySelector('#output'); + +const newContent = document.createElement('div'.id = 'content'); +document.body.appendChild(newContent); +newContent.appendChild(output); + +input.addEventListener('change', event => { + + const currentInput = event.target.value; + + switch (currentInput) { + case '3': + output.innerHTML = `

🍍🍍🍍

`; + break; + case '2': + output.innerHTML += `

🍍🍍

`; + break; + /* Version 2 */ + case '2 2': + output.innerHTML = `

🍍🍍
🍍🍍

`; + break; + + default: + output.innerHTML += `

`; + for (let i = 0; i < (parseInt(currentInput) || 1); i++) { + output.innerHTML += `🍍`; + } + output.innerHTML += `

`; + break; + + case 'clear': + output.innerHTML = ''; + break; + + /* further try */ + case 'triangle 3': + output.innerHTML = `

🍍🍍🍍
🍍🍍
🍍

`; + break; + + case 'rtriangle 3': + output.innerHTML = `

🍍
🍍🍍
🍍🍍🍍

`; + break; + } +}); + +/* Version 2 */ \ No newline at end of file