Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by gopal sharma
.a{fill-rule:evenodd;}techdegree
gopal sharma
Front End Web Development Techdegree Student 30 Points

please anyone help with my code its really really difficult please see its the hardest project i ever seen

i am a techdegree student i am giving unit 6 and in that there is a project name game show app i design the entire app i mean some short things are left the project is to make a game where there are list of phrases in the site but they are not vidible i mean there is a grey colour overlap over it below it there are keyboard keys the goal is to type the keys of the keyboard given below and as we put the right key that targeted alphabet shall be popup in the over the grey overlap and that grey colour hides and we can see the alphabet in that we have to choose evety alphabet of the phrase by pressing those keys this is the url of all of which i had done i was able to overlap the text with grey colour but cant add interactivity of buttons i mean when i press button of that specific alphabtes nothing happens plese please someone help this project is really necessary for passing my unit 6 thatys my github repository please someone help i explained my problem in js file step by step https://github.com/siddharth-pathak1212/game-show-app

6 Answers

gopal sharma
seal-mask
.a{fill-rule:evenodd;}techdegree
gopal sharma
Front End Web Development Techdegree Student 30 Points
gopal sharma
.a{fill-rule:evenodd;}techdegree
gopal sharma
Front End Web Development Techdegree Student 30 Points

oh thanks bro sharing it in github wait please try to help please i want to pass my teachdegree

gopal sharma
seal-mask
.a{fill-rule:evenodd;}techdegree
gopal sharma
Front End Web Development Techdegree Student 30 Points
gopal sharma
.a{fill-rule:evenodd;}techdegree
gopal sharma
Front End Web Development Techdegree Student 30 Points

please see josh nussbaum i uploaded the gitub repository link please help

Lee Vaughn
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher
Lee Vaughn
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher

Hi gopal sharma!

Don't forget, each Techdegree has its own dedicated Slack group. Since this is a TD specific question I would recommend reaching out to that Slack group. There will be lots of friendly folks there who are happy to help. If you are not already part of the Slack group you can find a link to it on the right side of your Techdegree Home page. :thumbsup:

gopal sharma
.a{fill-rule:evenodd;}techdegree
gopal sharma
Front End Web Development Techdegree Student 30 Points

hello lee vaughn please reply when i go to the home page it just shows go to slack not giving an invite link

Josh Nussbaum
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Josh Nussbaum
Full Stack JavaScript Techdegree Graduate 27,472 Points
Josh Nussbaum
.a{fill-rule:evenodd;}techdegree seal-36
Josh Nussbaum
Full Stack JavaScript Techdegree Graduate 27,472 Points

Hi gopal sharma! Sorry I was at work all day and unable to look at this. Give this a try. Your phrase with this code will now allow the grey boxes to hold the values of individual letters. You still need to create a checkLetter function to show matching phrase letters.

I also added a 'missed' variable to hold how many wrong answers the player has used :) 

const button = document.querySelector('#bttn');
const qwerty = document.getElementById('qwerty');
const phrase = document.getElementById('phrase');
const overlay = document.getElementById('overlay');
let missed = 0;

const phrasesArray = [
  "Break a leg",
  "Bite the bullet",
  "Call it a day",
  "Better late than never",
  "Cutting corners"
]

button.addEventListener('click', () => {
  overlay.style.display = "none";
})

function getRandomPhraseAsArray(arr) {
  const randomIndex = Math.floor(Math.random() * phrasesArray.length);
  const randomPhrase = phrasesArray[randomIndex];
  const phraseAsCharacters = randomPhrase.split('');
  return phraseAsCharacters;
}

const phraseArray = getRandomPhraseAsArray(phrasesArray);

function addPhraseToDisplay(arr) {

  for (let i = 0; i < phraseArray.length; i++) {
    const li = phraseArray[i];
    const liPhrase = document.createElement('li');
    liPhrase.textContent = li;
    const ul = document.querySelector('#phrase ul');
    ul.appendChild(liPhrase);

    if (li !== " ") {
      liPhrase.classList.add('letter');
    } else if (li === " ") {
      liPhrase.classList.add('space');
    }

  }
}

addPhraseToDisplay(phraseArray);
gopal sharma
.a{fill-rule:evenodd;}techdegree
gopal sharma
Front End Web Development Techdegree Student 30 Points

bro listen i add the class letter successfully before too buddy but bro main thing is that whenever i press any key of the keyboard from the keyboard layout on the site the alphabte whicgh i clicked if it matches the alphabet from the specific phrase alphabet then add show class to that alphabet so it shall popup when it got clicked because of show class please look at this

Josh Nussbaum
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Josh Nussbaum
Full Stack JavaScript Techdegree Graduate 27,472 Points
Josh Nussbaum
.a{fill-rule:evenodd;}techdegree seal-36
Josh Nussbaum
Full Stack JavaScript Techdegree Graduate 27,472 Points

You have to create a checkLetter function. That function checks if a letter the user clicked is a letter in the phrase. If it matches a letter in the random phrase, show the letter. If not, add 1 to the “missed” variable. You haven’t written your other functions yet, when you do, the letters will start to appear.

You should also contact the treehouse support team. They can help you to join the slack channel! It’s the best place for any issues you are having with your code :)

gopal sharma
.a{fill-rule:evenodd;}techdegree
gopal sharma
Front End Web Development Techdegree Student 30 Points

bro listen i cant understand how to map through buttons and check that buttons dont worry i map through buttons with map but its showing button.map is not a function code look like this

const button = document.querySelectorAll('button')'; button.map() but its showing button.map is not a function inside the console

that was the first problem and even if i map singe button from a bunch of buttons i have though making an event listener to that single mapped button which we clicked and in that i am thinking of a making of conditional statement that states that the item which we clicked in our case which is a single button if its textContent == li.textContent then put the class show to the selected li element

code looks like this

const button = document.querySelectorAll('button')'; button.map((item) => { item.addEventListener('click',() => { if( item is clicked then execute this codes) { if(item.textContent == li.textContent) { li.setAttribute('letter','show'); } } }) })

please bro make this code a little easier because its having problems to execute buttons.map function is not running first then bro i want to taregt the button when anyone clicked it then execute the rest of the codes bro for that i need one condtional statemet but bro i cant target that button i mjean i cant un derstand what condiution should be written then i think the rest of the codes which i written it also have [problems to execute bro please look at this and please do some edit because that is the problem i am facing too much and cant find the solution

BRO PLEASE HELP PLEASE

Lee Vaughn
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher
Lee Vaughn
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher

Hi Gogal! You should be able to click on that "Go to Slack ->" button and be redirected to the Slack group.

gopal sharma
.a{fill-rule:evenodd;}techdegree
gopal sharma
Front End Web Development Techdegree Student 30 Points

bro i cant add that too whwnever i clicked that go to slack button they take me to slack website there they ask to enter your email and pss to sign in i put ll the details nd click on sign in then too nothing response i get it only says " Sorry, you entered an incorrect email address or password." but i have recehecked my email and pass then too