Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

russell's tableflipper #78

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

russell's tableflipper #78

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c51179
times up lets do this
russellcxl Jun 11, 2020
fcb3217
fixed all bugs
russellcxl Jun 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 32 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,32 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>DOM Manipulation Template</h3>
<input class="starter" id="input" placeholder="input"/>
<h2>output:</h2>
<div class="starter" id="output"></div>
<script>
var display = function(data){
var displayElement = document.querySelector('#output');

// get rid of the entire contents
displayElement.innerHtml = "";

// put the data into the div
output.innerText = data;
}

document.querySelector('#input').addEventListener('change', function(event){
var currentInput = event.target.value;
var result = inputHappened(currentInput)
display( result );
});
</script>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
<!DOCTYPE html>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<head>
<title>Flip Table</title>
</head>
<body>
<div class="container">
<h1 class="text-center">Flip Table</h1>
<div class="text-center">Difficulty:
<select id='selectedDifficulty'>
<option id='default' selected disbled hidden>Please select one</option>
<option>Easy</option>
<option>Medium</option>
<option>Hard</option>
<option>WTFBBQ</option>
</select>
</div>
<br />
<div class="text-center">
<div id='punishment'></div>
<p class="text-center" id='guesses'>ArE u rEadY tO fl1p sUm tAbl3s?</p>
<p>Enter your letter:
<input id="enterLetter">
</input>
</p>
<button class='btn btn-info' id='submit'>Submit</btn-info>
<button class='btn btn-info' id='reset'>Reset</btn-info>
</div>
</div>
<script src='script.js'></script>
94 changes: 89 additions & 5 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ----------------------------------------
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i like that you separate the listeners and functions, so neat!


let blanks = [];
function enumerateBlanks(diff) {
blanks = [];
for (let i=0; i<words[diff].length; i++) {
if (words[diff][i].match(/\s/)) blanks.push(' ');
else blanks.push('_');
}
guesses.innerText = blanks.join(' ');
chosenWord = words[diff];
//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
let indices = [];
for (let i=0; i<chosenWord.length; i++) {
if (chosenWord[i] === x) indices.push(i);
}
for (let i=0; i<indices.length; i++) {
blanks[indices[i]] = x;
}
guesses.innerText = blanks.join(' ');
}
else {
punishment.push(tableFlip.shift());
punishmentArea.innerText = punishment.join('');
}
}
else {
alert('That is not a letter of the alphabet.');
}
}


function checkWord() {
if (guesses.innerText.split('').filter(x => 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)
}
}
42 changes: 34 additions & 8 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}