Review Algorithmic Thinking by Building a Dice Game - Step 2

JavaScript
1

Tell us what’s happening:

I have to admit, i’m really struggling with this project. The instructions are very brief compared to every other project i’ve done so far.

For this step, i’ve read the forum posts and so far, it hasn’t really helped.

But this is what i’ve landed on. Can’t say i remember encounting multiple click event before.

Your code so far

rulesBtn.addEventListener('click', () => {
  isModalShowing = true;
  rulesContainer.style.display = "block";
  rulesBtn.textcontent = "Show Rules";
}),
rulesBtn.addEventListener('click', () => {
  isModalShowing = false;
  rulesContainer.style.display = "hidden";
  rulesBtn.textcontent = "Hide Rules";
});

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

rulesBtn.addEventListener('click', () => {
  isModalShowing = true;
  rulesContainer.style.display = "block";
  rulesBtn.textcontent = "Show Rules";
}),
rulesBtn.addEventListener('click', () => {
  isModalShowing = false;
  rulesContainer.style.display = "hidden";
  rulesBtn.textcontent = "Hide Rules";
});

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Review Algorithmic Thinking by Building a Dice Game - Step 2

2

You don’t need two listeners.

When the user clicks, you need one function that toggles the modality of the rules.

So the code has to switch between false and true for example for the isModalShwoing continuously (if it is true, it becomes false, if it is false, it becomes true). The showing and hiding text also switches and the rules themselves are shown or hidden. (All in one event listener)

3

i think im getting closer, but still not right yet:

rulesBtn.addEventListener('click', () => {
  if (isModalShowing = true) {
  rulesContainer.style.display = "block";
  rulesBtn.textcontent = "Show Rules";
  }
  else {
  rulesContainer.style.display = "hidden";
  rulesBtn.textcontent = "Hide Rules";
  }
});
4

try to read what you wrote in your own words.
For eg. this is how i read some of what you wrote:

if I can see the rules then
I should make the rules have a display of block
and I should make the button say “Show Rules”

Does that seem correct?

5

ok, I think understand part of what you are saying. I’ve switched the textcontent around

rulesBtn.addEventListener('click', () => {
  if (isModalShowing = true) {
  rulesContainer.style.display = "block";
  rulesBtn.textcontent = "Hide Rules";
  }
  else {
  rulesContainer.style.display = "hidden";
  rulesBtn.textcontent = "Show Rules";
  }
});
6

i just noticed this. You’re using an assignment operator instead of a comparison operator.
Also note that isModalShowing will return a truthy so no comparison operator is even needed.

Finally, did you forget to do something that the step asked for? (hint: yes. Check!)

Edit: also, test your code. Is it working as you thought it would? (there’s another mistake)

8

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

9

A post was split to a new topic: Help with forum