Review Algorithmic Thinking by Building a Dice Game - Step 2

JavaScript
1

Tell us what’s happening:

My code runs correctly on the website preview, but for some reason, I keep getting the issue “Your rulesContainer should not be visible initially.”

Frankly not even sure what that means.

I thought maybe there was an issue that I just could not understand, so I copied the code from step 3 into step 2. The same issue is still there. Please help.

Your code so far

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


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

rulesBtn.addEventListener("click", () => {
  isModalShowing = !isModalShowing;

  if (isModalShowing) {
    rulesBtn.textContent = "Hide rules";
    rulesContainer.style.display = "block";
  } else {
    rulesBtn.textContent = "Show rules";
    rulesContainer.style.display = "none";
  }
});

// User Editable Region

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge Information:

Review Algorithmic Thinking by Building a Dice Game - Step 2

2

Since the value of isNodalShowing is initially false, which part of your if else statement will run? (This is a hint)

3

right so initially, isModalShowing is false, and the rules container is not showing. Now you click the button, then isModalShowing becomes true, and then display is set to block. Until you press the button, the initial state is that rulesContainer is not visible, so the error doesn’t really make sense to me.

Still, I tried what you are suggesting with this code:

rulesBtn.addEventListener(“click”, () => {
if (isModalShowing) {
rulesBtn.textContent = “Show rules”;
rulesContainer.style.display = “none”;
} else {
rulesBtn.textContent = “Hide rules”;
rulesContainer.style.display = “block”;
}
isModalShowing = !isModalShowing;
});

Still the same issue.

4

hmm, okay not sure what is happening ,but can you reset and try the original code one more time? (it actually worked for me)

5

I reset it, tried it again, and also ran it on an incognito chrome browser, no luck. Could you share what browser and OS you are using? I know different browsers and OS’s handle html-css-javascript commands differently, so if the code works for you, maybe the issue is with my device? (I am on a 2016 macbook OS Sierra 10.12.6, chrome version 103.0.5060.134)

6

I’m on a windows machine running the latest chrome browser.

Please try one of the following steps to move forward.

Click on the “Reset” step button and if you’re on Windows, force a refresh of your page with CTRL + F5 then try to paste the code in again.
On other systems, please follow the instructions [here] (How to do a Hard Refresh and Refresh Your Browser Cache) after the reset and re-paste the code in.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

or - Turn off high contrast themes on Windows (from accessibility settings menu)

I hope one of these will work for you.

7

That seems like an old version of Chrome. Can you please try updating it?

8

Quick update, thank you everyone for your help. It was definitely a problem with OS. I couldn’t update my Google Chrome version since my mac is too old, so instead I walked to the library and tested this code on their windows chromebooks, and the original code worked. Might just not work on macbooks.

9

What about Firefox, does it not allow you to install the latest version?

Seems odd that you can’t update Chrome, but I guess newer versions might depend on OS features not implemented on older version of the OS.

10

Screen Shot 2024-09-02 at 5.46.44 PM
Screen Shot 2024-09-02 at 5.46.44 PM1422×404 31.5 KB

Yeah my OS is too old to update chrome, and I don’t think I can install the latest firefox either. Though, I am also still curious about the inner details, like why the code works on some OS/chrome versions and not others.

11

We are using the checkVisibility API which is of newer date.

You can check the exact browser versions supported on caniuse