--- id: 657a19e477dc04e36a86dffc title: Step 10 challengeType: 0 dashedName: step-10 --- # --description-- When the user clicks on the `Show rules` button, the rules for the game should display on the screen. When they click on the button again, the rules should be hidden. In the next few steps, you will build out the toggle functionality to show and hide the rules. Start by using the `addEventListener()` method on the `rulesBtn`. For the first argument, pass in a `click` event and for the second argument pass in an empty arrow function. # --hints-- You should use the `addEventListener()` method on the `rulesBtn`. ```js assert.match(code, /rulesBtn\s*\.\s*addEventListener\s*\(/); ``` You should have a `click` event for the first argument of the `addEventListener()`. ```js assert.match(code, /rulesBtn\.addEventListener\s*\(\s*('|"|`)\s*click\s*\1\s*/); ``` You should have an empty arrow function for the second argument of the `addEventListener()`. ```js assert.match(code, /rulesBtn\.addEventListener\s*\(\s*('|"|`)\s*click\s*\1\s*,\s*\(\s*[^)]*\)\s*=>/); ``` # --seed-- ## --seed-contents-- ```html Advanced Dice Game

Advanced Dice Game

Rules

Points

Rolls: 0 | Round: 1

Score history (Total score: 0)

    ``` ```css *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --dark-grey: #1b1b32; --light-grey: #f5f6f7; --black: #000; --white: #fff; --grey: #3b3b4f; --golden-yellow: #fecc4c; --yellow: #ffcc4c; --gold: #feac32; --orange: #ffac33; --dark-orange: #f89808; } body { background-color: var(--dark-grey); } header { color: var(--light-grey); text-align: center; } h1 { font-size: 2.5rem; margin: 25px 0; } .rules-container { display: none; background-color: var(--light-grey); color: var(--black); width: 50%; margin: 20px auto; height: 300px; border-radius: 10px; overflow-y: scroll; } .rules-container ul { list-style-type: none; } .points { margin-top: 15px; } main { background-color: var(--light-grey); padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 1rem; margin: auto; justify-items: center; width: 50%; border-radius: 10px; } #dice { display: flex; justify-content: space-around; margin-bottom: 15px; } .die { width: 40px; height: 40px; text-align: center; margin-right: 15px; border: 4px solid var(--black); padding: 10px; } .rounds-text { text-align: center; } input[type="radio"]:disabled + label { color: var(--grey); } #score-history { margin-top: 15px; text-align: center; list-style-position: inside; } .btn { cursor: pointer; width: 200px; margin: 10px 0 10px 0.5rem; color: var(--black); background-color: var(--gold); background-image: linear-gradient(var(--golden-yellow), var(--orange)); border-color: var(--gold); border-width: 3px; } .btn:hover:enabled { background-image: linear-gradient(var(--yellow), var(--dark-orange)); } @media (max-width: 992px) { main { width: 100%; } } @media (max-width: 500px) { .btn { width: 120px; } } ``` ```js const listOfAllDice = document.querySelectorAll(".die"); const scoreInputs = document.querySelectorAll("#score-options input"); const scoreSpans = document.querySelectorAll("#score-options span"); const currentRoundText = document.getElementById("current-round"); const currentRoundRollsText = document.getElementById("current-round-rolls"); const totalScoreText = document.getElementById("total-score"); const scoreHistory = document.getElementById("score-history"); const rollDiceBtn = document.getElementById("roll-dice-btn"); const keepScoreBtn = document.getElementById("keep-score-btn"); const rulesContainer = document.querySelector(".rules-container"); const rulesBtn = document.getElementById("rules-btn"); let diceValuesArr = []; let isModalShowing = false; let score = 0; let totalScore = 0; let round = 1; let rolls = 0; --fcc-editable-region-- --fcc-editable-region-- ```