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.

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

Wk 3 - Project Guess Who - Submitted #328

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
all steps working
  • Loading branch information
BeckieMorton committed Sep 7, 2023
commit 576e334897ee2ba030c0d64100eee81891957364
1 change: 1 addition & 0 deletions code/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ <h1>Does the person have</h1>
<div class="win-or-lose">
<img class="guess-who-icon" src="images/guess-who-bubble.png" alt="Guess Who" />
<h1 id="winOrLoseText"></h1>
<h2 id="winOrLoseTexth2"></h2>
<button type="button" id="playAgain" class="filled-button">PLAY AGAIN</button>
</div>
</section>
Expand Down
38 changes: 15 additions & 23 deletions code/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const findoutButton = document.getElementById('filter')
const playAgainButton = document.getElementById('playAgain')

const winOrLoseText = document.getElementById("winOrLoseText")
const winOrLoseTexth2 = document.getElementById("winOrLoseTexth2")
const winOrLoseSection = document.getElementById("winOrLose")

//don't need a GUESS button DOM selector because we add this button dynamically in this JS
Expand Down Expand Up @@ -220,15 +221,12 @@ let charactersInPlay = []; //Array of people still in the game

// Function - start - to start (and restart) the game
const start = () => {
// Here we're setting charactersInPlay array to be all the characters to start with
charactersInPlay = CHARACTERS
//winOrLoseText.innerHTML = ""
//winOrLoseText.innerHTML = ""
//if this is not the first call of start() the next 2 lines clear the win and loose screens
winOrLoseSection.style.display = "none";
board.style.display = "flex";
generateBoard(); //Step 1 - I added this on Tues to see the board
setSecret(); //Step 1 - 'Computer player' selects the secret character the user tries to guess

}


Expand Down Expand Up @@ -268,9 +266,7 @@ const selectQuestion = () => {
category: category,
value: value
}

console.log(currentQuestion)
return (currentQuestion)
return (currentQuestion) //do I need this?
}


Expand Down Expand Up @@ -358,39 +354,35 @@ const filterCharacters = (keep) => {
const guess = (personToConfirm) => {
console.log("we have entered the guess function")

let confirmGuess = confirm(`Are you sure you want to guess on ${personToConfirm}`);
let confirmGuess = confirm(`Are you sure you want to guess on ${personToConfirm}?`);

if (confirmGuess) {
checkMyGuess(personToConfirm);
} else if (!confirmGuess) {
return;

Choose a reason for hiding this comment

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

Here you don't need to return it, if you want. You can just write one statement and no else if.

}

console.log(`confirm equals: ${confirmGuess}`);
console.log(`This is the secret person: ${secret.name}`);

}

// Function - checkMyGuess - if you confirm, this function is invoked
const checkMyGuess = (personToCheck) => {
console.log("we have entered the last function - check my guess")
if (personToCheck == secret.name) {
winOrLoseText.innerHTML = "You won!"

if (personToCheck == secret.name) { // 1. Check if the personToCheck is the same as the secret person's name
winOrLoseText.innerHTML = "You won! &#127881;" // 2. Set a Message to show in the win or lose section accordingly
winOrLoseTexth2.innerHTML = "Well done, Thank you for playing!"
}
else {
winOrLoseText.innerHTML = "You lost"
winOrLoseText.innerHTML = "You lost &#128078;"
winOrLoseTexth2.innerHTML = `Good try, bad luck this time`
}
winOrLoseSection.style.display = "block";
board.style.display = "none";

// 1. Check if the personToCheck is the same as the secret person's name
// 2. Set a Message to show in the win or lose section accordingly
// 3. Show the win or lose section
// 4. Hide the game board
// body.innerHTML += `

// `
winOrLoseSection.style.display = "block"; // 3. Show the win or lose section
board.style.display = "none"; // 4. Hide the game board
}

//-------------------- Program Starts Here --------------------//

// Invokes the start function when website is loaded
start()
Expand All @@ -399,7 +391,7 @@ start()
//-------------------- All Event Listeners --------------------//


//NOTE: 4 events - restart button, find out button, guess button, play again button
//NOTE: 4 events - restart button, find out button, play again button (NONE for Guess button as it is added dynamically)

restartButton.addEventListener('click', start) //NOTE: technigo wrote this
playAgainButton.addEventListener('click', start)
Expand Down
8 changes: 8 additions & 0 deletions code/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,14 @@ h1 {
color: #00804d;
}

h2 {
font-size: 30px;
font-weight: 200;
margin: 10px 0;
color: #00804d;
padding: 0 0 20px 100px;
}

.question-section {
width: 30%;
min-height: 100vh;
Expand Down