diff --git a/index.html b/index.html index ebc29a5..5f20f7a 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,33 @@ - - - - - - -

DOM Manipulation Template

- -

output:

-
- - - - + + + + + + + Flip Table + + +
+

Flip Table

+
Difficulty: + +
+
+
+
+

ArE u rEadY tO fl1p sUm tAbl3s?

+

Enter your letter: + + +

+
+
+ diff --git a/script.js b/script.js index 3df1217..55bddeb 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,106 @@ -console.log("hello script js"); +let words = { + 'Easy': 'cat', + 'Medium': 'donkey', + 'Hard': 'waxwing', + 'WTFBBQ': 'sesquipedalian loquaciousness' + }; +let punishment = []; +let tableFlipTemp = '(╯ರ ~ ರ）╯︵ ┻━┻'; +let tableFlip = tableFlipTemp.match(/\s?./g); +let tableFlipStore = [...tableFlip]; +let chosenWord = null; +//let tableFlip = ['┳━┳', '(ರ ~ ರ）┳━┳', '(╯ರ ~ ರ）╯︵ ┻━┻']; -var inputHappened = function(currentInput){ - console.log( currentInput ); - return "WOW SOMETHING HAPPEND"; -}; + +let difficulty = document.getElementById('selectedDifficulty'); +let punishmentArea = document.getElementById('punishment'); +let guesses = document.getElementById('guesses'); +let enteredLetter = document.getElementById('enterLetter'); +let submitButton = document.getElementById('submit'); +let resetButton = document.getElementById('reset'); + + +//------------------------------------ EVENT-LISTENERS ---------------------------------------- + +difficulty.addEventListener('change', function() { + enumerateBlanks(difficulty.value); + enteredLetter.value = ''; + punishmentArea.innerText = ''; + punishment = []; + +}); +submitButton.addEventListener('click', function() { + checkLetter(enteredLetter.value); + checkWord(); + checkLose(); + enteredLetter.value = ''; +}); +enteredLetter.addEventListener('keypress', function(e) { + if (e.key === 'Enter') { + checkLetter(enteredLetter.value); + checkWord(); + checkLose(); + enteredLetter.value = ''; + } +}) +resetButton.addEventListener('click', function() { + enumerateBlanks(difficulty.value); + punishmentArea.innerText = ''; + punishment = []; + tableFlipStore = [...tableFlip]; +}) + + +//------------------------------------ FUNCTIONS ---------------------------------------- + +let blanks = []; +function enumerateBlanks(diff) { + blanks = []; + for (let i=0; i x.match(/\w/)).join('') === chosenWord) { + function alertTemp() {alert('You did it!');} + setTimeout(alertTemp, 500); + } +} + +function checkLose() { + if (punishmentArea.innerText === tableFlipTemp) { + function alertTemp() {alert('You lost. Better luck next millennium.');} + setTimeout(alertTemp, 500) + } +} diff --git a/style.css b/style.css index 282077b..517b50f 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,37 @@ -.starter{ - font-size:30px; - padding:10px; - display:block; - margin:40px; - border:3px solid blue; +body { + background: white; + color: #323232; + font-weight: 300; + height: 100vh; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-family: Helvetica neue, roboto; } -#output{ - background-color:pink; +img { + width: 56px; + height: 48px; } + +h1 { + font-weight: 200; + font-style: 26px; + margin: 10px; +} + +button { + margin: 10px; +} + +#enterLetter { + width: 50px; +} + +#guesses { + padding: 10px; + font-weight: bold; + text-align: center; +} \ No newline at end of file