Review Algorithmic Thinking by Building a Dice Game - Step 2

Programming JavaScript
1

Tell us what’s happening:

Hey fcc. Please assist me with code. The error message says “When your rulesBtn is clicked, your rulesContainer should be visible.”

Your code so far

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


/* file: styles.css */


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

let rolls = 0; 

rulesBtn.addEventListener('click', function() {
  
  rulesContainer.classList.toggle('active');
  isModalShowing = !isModalShowing;
  rulesBtn.textContent = isModalShowing ? "Hide Rules" : "Show 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 do not have an active class, and I don’t think you are allowed to add it.

Try using inline styles.

Edit: I looked at tests, they are expecting inline styles.

3

Hi there. In this situation, you would use the display attribute on the container’s style properties.

rulesContainer.style.display = 'grid';

This sets the display style to grid. The default style for html elements is block though. Likewise, ‘none’ hides the element on the page.

Figure out how to set the right display style, and you’ll be golden. Remember if the modal is showing, it should be visible. Otherwise, nothing should be displaying.

Happy learning.

Reference: display - CSS: Cascading Style Sheets | MDN