From 2c51179336187e8b8ecb520b85a6ca66ec706de6 Mon Sep 17 00:00:00 2001 From: Russell Chan Date: Thu, 11 Jun 2020 21:30:18 +0800 Subject: [PATCH 1/2] times up lets do this --- index.html | 62 ++++++++++++++++++----------------- script.js | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++--- style.css | 42 +++++++++++++++++++----- 3 files changed, 155 insertions(+), 43 deletions(-) diff --git a/index.html b/index.html index ebc29a5..401f1a6 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,32 @@ - - - - - - -

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..9b87982 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,90 @@ -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 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 = ''; +}); +submitButton.addEventListener('click', function() { + checkLetter(enteredLetter.value); + checkWord(); + checkLose(); + enteredLetter.value = ''; +}); +resetButton.addEventListener('click', function() { + enumerateBlanks(difficulty.value); +}) + + +//------------------------------------ FUNCTIONS ---------------------------------------- + +let blanks = []; +function enumerateBlanks(diff) { + blanks = []; + for (let i=0; i x.match(/\w/)).join('') === chosenWord) { + setTimeout(alert('You did it!'), 1000); //this does not work?? + } +} + +function checkLose() { + if (punishmentArea.innerText === tableFlipTemp) { + setTimeout(alert('You lost. Better luck next millennium.'), 1000) + } +} 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 From fcb3217ccc49e28f8256bd33346dcef6c3a16903 Mon Sep 17 00:00:00 2001 From: Russell Chan Date: Sat, 13 Jun 2020 10:56:06 +0800 Subject: [PATCH 2/2] fixed all bugs --- index.html | 3 ++- script.js | 32 ++++++++++++++++++++++++-------- 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 401f1a6..5f20f7a 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ - Flip Table + + Flip Table
diff --git a/script.js b/script.js index 9b87982..55bddeb 100644 --- a/script.js +++ b/script.js @@ -7,6 +7,7 @@ let words = { let punishment = []; let tableFlipTemp = '(╯ರ ~ ರ）╯︵ ┻━┻'; let tableFlip = tableFlipTemp.match(/\s?./g); +let tableFlipStore = [...tableFlip]; let chosenWord = null; //let tableFlip = ['┳━┳', '(ರ ~ ರ）┳━┳', '(╯ರ ~ ರ）╯︵ ┻━┻']; @@ -25,6 +26,8 @@ difficulty.addEventListener('change', function() { enumerateBlanks(difficulty.value); enteredLetter.value = ''; punishmentArea.innerText = ''; + punishment = []; + }); submitButton.addEventListener('click', function() { checkLetter(enteredLetter.value); @@ -32,8 +35,19 @@ submitButton.addEventListener('click', function() { 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]; }) @@ -48,26 +62,26 @@ function enumerateBlanks(diff) { } guesses.innerText = blanks.join(' '); chosenWord = words[diff]; + tableFlipStore = [...tableFlip]; //return blanks.join(' '); return [chosenWord, blanks.join(' ')]; } function checkLetter(x) { - if (x.toLowerCase().match(/[a-z]/i) && x.length == 1) { //checks if submitted letter is proper - if (chosenWord.indexOf(x) !== -1) { - //matching letter x, x indexed at 1,2,3, replace all 1,2,3 in arr with x + if (x.toLowerCase().match(/[a-z]/) && x.length == 1) { + if (chosenWord.indexOf(x.toLowerCase()) !== -1) { let indices = []; for (let i=0; i x.match(/\w/)).join('') === chosenWord) { - setTimeout(alert('You did it!'), 1000); //this does not work?? + function alertTemp() {alert('You did it!');} + setTimeout(alertTemp, 500); } } function checkLose() { if (punishmentArea.innerText === tableFlipTemp) { - setTimeout(alert('You lost. Better luck next millennium.'), 1000) + function alertTemp() {alert('You lost. Better luck next millennium.');} + setTimeout(alertTemp, 500) } }