mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-14 04:00:42 -04:00
feat(curriculum): dice game project (#50819)
Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> Co-authored-by: jdwilkin4 <jwilkin4@hotmail.com>
This commit is contained in:
Joy Shaheb
@@ -402,6 +402,14 @@
|
||||
"This project will help you understand the fundamental concepts behind these algorithms and how they can be applied to sort numerical data in a web applications."
|
||||
]
|
||||
},
|
||||
"learn-intermediate-algorithmic-thinking-by-building-a-dice-game": {
|
||||
"title": "Learn Intermediate Algorithmic Thinking by Building a Dice Game",
|
||||
"intro": [
|
||||
"Algorithmic thinking involves the ability to break down complex problems into a sequence of well-defined, step-by-step instructions.",
|
||||
"In this Dice game project, you’ll learn how to manage game state, implement game logic for rolling dice, keeping score, and applying rules for various combinations.",
|
||||
"This project covers concepts such as event handling, array manipulation, conditional logic, and updating the user interface dynamically based on game state."
|
||||
]
|
||||
},
|
||||
"learn-intermediate-oop-by-building-a-platformer-game": {
|
||||
"title": "Learn Intermediate OOP by Building a Platformer Game",
|
||||
"intro": [
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Introduction to the Learn Intermediate Algorithmic Thinking by Building a Dice Game
|
||||
block: learn-intermediate-algorithmic-thinking-by-building-a-dice-game
|
||||
superBlock: 2022/javascript-algorithms-and-data-structures
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Introduction to the Learn Intermediate Algorithmic Thinking by Building a Dice Game
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@@ -0,0 +1,225 @@
|
||||
{
|
||||
"name": "Learn Intermediate Algorithmic Thinking by Building a Dice Game",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-intermediate-algorithmic-thinking-by-building-a-dice-game",
|
||||
"order": 422,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "2022/javascript-algorithms-and-data-structures",
|
||||
"superOrder": 4,
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "6579fc66adaabbca6ceddb1f",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "657a018ddd0006ce5bc29fa4",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "657a05f6b5654ad24614a229",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "657a0894e5b6acd463cf5aac",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "657a0b3f420571d6a2208a18",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "657a0d3d9ce4e1d8794a3c14",
|
||||
"title": "Step 6"
|
||||
},
|
||||
{
|
||||
"id": "657a0ea50da0c8d9d6d7950a",
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "657a0fb4dab33fdaf82232c6",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "657a16a3e36c17e088e55c8b",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "657a19e477dc04e36a86dffc",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "657a1b8d2ff90ce56dc9c8dc",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "657a1d7a4da888e7acfbf9fd",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "657a218c34af9ceb661de044",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "649efc2e07fbb2012b69c5d4",
|
||||
"title": "Step 14"
|
||||
},
|
||||
{
|
||||
"id": "649f02123109440198becab7",
|
||||
"title": "Step 15"
|
||||
},
|
||||
{
|
||||
"id": "649f03f6f661fb01d98fcfd1",
|
||||
"title": "Step 16"
|
||||
},
|
||||
{
|
||||
"id": "649f0e6e081b80023d1b4fab",
|
||||
"title": "Step 17"
|
||||
},
|
||||
{
|
||||
"id": "649f0fb16b7e27027526f4da",
|
||||
"title": "Step 18"
|
||||
},
|
||||
{
|
||||
"id": "649f12c7c84ffb02b0fc7563",
|
||||
"title": "Step 19"
|
||||
},
|
||||
{
|
||||
"id": "657a34809aba0502807b1937",
|
||||
"title": "Step 20"
|
||||
},
|
||||
{
|
||||
"id": "657a3c9ace5a8d086cf2cd2f",
|
||||
"title": "Step 21"
|
||||
},
|
||||
{
|
||||
"id": "657a3ee8aa19b00ac3f78816",
|
||||
"title": "Step 22"
|
||||
},
|
||||
{
|
||||
"id": "64a1b343d112ec024cf2025f",
|
||||
"title": "Step 23"
|
||||
},
|
||||
{
|
||||
"id": "64a1b48cbd1c3102840cf715",
|
||||
"title": "Step 24"
|
||||
},
|
||||
{
|
||||
"id": "64a1b5a282d4b502ad83043a",
|
||||
"title": "Step 25"
|
||||
},
|
||||
{
|
||||
"id": "64a1b6a63614f002dce978ed",
|
||||
"title": "Step 26"
|
||||
},
|
||||
{
|
||||
"id": "64a2391ae5a6b3022bc1ce6e",
|
||||
"title": "Step 27"
|
||||
},
|
||||
{
|
||||
"id": "64a23a46c4dc89026019f8e4",
|
||||
"title": "Step 28"
|
||||
},
|
||||
{
|
||||
"id": "64a24015fe4fbd02a16cbbe7",
|
||||
"title": "Step 29"
|
||||
},
|
||||
{
|
||||
"id": "64a7bf43e7f374013d88b4e6",
|
||||
"title": "Step 30"
|
||||
},
|
||||
{
|
||||
"id": "64a7c1a836c47c016f5d9c99",
|
||||
"title": "Step 31"
|
||||
},
|
||||
{
|
||||
"id": "64a7c453d3ddbe01a194ddc1",
|
||||
"title": "Step 32"
|
||||
},
|
||||
{
|
||||
"id": "64a7cc96491a05022098d7b0",
|
||||
"title": "Step 33"
|
||||
},
|
||||
{
|
||||
"id": "64ae4d469444a0014fb1dc80",
|
||||
"title": "Step 34"
|
||||
},
|
||||
{
|
||||
"id": "64ae500423fa16018a83fa31",
|
||||
"title": "Step 35"
|
||||
},
|
||||
{
|
||||
"id": "64ae5180ff093301b90147cc",
|
||||
"title": "Step 36"
|
||||
},
|
||||
{
|
||||
"id": "64ae530773cd7001ebacc6c1",
|
||||
"title": "Step 37"
|
||||
},
|
||||
{
|
||||
"id": "64ae54048b468302209dd977",
|
||||
"title": "Step 38"
|
||||
},
|
||||
{
|
||||
"id": "64ae550d9fdb40025e5857ae",
|
||||
"title": "Step 39"
|
||||
},
|
||||
{
|
||||
"id": "64ae561e7f4217029684cefd",
|
||||
"title": "Step 40"
|
||||
},
|
||||
{
|
||||
"id": "64ae57bf4eac6002c85af0e0",
|
||||
"title": "Step 41"
|
||||
},
|
||||
{
|
||||
"id": "64ae5d8d2ae28b030cfd035e",
|
||||
"title": "Step 42"
|
||||
},
|
||||
{
|
||||
"id": "64ae6a43e797ab035c56d88b",
|
||||
"title": "Step 43"
|
||||
},
|
||||
{
|
||||
"id": "64ae6aff1af3780391f3a0a0",
|
||||
"title": "Step 44"
|
||||
},
|
||||
{
|
||||
"id": "64ae70794c6760043f553998",
|
||||
"title": "Step 45"
|
||||
},
|
||||
{
|
||||
"id": "64ae722962105404772b7618",
|
||||
"title": "Step 46"
|
||||
},
|
||||
{
|
||||
"id": "64ae74510e6aed04a975f72f",
|
||||
"title": "Step 47"
|
||||
},
|
||||
{
|
||||
"id": "64b457bb4cd0e2013d839c92",
|
||||
"title": "Step 48"
|
||||
},
|
||||
{
|
||||
"id": "64b45a195557d801660f07d5",
|
||||
"title": "Step 49"
|
||||
},
|
||||
{
|
||||
"id": "64b45d46f718ff01988c51ad",
|
||||
"title": "Step 50"
|
||||
},
|
||||
{
|
||||
"id": "64b8c2130652b4013da1cc8a",
|
||||
"title": "Step 51"
|
||||
},
|
||||
{
|
||||
"id": "64b8c3f6f4dfc701661fab4f",
|
||||
"title": "Step 52"
|
||||
}
|
||||
],
|
||||
"helpCategory": "JavaScript"
|
||||
}
|
||||
@@ -0,0 +1,289 @@
|
||||
---
|
||||
id: 649efc2e07fbb2012b69c5d4
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, push your `randomDice` value to the end of the `diceValuesArr` array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `push` method to add the `randomDice` value to the end of the `diceValuesArr` array.
|
||||
|
||||
```js
|
||||
assert.match(code, /diceValuesArr\.push\s*\(\s*randomDice\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
--fcc-editable-region--
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,299 @@
|
||||
---
|
||||
id: 649f02123109440198becab7
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to update the text content for all five of the dice displaying on the screen.
|
||||
|
||||
Use the `forEach` method on the `listOfAllDice` variable to loop through each of the dice. For the callback function, pass in a `dice` and `index` parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `forEach` loop on the `listOfAllDice` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /listOfAllDice\.forEach\s*\(.*\)/);
|
||||
```
|
||||
|
||||
Your callback function should have a `dice` and `index` parameter. Don't forget the parenthesis around the parameters.
|
||||
|
||||
```js
|
||||
assert.match(code, /listOfAllDice\.forEach\s*\(\s*\(\s*dice\s*,\s*index\s*\)\s*=>\s*{/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
```
|
||||
@@ -0,0 +1,299 @@
|
||||
---
|
||||
id: 649f03f6f661fb01d98fcfd1
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your callback function, use the `textContent` property on the `dice` parameter and assign it the value of `diceValuesArr[index]`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `textContent` property on the `dice` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /dice\s*\.\s*textContent\s*/);
|
||||
```
|
||||
|
||||
You should assign `diceValuesArr[index]` to `dice.textContent`.
|
||||
|
||||
```js
|
||||
assert.match(code, /dice\s*\.\s*textContent\s*=\s*diceValuesArr\s*\[\s*index\s*\]/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
```
|
||||
@@ -0,0 +1,309 @@
|
||||
---
|
||||
id: 649f0e6e081b80023d1b4fab
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is time to test out the `rollDice` function.
|
||||
|
||||
Add an `addEventListener()` method on the `rollDiceBtn` element and pass in a click event for the first argument and an empty arrow function for the second argument.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `addEventListener()` method on the `rollDiceBtn` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /rollDiceBtn\.addEventListener\s*\(\s*.*\s*/);
|
||||
```
|
||||
|
||||
You should have a click event for the first argument for the `addEventListener()` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /rollDiceBtn\.addEventListener\s*\(\s*('|"|`)\s*click\s*\1\s*/);
|
||||
```
|
||||
|
||||
You should have an empty arrow function for the second argument for the `addEventListener` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /rollDiceBtn\.addEventListener\s*\(\s*("|'|`)\s*click\s*\1,\s*\(\s*\)\s*=>\s*{\s*[\s\S]*\s*}\s*\);/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,319 @@
|
||||
---
|
||||
id: 649f0fb16b7e27027526f4da
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the game, you are allowed to roll the dice a maximum of three times per round.
|
||||
|
||||
Inside your callback function, add an `if` statement to check if `rolls` is strictly equal to the number `3`.
|
||||
|
||||
If the condition is true, show an `alert()` method to display the message `You have made three rolls this round. Please select a score.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*.*\s*\)\s*{/);
|
||||
```
|
||||
|
||||
Your `if` statement should check if `rolls` is strictly equal to `3`.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*rolls\s*===\s*3\s*\)\s*{/);
|
||||
```
|
||||
|
||||
You should have an `alert` inside your `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*rolls\s*===\s*3\s*\)\s*{\s*alert\s*\(/);
|
||||
```
|
||||
|
||||
Your `alert` message should say, `You have made three rolls this round. Please select a score.`
|
||||
|
||||
```js
|
||||
assert.match(code, /alert\s*\(\s*['"]\s*You\s+have\s+made\s+three\s+rolls\s+this\s+round\.\s+Please\s+select\s+a\s+score\.\s*['"]\s*\)\s*;?\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,316 @@
|
||||
---
|
||||
id: 649f12c7c84ffb02b0fc7563
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If the rolls limit has not been reached, then the user can still roll the dice.
|
||||
|
||||
Add an `else` clause below your `if` statement. Inside the `else` clause, increment `rolls` by one and then call the `rollDice` function.
|
||||
|
||||
Click on the "Roll the dice" button and you should see 5 random die values show up on the screen.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add have an `else` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /else\s*{\s*[\s\S]*\s*}/);
|
||||
```
|
||||
|
||||
You should increment `rolls` by `1` inside your `else` clause.
|
||||
|
||||
```js
|
||||
assert.match(code, /else\s*{\s*rolls\s*\+\+\s*[^}]*}/);
|
||||
```
|
||||
|
||||
You should call the `rollDice` function below `rolls++`.
|
||||
|
||||
```js
|
||||
assert.match(code, /else\s*{\s*rolls\s*\+\+\s*;?\s*rollDice\s*\(\s*\)\s*;?\s*}/m);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
}
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,324 @@
|
||||
---
|
||||
id: 64a1b343d112ec024cf2025f
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to add the functionality for allowing the user to toggle the display for the rules.
|
||||
|
||||
Start by adding an `addEventListener()` to the `rulesBtn` element. The `addEventListener()` should listen for a `click` event for the first argument and take in an empty arrow function for the second argument.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `addEventListener()` for your `rulesBtn` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /rulesBtn\.addEventListener\s*\(\s*.*\s*/);
|
||||
```
|
||||
|
||||
You should have a `click` event as the first argument to the `addEventListener` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /rulesBtn\.addEventListener\s*\(\s*('|"|`)\s*click\s*\1\s*/);
|
||||
```
|
||||
|
||||
You should have an arrow function as the second argument to the `addEventListener` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /rulesBtn\.addEventListener\s*\(\s*('|"|`)\s*click\s*\1\s*,\s*\(\s*[^)]*\)\s*=>/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,314 @@
|
||||
---
|
||||
id: 64a1b48cbd1c3102840cf715
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In order to toggle the display modal, you will need to flip the boolean value for the `isModalShowing` variable.
|
||||
|
||||
Inside your callback function, use the `logical NOT operator` to invert the value of the `isModalShowing` boolean.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `logical NOT operator(!)` to reassign the `isModalShowing` variable its inverted value.
|
||||
|
||||
```js
|
||||
assert.match(code, /isModalShowing\s*=\s*!\s*isModalShowing/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
|
||||
});
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,335 @@
|
||||
---
|
||||
id: 64a1b5a282d4b502ad83043a
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If the rules are currently showing, then you will want the button text to say "Hide rules".
|
||||
|
||||
Create an `if` statement that checks the truthy value of the `isModalShowing` variable. Inside the `if` statement, add the `textContent` property on `rulesBtn` element and assign it the string value of `Hide Rules`.
|
||||
|
||||
Below that, update the `display` property on `rulesContainer` and set it to `block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*.*\s*\)\s*{\s*.*\s*}\s*/);
|
||||
```
|
||||
|
||||
Your `if` statement should check if `isModalShowing` is truthy.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*isModalShowing\s*\)/);
|
||||
```
|
||||
|
||||
You should update the `textContent` property on `rulesBtn` to the string `Hide Rules`.
|
||||
|
||||
```js
|
||||
assert.match(code, /rulesBtn\.textContent\s*=\s*('|"|`)Hide Rules\1/);
|
||||
```
|
||||
|
||||
You should target the `display` property on `rulesContainer` and assign it the string value of `block`.
|
||||
|
||||
```js
|
||||
assert.match(code, /.*?if\s*\(isModalShowing\)\s*{\s*.*?rulesContainer\.style\.display\s*=\s*['"]block['"]/s);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
});
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,330 @@
|
||||
---
|
||||
id: 64a1b6a63614f002dce978ed
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If the modal is not showing then the button text should display as "Show rules" and the modal should be hidden.
|
||||
|
||||
Below your `if` statement, add an `else` statement. Inside your `else` statement, add the `textContent` property on `rulesBtn` and assign the string value of `Show Rules`.
|
||||
|
||||
Then, set the `display` property on `rulesContainer` and assign it the string value of `none`.
|
||||
|
||||
Test out your button and to see the rules toggle from shown to hidden.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should update the `textContent` property on `rulesBtn` to the string `Show Rules` inside an `else` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /else\s*{\s*.*?rulesBtn\.textContent\s*=\s*('|"|`)Show Rules\1/s);
|
||||
```
|
||||
|
||||
You should target the `display` property on `rulesContainer` and set it to `none` inside the `else` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /.*?else\s*{\s*.*?rulesContainer\.style\.display\s*=\s*['"]none['"]/s);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,330 @@
|
||||
---
|
||||
id: 64a2391ae5a6b3022bc1ce6e
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the game, the player has the chance to hit a small or large straight. A small straight is when four of the dice have consecutive values. A large straight is when all five dice have consecutive values.
|
||||
|
||||
To detect small and large straights, create an arrow function called `straightDetector` with a parameter of `arr`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a function called `straightDetector`.
|
||||
|
||||
```js
|
||||
assert.isFunction(straightDetector)
|
||||
```
|
||||
|
||||
Your function should be an arrow function with `arr` for the parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /.*?const\s+straightDetector\s*=\s*\(\s*arr\s*\)\s*=>\s*{?/s);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,358 @@
|
||||
---
|
||||
id: 64a23a46c4dc89026019f8e4
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To detect if the dice roll was a straight, you will first need to sort the numbers in ascending order.
|
||||
|
||||
Inside your `straightDetector` function, use the `sort` method on the `arr` parameter. For the callback function, pass in `a` and `b` for the parameters and `implicitly` return `a - b`.
|
||||
|
||||
Assign the entire result to a `const` named `sortNumbers`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `const` variable called `sortNumbers`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortNumbers\s*/);
|
||||
```
|
||||
|
||||
You should assign `arr` to `sortNumbers`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortNumbers\s*=\s*arr(.*)/);
|
||||
```
|
||||
|
||||
You should apply the `sort` method to the `arr` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortNumbers\s*=\s*arr\.sort\(.*\);?/);
|
||||
```
|
||||
|
||||
You should pass `a` and `b` as parameters to the `sort` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortNumbers\s*=\s*(?:arr\.sort\(\s*function\s*\(\s*a\s*,\s*b\s*\)\s*{\s*return\s*a\s*-\s*b\s*;?\s*}\s*\)|arr\.sort\(\s*\(a,\s*b\)\s*=>\s*a\s*-\s*b\s*\));?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const rulesBtn = document.getElementById("rules-btn");
|
||||
const rulesContainer = document.querySelector(".rules-container");
|
||||
const currentRoundText = document.getElementById("current-round");
|
||||
const currentRoundRollsText = document.getElementById("current-round-rolls");
|
||||
|
||||
let isModalShowing = false;
|
||||
|
||||
let diceValuesArr = [];
|
||||
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
let score = 0;
|
||||
let totalScore = 0;
|
||||
|
||||
function rollDice() {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
let randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function updateStats() {
|
||||
currentRoundRollsText.innerHTML = rolls;
|
||||
currentRoundText.innerHTML = round;
|
||||
}
|
||||
|
||||
function resetGame() {
|
||||
diceValuesArr = [0, 0, 0, 0, 0];
|
||||
score = 0;
|
||||
totalScore = 0;
|
||||
round = 1;
|
||||
rolls = 0;
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
|
||||
currentRoundRollsText.innerHTML = rolls;
|
||||
currentRoundText.innerHTML = round;
|
||||
}
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,337 @@
|
||||
---
|
||||
id: 64a24015fe4fbd02a16cbbe7
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using the `new Set()` constructor, create a set from `sortNumbers` and store it in a variable named `uniqueNumbers`. This will filter unique numbers from the `sortNumbers` array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `const` variable called `uniqueNumbers`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+uniqueNumbers/);
|
||||
```
|
||||
|
||||
You should assign an empty array to your `uniqueNumbers` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+uniqueNumbers\s*=\s*\[.*\]/);
|
||||
```
|
||||
|
||||
You should convert the `Set` back into an array using the following syntax: `[...new Set(sortNumbers)]`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+uniqueNumbers\s*=\s*\[\.\.\.new\s+Set\(\s*sortNumbers\s*\)\]/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,332 @@
|
||||
---
|
||||
id: 64a7bf43e7f374013d88b4e6
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You will join all the elements in the `uniqueNumbers` array into a string and store it in a variable named `stringifyArray`. This will be used to check if the user has rolled a small straight or a large straight.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `const` variable named `stringifyArray`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+stringifyArray\s*=?\s*;?/);
|
||||
```
|
||||
|
||||
You should assign `uniqueNumbers.join('')` to your `stringifyArray` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+stringifyArray\s*=?\s*uniqueNumbers\.join\(\s*['"]['"]\s*\);?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,347 @@
|
||||
---
|
||||
id: 64a7c1a836c47c016f5d9c99
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `const` variable named `smallStraightLogic` and store the string values `1234`, `2345` and `3456` in an array. This will be used to check if the user has rolled a small straight.
|
||||
|
||||
Similarly, create a `const` variable named `largeStraightLogic` and store the string values `12345` and `23456` in an array. This will be used to check if the user has rolled a large straight.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `const` variable named `smallStraightLogic`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+smallStraightLogic\s*=?\s*;?/);
|
||||
```
|
||||
|
||||
You should store the string values `1234`, `2345` and `3456` in an array and assign it to the `smallStraightLogic` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+smallStraightLogic\s*=?\s*\[\s*['"]1234['"]\s*,\s*['"]2345['"]\s*,\s*['"]3456['"]\s*\];?/);
|
||||
```
|
||||
|
||||
You should have a `const` variable named `largeStraightLogic`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+largeStraightLogic\s*/);
|
||||
```
|
||||
|
||||
You should store the string values `12345` and `23456` in an array and assign it to the `largeStraightLogic` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+largeStraightLogic\s*=?\s*\[\s*['"]12345['"]\s*,\s*['"]23456['"]\s*\];?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,345 @@
|
||||
---
|
||||
id: 64a7c453d3ddbe01a194ddc1
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to build out the functionality for displaying the options to select a score.
|
||||
|
||||
Create an arrow function named `updateRadioOption` and pass in two parameters named `optionNode` and `score`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a function named `updateRadioOption`.
|
||||
|
||||
```js
|
||||
assert.isFunction(updateRadioOption);
|
||||
```
|
||||
|
||||
Your `updateRadioOption` function should be an arrow function.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+updateRadioOption\s*=\s*\(.*\)\s*=>\s*{\s*}\s*/)
|
||||
```
|
||||
|
||||
Your `updateRadioOption` function should have two parameters named `optionNode` and `score`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+updateRadioOption\s*=\s*\(\s*optionNode\s*,\s*score\s*\)\s*=>\s*{\s*}\s*/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
}
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,339 @@
|
||||
---
|
||||
id: 64a7cc96491a05022098d7b0
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use the `optionNode` parameter to target the `scoreInputs` and set its `disabled` property to `false`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should target the `scoreInputs` using the `optionNode` argument.
|
||||
|
||||
```js
|
||||
assert.match(code, /scoreInputs\[\s*optionNode\s*\]/);
|
||||
```
|
||||
|
||||
You should set the `disabled` property of the `scoreInputs` to `false`.
|
||||
|
||||
```js
|
||||
assert.match(code, /scoreInputs\[\s*optionNode\s*\]\.disabled\s*=\s*false/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,340 @@
|
||||
---
|
||||
id: 64ae4d469444a0014fb1dc80
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, use the `optionNode` parameter to target the `scoreInputs` and set its `value` property to `score` parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should target the `scoreInputs` using the `optionNode` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /scoreInputs\[\s*optionNode\s*\]/);
|
||||
```
|
||||
|
||||
You should set the `value` property of the `scoreInputs[optionNode]` to `score` the parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /scoreInputs\[\s*optionNode\s*\]\.value\s*=\s*score/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert( "You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,341 @@
|
||||
---
|
||||
id: 64ae500423fa16018a83fa31
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Lastly, use the `optionNode` parameter to target the `scoreSpans` and set its `textContent` property to `, score = ${score}`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should target the `scoreSpans` using the `optionNode` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /scoreSpans\[\s*optionNode\s*\]/);
|
||||
```
|
||||
|
||||
You should set the `textContent` property of the `scoreSpans[optionNode]` to `, score = ${score}`.
|
||||
|
||||
```js
|
||||
assert.match(code, /scoreSpans\[\s*optionNode\s*\]\.textContent\s*=\s*`, score = \${score}`/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,343 @@
|
||||
---
|
||||
id: 64ae5180ff093301b90147cc
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use an `if` statement to check if `smallStraightLogic` includes the value of `stringifyArray` and if it does, then call the function `updateRadioOption` with arguments of `3` and `30`. The `3` represents the option node and the `30` represents the score.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an `if` statement that checks if `smallStraightLogic` includes the value of `stringifyArray`.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*smallStraightLogic\s*\.\s*includes\s*\(\s*stringifyArray\s*\)\s*\)\s*{/);
|
||||
```
|
||||
|
||||
You should call the function `updateRadioOption` with arguments of `3` and `30`.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*smallStraightLogic\s*\.\s*includes\s*\(\s*stringifyArray\s*\)\s*\)\s*{\s*updateRadioOption\s*\(\s*3\s*,\s*30\s*\)\s*;?\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,347 @@
|
||||
---
|
||||
id: 64ae530773cd7001ebacc6c1
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create another `if` statement to check if `largeStraightLogic` includes the value of `stringifyArray` and if it does, then call the function `updateRadioOption` with arguments of `4` and `40`. The `4` represents the option node and the `40` represents the score.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `if` statement that checks if `largeStraightLogic` includes the value of `stringifyArray`.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*largeStraightLogic\s*\.\s*includes\s*\(\s*stringifyArray\s*\)\s*\)\s*{/);
|
||||
```
|
||||
|
||||
You should call the function `updateRadioOption` with arguments of `4` and `40`.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*largeStraightLogic\s*\.\s*includes\s*\(\s*stringifyArray\s*\)\s*\)\s*{\s*updateRadioOption\s*\(\s*4\s*,\s*40\s*\)\s*;?\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,345 @@
|
||||
---
|
||||
id: 64ae54048b468302209dd977
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, call the `updateRadioOption` with the arguments `5` and `0`. This will work when the other 2 `if` statements are `false`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the function `updateRadioOption` with arguments of `5` and `0`.
|
||||
|
||||
```js
|
||||
assert.match(code, /updateRadioOption\s*\(\s*5\s*,\s*0\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,365 @@
|
||||
---
|
||||
id: 64ae550d9fdb40025e5857ae
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You need to run the newly created `straightDetector` function to see the results on the display. To do this, create an arrow function named `findRollResult` and set the argument to `arr`. Then, call the function `straightDetector` with the argument of `arr`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `findRollResult` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(findRollResult);
|
||||
```
|
||||
|
||||
Your `findRollResult` function should be an arrow function.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+findRollResult\s*=\s*\([\s\S]*\)\s*=>\s*{\s*[\s\S]*\s*};?/);
|
||||
```
|
||||
|
||||
Your `findRollResult` should have a parameter called `arr`.
|
||||
|
||||
```js
|
||||
assert.match(code, /(const\s*findRollResult\s*=\s*\(arr\)\s*=>\s*{|function\s*findRollResult\s*\(arr\)\s*{)/);
|
||||
```
|
||||
|
||||
You should call the function `straightDetector` with the argument of `arr`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*findRollResult\s*=\s*\(arr\)\s*=>\s*{\s*straightDetector\s*\(\s*arr\s*\);\s*};?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,350 @@
|
||||
---
|
||||
id: 64ae561e7f4217029684cefd
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the event listener for the `rollDiceBtn` button, call the `findRollResult` function passing `diceValuesArr` as the argument . This will display the results of the roll on the screen every time the user clicks the roll dice button.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the function `findRollResult` with the argument of `diceValuesArr`.
|
||||
|
||||
```js
|
||||
assert.match(code, /findRollResult\s*\(\s*diceValuesArr\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-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";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,358 @@
|
||||
---
|
||||
id: 64ae57bf4eac6002c85af0e0
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You need to create a function named `resetRadioOption` which will be used to reset the radio option.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `resetRadioOption` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(resetRadioOption);
|
||||
```
|
||||
|
||||
Your `resetRadioOption` should be an arrow function.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+resetRadioOption\s*=\s*\(.*\)\s*=>\s*{[\s\S]*};?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
findRollResult(diceValuesArr);
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,360 @@
|
||||
---
|
||||
id: 64ae5d8d2ae28b030cfd035e
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to use the `forEach` method to the `scoreInputs` array with a callback function with an argument named `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should apply the `forEach` method to the `scoreInputs` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /scoreInputs\.forEach/);
|
||||
```
|
||||
|
||||
You should apply a callback function to the `forEach` method with an argument called `input`.
|
||||
|
||||
```js
|
||||
assert.match(code, /scoreInputs\.forEach\(\s*(function\s*\(\s*input\s*\)|\(\s*input\s*\)\s*=>)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const resetRadioOption = () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
findRollResult(diceValuesArr);
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,362 @@
|
||||
---
|
||||
id: 64ae6a43e797ab035c56d88b
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `disabled` property of the `input` element to `true`, and set the `checked` property of the `input` element to `false`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `disabled` property of the `input` element to `true`
|
||||
|
||||
```js
|
||||
assert.match(code, /input\.disabled\s*=\s*true/);
|
||||
```
|
||||
|
||||
You should set the `checked` property of the `input` element to `false`.
|
||||
|
||||
```js
|
||||
assert.match(code, /input\.checked\s*=\s*false/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const resetRadioOption = () => {
|
||||
scoreInputs.forEach((input) => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
findRollResult(diceValuesArr);
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,370 @@
|
||||
---
|
||||
id: 64ae6aff1af3780391f3a0a0
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Apply the `forEach` method to the `scoreSpans` that you can target all the `span` elements in the `scoreInputs` element. Then apply a callback function with `span` as argument. Inside the callback function, set the `textContent` property of the `span` element to empty string.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should apply the `forEach` method to the `scoreSpans` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /scoreSpans\.forEach/);
|
||||
```
|
||||
|
||||
You should apply a callback function to the `forEach` method with argument of `span`.
|
||||
|
||||
```js
|
||||
assert.match(code, /scoreSpans\.forEach\(\s*(function\s*\(\s*span\s*\)|\(\s*span\s*\)\s*=>)/);
|
||||
```
|
||||
|
||||
You should set the `textContent` property of the `span` element to `""`.
|
||||
|
||||
```js
|
||||
assert.match(code, /span\.textContent\s*=\s*["']["']/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const resetRadioOption = () => {
|
||||
scoreInputs.forEach((input) => {
|
||||
input.disabled = true;
|
||||
input.checked = false;
|
||||
});
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
findRollResult(diceValuesArr);
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,377 @@
|
||||
---
|
||||
id: 64ae70794c6760043f553998
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next is to setup the functionality for the `keepScoreBtn`.
|
||||
|
||||
Start by adding an `addEventListener()` to your `keepScoreBtn`. For the first argument, pass in a `click` event and for the second argument pass in an empty callback function.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `addEventListener()` to your `keepScoreBtn` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /keepScoreBtn\.addEventListener\(\s*["']click["']/);
|
||||
```
|
||||
|
||||
Your `addEventListener()` should have a `click` event for the first argument.
|
||||
|
||||
```js
|
||||
assert.match(code, /keepScoreBtn\.addEventListener\(\s*["']click["']/);
|
||||
```
|
||||
|
||||
Your `addEventListener()` should have a callback function for the second argument.
|
||||
|
||||
```js
|
||||
assert.match(code, /keepScoreBtn\.addEventListener\(\s*["']click["']\s*,\s*(function|[^{]*=>\s*{)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const resetRadioOption = () => {
|
||||
scoreInputs.forEach((input) => {
|
||||
input.disabled = true;
|
||||
input.checked = false;
|
||||
});
|
||||
|
||||
scoreSpans.forEach((span) => {
|
||||
span.textContent = "";
|
||||
});
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
findRollResult(diceValuesArr);
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,371 @@
|
||||
---
|
||||
id: 64ae722962105404772b7618
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, declare two unassigned `let` variables named `selectedValue` and `achieved`. These will be used to store the selected value and the achieved value respectively.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `let` variable named `selectedValue`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s+selectedValue\s*;?/);
|
||||
```
|
||||
|
||||
You should have a `let` variable named `achieved`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s+achieved\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const resetRadioOption = () => {
|
||||
scoreInputs.forEach((input) => {
|
||||
input.disabled = true;
|
||||
input.checked = false;
|
||||
});
|
||||
|
||||
scoreSpans.forEach((span) => {
|
||||
span.textContent = "";
|
||||
});
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
findRollResult(diceValuesArr);
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
keepScoreBtn.addEventListener("click", () => {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,368 @@
|
||||
---
|
||||
id: 64ae74510e6aed04a975f72f
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `scoreInputs` is an array of radio input fields. Create a `for` loop to iterate through each element. Within the loop, create a variable named `radioButton` to represent the current element of the `scoreInputs` array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `for` of loop to iterate through the `scoreInputs` array. Within the loop, create a variable named `radioButton` to represent the current element of the `scoreInputs` array.
|
||||
|
||||
```js
|
||||
assert.match(code, /for\s*\(\s*(const|let|var)\s+radioButton\s+of\s+scoreInputs\s*\)\s*{\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const resetRadioOption = () => {
|
||||
scoreInputs.forEach((input) => {
|
||||
input.disabled = true;
|
||||
input.checked = false;
|
||||
});
|
||||
|
||||
scoreSpans.forEach((span) => {
|
||||
span.textContent = "";
|
||||
});
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
findRollResult(diceValuesArr);
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
keepScoreBtn.addEventListener("click", () => {
|
||||
let selectedValue;
|
||||
let achieved;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,390 @@
|
||||
---
|
||||
id: 64b457bb4cd0e2013d839c92
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the loop, use an `if` statement to check if the current element `radioButton` is checked using `.checked` property. If it is `true`, then reassign the `selectedValue` to `radioButton.value`.
|
||||
|
||||
Then, inside the `if` statement, reassign the `achieved` variable to `radioButton.id`. In the end, add a `break` statement to exit the loop.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an `if` statement to check if the current element `radioButton` is checked using `.checked` property.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*radioButton\s*\.\s*checked\s*\)\s*{\s*[^}]*\s*}/);
|
||||
```
|
||||
|
||||
you should reassign the `selectedValue` to `radioButton.value`.
|
||||
|
||||
```js
|
||||
assert.match(code, /selectedValue\s*=\s*radioButton\s*\.\s*value/);
|
||||
```
|
||||
|
||||
you should reassign the `achieved` variable to `radioButton.id`.
|
||||
|
||||
```js
|
||||
assert.match(code, /achieved\s*=\s*radioButton\s*\.\s*id/);
|
||||
```
|
||||
|
||||
You should add a `break` statement to exit the loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /break\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const resetRadioOption = () => {
|
||||
scoreInputs.forEach((input) => {
|
||||
input.disabled = true;
|
||||
input.checked = false;
|
||||
});
|
||||
|
||||
scoreSpans.forEach((span) => {
|
||||
span.textContent = "";
|
||||
});
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
findRollResult(diceValuesArr);
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
keepScoreBtn.addEventListener("click", () => {
|
||||
let selectedValue;
|
||||
let achieved;
|
||||
|
||||
for (const radioButton of scoreInputs) {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,394 @@
|
||||
---
|
||||
id: 64b45a195557d801660f07d5
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You should write an `if` statement to check against the `selectedValue` variable. Inside the `if` statement reassign `rolls` to `0`, increment `round` by `1`.Then, you will call the functions named `updateStats` and `resetRadioOption`. Finally, you will call the function named `updateScore` and pass in arguments `selectedValue` and `achieved`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an `if` statement to check against the `selectedValue` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*selectedValue\s*\)\s*{\s*[^}]*\s*}/);
|
||||
```
|
||||
|
||||
Inside the `if` statement, you will reassign `rolls` to `0`, increment `round` by `1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /.*if\s*\(\s*selectedValue\s*\)\s*{\s*rolls\s*=\s*0\s*;?\s*round\s*\+\+\s*;?.*}/s);
|
||||
```
|
||||
|
||||
You will call the functions named `updateStats` and `resetRadioOption`.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*selectedValue\s*\)\s*{\s*rolls\s*=\s*0\s*;?\s*round\s*\+\+\s*;?\s*updateStats\s*\(\s*\)\s*;?\s*resetRadioOption\s*\(\s*\).*}/s);
|
||||
```
|
||||
|
||||
You will call the function named `updateScore` and pass in arguments `selectedValue` and `achieved`.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*selectedValue\s*\)\s*{\s*rolls\s*=\s*0\s*;?\s*round\s*\+\+\s*;?\s*updateStats\s*\(\s*\)\s*;?\s*resetRadioOption\s*\(\s*\)\s*;?\s*updateScore\s*\(\s*selectedValue\s*,\s*achieved\s*\)\s*;?\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const resetRadioOption = () => {
|
||||
scoreInputs.forEach((input) => {
|
||||
input.disabled = true;
|
||||
input.checked = false;
|
||||
});
|
||||
|
||||
scoreSpans.forEach((span) => {
|
||||
span.textContent = "";
|
||||
});
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
findRollResult(diceValuesArr);
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
keepScoreBtn.addEventListener("click", () => {
|
||||
let selectedValue;
|
||||
let achieved;
|
||||
|
||||
for (const radioButton of scoreInputs) {
|
||||
if (radioButton.checked) {
|
||||
selectedValue = radioButton.value;
|
||||
achieved = radioButton.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,401 @@
|
||||
---
|
||||
id: 64b45d46f718ff01988c51ad
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create an `if` statement to check if the value of `round` is greater than `6`. Then, create a setTimeout function to show the alert message after 500 milliseconds. The alert message should be `Game over! Your total score is ${totalScore}`. After the alert message, call the `resetGame` function to reset the game.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an `if` statement to check if `round` is more than `6` or not.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*round\s*>\s*6\s*\)\s*{\s*[^}]*\s*}/);
|
||||
```
|
||||
|
||||
You should create a `setTimeout` function to show the alert message after 500 milliseconds.
|
||||
|
||||
```js
|
||||
assert.match(code, /setTimeout\s*\(\s*\(\)\s*=>\s*{\s*[\s\S]*?\s*}\s*,\s*500\s*\)/);
|
||||
```
|
||||
|
||||
You should use `alert` to show the alert message stating `Game over! Your total score is ${totalScore}` inside the setTimeout function.
|
||||
|
||||
```js
|
||||
assert.match(code, /setTimeout\s*\(\s*\(\s*\)\s*=>\s*{\s*[^}]*\balert\s*\(\s*`Game\s*Over!\s*Your\s*total\s*score\s*is\s*\${totalScore}`\s*\)[^}]*\s*}\s*,\s*500\s*\)/);
|
||||
```
|
||||
|
||||
You should call the `resetGame` function after the alert message.
|
||||
|
||||
```js
|
||||
assert.match(code, /setTimeout\s*\(\s*\(\s*\)\s*=>\s*{\s*alert\s*\(\s*`Game\s*Over!\s*Your\s*total\s*score\s*is\s*\${totalScore}`\s*\)\s*;\s*resetGame\s*\(\s*\);\s*},\s*500\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const resetRadioOption = () => {
|
||||
scoreInputs.forEach((input) => {
|
||||
input.disabled = true;
|
||||
input.checked = false;
|
||||
});
|
||||
|
||||
scoreSpans.forEach((span) => {
|
||||
span.textContent = "";
|
||||
});
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
findRollResult(diceValuesArr);
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
keepScoreBtn.addEventListener("click", () => {
|
||||
let selectedValue;
|
||||
let achieved;
|
||||
|
||||
for (const radioButton of scoreInputs) {
|
||||
if (radioButton.checked) {
|
||||
selectedValue = radioButton.value;
|
||||
achieved = radioButton.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedValue) {
|
||||
rolls = 0;
|
||||
round++;
|
||||
updateStats();
|
||||
resetRadioOption();
|
||||
updateScore(selectedValue, achieved);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,390 @@
|
||||
---
|
||||
id: 64b8c2130652b4013da1cc8a
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create an `else` statement and display `Please select an option or roll the dice` using `alert()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an `else` statement and display `Please select an option or roll the dice` using `alert()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /else\s*{\s*alert\s*\(\s*['"`]Please\s*select\s*an\s*option\s*or\s*roll\s*the\s*dice['"`]\s*\)\s*;?\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const resetRadioOption = () => {
|
||||
scoreInputs.forEach((input) => {
|
||||
input.disabled = true;
|
||||
input.checked = false;
|
||||
});
|
||||
|
||||
scoreSpans.forEach((span) => {
|
||||
span.textContent = "";
|
||||
});
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
findRollResult(diceValuesArr);
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
keepScoreBtn.addEventListener("click", () => {
|
||||
let selectedValue;
|
||||
let achieved;
|
||||
|
||||
for (const radioButton of scoreInputs) {
|
||||
if (radioButton.checked) {
|
||||
selectedValue = radioButton.value;
|
||||
achieved = radioButton.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedValue) {
|
||||
rolls = 0;
|
||||
round++;
|
||||
updateStats();
|
||||
resetRadioOption();
|
||||
updateScore(selectedValue, achieved);
|
||||
|
||||
if (round > 6) {
|
||||
setTimeout(() => {
|
||||
alert(`Game Over! Your total score is ${totalScore}`);
|
||||
resetGame();
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,770 @@
|
||||
---
|
||||
id: 64b8c3f6f4dfc701661fab4f
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a function named `updateScore` with 2 arguments named `selectedValue` and `achieved`. Then write a line of code that updates the totalScore variable by adding the integer value of the `selectedValue` argument to the `totalScore` variable.
|
||||
|
||||
Next, using the `innerHTMl` property, update the `totalScoreText` variable to display the `totalScore` variable. Finally, using the `innerHTML` property, set the `scoreHistory` to display `<li>${achieved} : ${selectedValue}</li>`
|
||||
|
||||
# --hints--
|
||||
|
||||
TODO: add tests in follow up PR
|
||||
|
||||
```js
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const resetRadioOption = () => {
|
||||
scoreInputs.forEach((input) => {
|
||||
input.disabled = true;
|
||||
input.checked = false;
|
||||
});
|
||||
|
||||
scoreSpans.forEach((span) => {
|
||||
span.textContent = "";
|
||||
});
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
findRollResult(diceValuesArr);
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
keepScoreBtn.addEventListener("click", () => {
|
||||
let selectedValue;
|
||||
let achieved;
|
||||
|
||||
for (const radioButton of scoreInputs) {
|
||||
if (radioButton.checked) {
|
||||
selectedValue = radioButton.value;
|
||||
achieved = radioButton.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedValue) {
|
||||
rolls = 0;
|
||||
round++;
|
||||
updateStats();
|
||||
resetRadioOption();
|
||||
updateScore(selectedValue, achieved);
|
||||
|
||||
if (round > 6) {
|
||||
setTimeout(() => {
|
||||
alert(`Game Over! Your total score is ${totalScore}`);
|
||||
resetGame();
|
||||
}, 500);
|
||||
}
|
||||
} else {
|
||||
alert("Please select an option or roll the dice");
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
const updateScore = (selectedValue, achieved) => {
|
||||
totalScore += parseInt(selectedValue);
|
||||
totalScoreText.innerHTML = totalScore;
|
||||
|
||||
scoreHistory.innerHTML += `<li>${achieved} : ${selectedValue}</li>`;
|
||||
};
|
||||
|
||||
const resetRadioOption = () => {
|
||||
scoreInputs.forEach((input) => {
|
||||
input.disabled = true;
|
||||
input.checked = false;
|
||||
});
|
||||
|
||||
scoreSpans.forEach((span) => {
|
||||
span.textContent = "";
|
||||
});
|
||||
};
|
||||
|
||||
const updateRadioOption = (optionNode, score) => {
|
||||
scoreInputs[optionNode].disabled = false;
|
||||
scoreInputs[optionNode].value = score;
|
||||
scoreSpans[optionNode].textContent = `, score = ${score}`;
|
||||
};
|
||||
|
||||
const straightDetector = (arr) => {
|
||||
const sortNumbers = arr.sort((a, b) => a - b);
|
||||
const uniqueNumbers = [...new Set(sortNumbers)];
|
||||
const stringifyArray = uniqueNumbers.join("");
|
||||
|
||||
const smallStraightLogic = ["1234", "2345", "3456"];
|
||||
const largeStraightLogic = ["12345", "23456"];
|
||||
|
||||
if (smallStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(3, 30);
|
||||
}
|
||||
|
||||
if (largeStraightLogic.includes(stringifyArray)) {
|
||||
updateRadioOption(4, 40);
|
||||
}
|
||||
|
||||
updateRadioOption(5, 0);
|
||||
}
|
||||
|
||||
const findRollResult = (arr) => {
|
||||
straightDetector(arr);
|
||||
};
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
updateStats();
|
||||
findRollResult(diceValuesArr);
|
||||
}
|
||||
});
|
||||
|
||||
rulesBtn.addEventListener("click", () => {
|
||||
isModalShowing = !isModalShowing;
|
||||
|
||||
if (isModalShowing) {
|
||||
rulesBtn.textContent = "Hide Rules";
|
||||
rulesContainer.style.display = "block";
|
||||
} else {
|
||||
rulesBtn.textContent = "Show Rules";
|
||||
rulesContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
keepScoreBtn.addEventListener("click", () => {
|
||||
let selectedValue;
|
||||
let achieved;
|
||||
|
||||
for (const radioButton of scoreInputs) {
|
||||
if (radioButton.checked) {
|
||||
selectedValue = radioButton.value;
|
||||
achieved = radioButton.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedValue) {
|
||||
rolls = 0;
|
||||
round++;
|
||||
updateStats();
|
||||
resetRadioOption();
|
||||
updateScore(selectedValue, achieved);
|
||||
|
||||
if (round > 6) {
|
||||
setTimeout(() => {
|
||||
alert(`Game Over! Your total score is ${totalScore}`);
|
||||
resetGame();
|
||||
}, 500);
|
||||
}
|
||||
} else {
|
||||
alert("Please select an option or roll the dice");
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,279 @@
|
||||
---
|
||||
id: 6579fc66adaabbca6ceddb1f
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this project, you will learn algorithmic thinking by building a dice game. There are a total of 6 rounds and for each round, the player can roll the dice up to 3 times and collect a score.
|
||||
|
||||
The HTML and CSS have been provided for you. Feel free to explore them.
|
||||
|
||||
When you are ready, use the `querySelectorAll` method to target all elements with the `class` of `die`, and assign that to a constant called `listOfAllDice`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `const` variable called `listOfAllDice`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*listOfAllDice\s*/);
|
||||
```
|
||||
|
||||
You should assign the `document.querySelectorAll()` method to the `listOfAllDice` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+listOfAllDice\s*=\s*document\.querySelectorAll\s*\(.*\);?/);
|
||||
```
|
||||
|
||||
You should target all elements with the `class` of `die` inside the `querySelectorAll` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*listOfAllDice\s*=\s*document\.querySelectorAll\s*\(\s*['"]\.die['"]\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,298 @@
|
||||
---
|
||||
id: 657a018ddd0006ce5bc29fa4
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to select all of the elements responsible for displaying the scores.
|
||||
|
||||
Use the `querySelectorAll()` method to access all of the `input` elements inside the `#score-options` `div` element and assign that result to a constant called `scoreInputs`.
|
||||
|
||||
Then use the `querySelectorAll()` method to access all of the `span` elements inside the `#score-options` `div` element and assign that result to a constant called `scoreInputs`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a variable named `scoreInputs`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+scoreInputs\s*/);
|
||||
```
|
||||
|
||||
You should assign the `document.querySelectorAll()` method to the `scoreInputs` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+scoreInputs\s*=\s*document\.querySelectorAll\(.*\)/);
|
||||
```
|
||||
|
||||
You should target all of the `input` elements inside the `#score-options` `div` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+scoreInputs\s*=\s*document\.querySelectorAll\(\s*['"]#score-options\s+input['"]\s*\)/);
|
||||
```
|
||||
|
||||
You should declare a variable named `scoreSpans`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+scoreSpans\s*/);
|
||||
```
|
||||
|
||||
You should assign the `document.querySelectorAll()` method to the `scoreSpans` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+scoreSpans\s*=\s*document\.querySelectorAll\(.*\);?/);
|
||||
```
|
||||
|
||||
You should target all of the `span` elements inside the `#score-options` `div` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+scoreSpans\s*=\s*document\.querySelectorAll\(\s*['"]#score-options\s+span['"]\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,288 @@
|
||||
---
|
||||
id: 657a05f6b5654ad24614a229
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, access the elements responsible for displaying the current round text.
|
||||
|
||||
Use `getElementById()` to access the element with the `id` of `current-round` and assign that to a constant called `currentRoundText`.
|
||||
|
||||
Then, use `getElementById()` to access the element with the `id` of `current-round-rolls` and assign that to a constant called `currentRoundRollsText`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `const` variable named `currentRoundText`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*currentRoundText\s*/);
|
||||
```
|
||||
|
||||
You should use `document.getElementById()` to target the `current-round` element and assign it to your `currentRoundText` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*currentRoundText\s*=\s*document\.getElementById\s*\(\s*['"]current-round['"]\s*\)\s*;?/s);
|
||||
```
|
||||
|
||||
You should declare a `const` variable named `currentRoundRollsText`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*currentRoundRollsText\s*/);
|
||||
```
|
||||
|
||||
You should use `document.getElementById()` to target the `current-round-rolls` element and assign it to your `currentRoundRollsText` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*currentRoundRollsText\s*=\s*document\.getElementById\s*\(\s*['"]current-round-rolls['"]\s*\)\s*;?/s);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,290 @@
|
||||
---
|
||||
id: 657a0894e5b6acd463cf5aac
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, access the elements responsible for displaying the score history and total text.
|
||||
|
||||
Use `getElementById()` to access the element with the `id` of `total-score` and assign that to a constant called `totalScoreText`.
|
||||
|
||||
Then, use `getElementById()` to access the element with the `id` of `score-history` and assign that to a constant called `scoreHistory`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `const` variable named `totalScoreText`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*totalScoreText\s*/);
|
||||
```
|
||||
|
||||
You should use `document.getElementById()` to target the `total-score` element and assign it to your `totalScoreText` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*totalScoreText\s*=\s*document\.getElementById\s*\(\s*['"]total-score['"]\s*\)\s*;?/s);
|
||||
```
|
||||
|
||||
You should declare a `const` variable named `scoreHistory`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*scoreHistory\s*/);
|
||||
```
|
||||
|
||||
You should use `document.getElementById()` to target the `score-history` element and assign it to your `scoreHistory` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*scoreHistory\s*=\s*document\.getElementById\s*\(\s*['"]score-history['"]\s*\)\s*;?/s);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,292 @@
|
||||
---
|
||||
id: 657a0b3f420571d6a2208a18
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, access the buttons that are responsible for keeping the score and rolling the dice.
|
||||
|
||||
Use `getElementById()` to access the element with the `id` of `roll-dice-btn` and assign that to a constant called `rollDiceBtn`.
|
||||
|
||||
Then, use `getElementById()` to access the element with the `id` of `keep-score-btn` and assign that to a constant called `keepScoreBtn`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a variable called `rollDiceBtn`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*rollDiceBtn\s*/);
|
||||
```
|
||||
|
||||
You should use `document.getElementById()` to target the `roll-dice-btn` element and assign it to your `rollDiceBtn` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+rollDiceBtn\s*=\s*document\.getElementById\s*\(\s*['"]\s*roll-dice-btn\s*['"]\s*\)/)
|
||||
```
|
||||
|
||||
You should use `const` to declare a variable called `keepScoreBtn`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*keepScoreBtn\s*/);
|
||||
```
|
||||
|
||||
You should use `document.getElementById()` to target the `keep-score-btn` element and assign it to your `keepScoreBtn` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+keepScoreBtn\s*=\s*document\.getElementById\s*\(\s*['"]\s*keep-score-btn\s*['"]\s*\)/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,294 @@
|
||||
---
|
||||
id: 657a0d3d9ce4e1d8794a3c14
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, you will need access the container used to display the rules and the rules button element.
|
||||
|
||||
Use `querySelector()` to access the element with the `class` of `rules-container` and assign that to a constant called `rulesContainer`.
|
||||
|
||||
Then, use `getElementById()` to access the element with the `id` of `rules-btn` and assign that to a constant called `rulesBtn`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a variable called `rulesContainer`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*rulesContainer\s*/);
|
||||
```
|
||||
|
||||
You should use `document.querySelector()` to target the `rules-container` element and assign it to your `rulesContainer` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*rulesContainer\s*=\s*document\.querySelector\s*\(\s*['"]\.rules\-container['"]\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare a variable called `rulesBtn`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*rulesBtn\s*/);
|
||||
```
|
||||
|
||||
You should use `document.getElementById()` to target the `rules-btn` element and assign it to your `rulesBtn` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+rulesBtn\s*=\s*document\.getElementById\s*\(\s*['"]\s*rules-btn\s*['"]\s*\)/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,282 @@
|
||||
---
|
||||
id: 657a0ea50da0c8d9d6d7950a
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When the user clicks on the "Show rules" button, they should be able to toggle between showing and hiding the game rules.
|
||||
|
||||
Use `let` to create a variable called `isModalShowing` and assign it the value of `false`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `let` to declare a variable named `isModalShowing`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s*isModalShowing\s*/);
|
||||
```
|
||||
|
||||
You should assign the boolean `false` to your `isModalShowing` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s*isModalShowing\s*=\s*false/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,284 @@
|
||||
---
|
||||
id: 657a0fb4dab33fdaf82232c6
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Each time the user rolls the dice, you will need to keep track of all of the dice values.
|
||||
|
||||
Use `let` to create a variable called `diceValuesArr` and assign it the value of an empty array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `let` variable called `diceValuesArr`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s*diceValuesArr\s*/);
|
||||
```
|
||||
|
||||
You should assign an empty array to your `diceValuesArr` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s*diceValuesArr\s*=\s*\[\s*\]\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 isModalShowing = false;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,323 @@
|
||||
---
|
||||
id: 657a16a3e36c17e088e55c8b
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Throughout the game, you will need to keep track of the current score, total score, number of rolls and which round the player is on.
|
||||
|
||||
Use `let` to declare three variables named `rolls`, `score`, and `totalScore` and set all of their values to the number `0`.
|
||||
|
||||
Then, use `let` to declare a variable named `round` and assign it the value `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `let` to declare a variable named `round`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s*round/);
|
||||
```
|
||||
|
||||
You should set the value of `round` to `1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /round\s*=\s*1/);
|
||||
```
|
||||
|
||||
You should use `let` to declare a variable named `rolls`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s*rolls/);
|
||||
```
|
||||
|
||||
You should set the value of `rolls` to `0`.
|
||||
|
||||
```js
|
||||
assert.match(code, /rolls\s*=\s*0/);
|
||||
```
|
||||
|
||||
You should use `let` to declare a variable named `score`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s*score/);
|
||||
```
|
||||
|
||||
You should set the value of `score` to `0`.
|
||||
|
||||
```js
|
||||
assert.match(code, /score\s*=\s*0/);
|
||||
```
|
||||
|
||||
You should use `let` to declare a variable named `totalScore`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s*totalScore/);
|
||||
```
|
||||
|
||||
You should set the value of `totalScore` to `0`.
|
||||
|
||||
```js
|
||||
assert.match(code, /totalScore\s*=\s*0/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,289 @@
|
||||
---
|
||||
id: 657a19e477dc04e36a86dffc
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Whenever the user rolls the dice, the dice display should update on the screen.
|
||||
|
||||
Create an arrow function called `rollDice` that does not take in any parameters.
|
||||
|
||||
# --hints--
|
||||
|
||||
`rollDice` should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(rollDice);
|
||||
```
|
||||
|
||||
`rollDice` should be an arrow function
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*const\s+rollDice\s*=\s*\(\s*\)\s*=>\s*{\s*}\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -0,0 +1,285 @@
|
||||
---
|
||||
id: 657a1b8d2ff90ce56dc9c8dc
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For each dice roll, you will need to clear out the previous dice values in the `diceValuesArr`.
|
||||
|
||||
Inside the `rollDice` function, reassign an empty array to the `diceValuesArr` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should reassign an empty array to your `diceValuesArr` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+rollDice\s*=\s*\(\s*\)\s*=>\s*{\s*diceValuesArr\s*=\s*\[\s*\]\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
const rollDice = () => {
|
||||
|
||||
};
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,304 @@
|
||||
---
|
||||
id: 657a1d7a4da888e7acfbf9fd
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When the user rolls the dice, you will need to generate 5 random numbers representing each of the dice values.
|
||||
|
||||
To start, create a `for` loop that will loop a total of 5 times.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `for` loop.
|
||||
|
||||
```js
|
||||
assert.match(code, /for\s*\(/)
|
||||
```
|
||||
|
||||
Your `for` loop should initialize `i` to `0`.
|
||||
|
||||
```js
|
||||
assert.match(code, /for\s*\(\s*let\s+i\s*=\s*0\s*;/);
|
||||
```
|
||||
|
||||
Your `for` loop should have a condition that checks if `i` is less than `5`.
|
||||
|
||||
```js
|
||||
assert.match(code, /for\s*\(\s*let\s*i\s*=\s*0\s*;\s*i\s*<\s*5\s*;/);
|
||||
```
|
||||
|
||||
Your `for` loop should increment `i` by `1` each time it runs.
|
||||
|
||||
```js
|
||||
assert.match(code, /for\s*\(\s*let\s*i\s*=\s*0\s*;\s*i\s*<\s*5\s*;\s*i\s*\+\+\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
};
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,312 @@
|
||||
---
|
||||
id: 657a218c34af9ceb661de044
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For each iteration of the `for` loop, you will need to generate a random number that represents one of the six possible values found on a dice.
|
||||
|
||||
Use `Math.random()` to generate a random number ranging between 1 and 6 inclusive. Make sure to round that result down to the nearest whole integer. Then assign the entire result to a `const` variable called `randomDice`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a variable named `randomDice` using the `const` keyword.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+randomDice\s*/);
|
||||
```
|
||||
|
||||
You should assign `Math.random()` to the variable named `randomDice`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+randomDice\s*=\s*.*Math\.random\s*\(\s*\)\s*/);
|
||||
```
|
||||
|
||||
You should multiply `Math.random()` by 6.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+randomDice\s*=\s*.*Math\.random\s*\(\s*\)\s*\*\s*6\s*/);
|
||||
```
|
||||
|
||||
You should use `Math.floor` to round the result down to the nearest whole number.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+randomDice\s*=\s*Math\.floor\s*\(\s*Math\.random\s*\(\s*\)\s*\*\s*6\s*\)\s*/);
|
||||
```
|
||||
|
||||
You should add `1` to the end result of your `randomDice` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+randomDice\s*=\s*Math\.floor\s*\(\s*Math\.random\s*\(\s*\)\s*\*\s*6\s*\)\s*\+\s*1\s*/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
|
||||
}
|
||||
};
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,312 @@
|
||||
---
|
||||
id: 657a34809aba0502807b1937
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If you try to roll the dice, you probably noticed that the `rolls` and `round` count do not change. You will need to update the text content for both of those values.
|
||||
|
||||
Start by creating an arrow function called `updateStats` that does not take in any parameters.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a function called `updateStats`.
|
||||
|
||||
```js
|
||||
assert.isFunction(updateStats);
|
||||
```
|
||||
|
||||
Your `updateStats` function should be an arrow function.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+updateStats\s*=\s*\(\s*\)\s*=>\s*{[\s\S]*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,326 @@
|
||||
---
|
||||
id: 657a3c9ace5a8d086cf2cd2f
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your `updateStats` function, update the text content for the `currentRoundRollsText` by assigning `rolls` to `currentRoundRollsText.textContent`.
|
||||
|
||||
Below that, update the text content for the `currentRoundText` by assigning `round` to `currentRoundText.textContent`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `textContent` property on the `currentRoundRollsText` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /.*?currentRoundRollsText\s*\.\s*textContent/);
|
||||
```
|
||||
|
||||
You should assign `rolls` to `currentRoundRollsText.textContent`.
|
||||
|
||||
```js
|
||||
assert.match(code, /.*?currentRoundRollsText\s*\.\s*textContent\s*=\s*rolls\s*;?/s);
|
||||
```
|
||||
|
||||
You should use the `textContent` property on the `currentRoundText` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /.*?currentRoundText\s*\.\s*textContent/);
|
||||
```
|
||||
|
||||
You should assign `round` to `currentRoundText.textContent`.
|
||||
|
||||
```js
|
||||
assert.match(code, /.*?currentRoundText\s*\.\s*textContent\s*=\s*round\s*;?/s);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
const updateStats = () => {
|
||||
|
||||
};
|
||||
--fcc-editable-region--
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,311 @@
|
||||
---
|
||||
id: 657a3ee8aa19b00ac3f78816
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To see the `round` and `rolls` values update on the screen, call your `updateStats` function inside the `else` clause.
|
||||
|
||||
Now try rolling the dice, and you should see the `rolls` value properly updating.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call your `updateStats` function inside the `else` clause.
|
||||
|
||||
```js
|
||||
assert.match(code, /updateStats\(\)/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced Dice Game</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Advanced Dice Game</h1>
|
||||
<button class="btn" id="rules-btn" type="button">Show rules</button>
|
||||
<div class="rules-container">
|
||||
<h2>Rules</h2>
|
||||
<ul>
|
||||
<li>There are total of six rounds</li>
|
||||
<li>You can only roll the dice three times per round</li>
|
||||
<li>To start the game, roll the dice</li>
|
||||
<li>
|
||||
Then, choose from one of the selected scores or roll the dice again
|
||||
</li>
|
||||
<li>
|
||||
If you choose a selected score, then you will move to the next round
|
||||
</li>
|
||||
<li>
|
||||
If you decline to choose a selected score, then you can roll the
|
||||
dice again two more times
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="points">Points</h2>
|
||||
<ul>
|
||||
<li>Three of a kind: Sum of all five dice</li>
|
||||
<li>Four of a kind: Sum of all five dice</li>
|
||||
<li>Full house: Three of a kind and a pair - 25 points</li>
|
||||
<li>
|
||||
Small straight: Four of the dice have consecutive values - 30 points
|
||||
</li>
|
||||
<li>
|
||||
Large straight: All five dice have consecutive values - 40 points
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form id="game">
|
||||
<div id="dice">
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
<div class="die"></div>
|
||||
</div>
|
||||
|
||||
<p class="rounds-text">
|
||||
<strong>Rolls:</strong> <span id="current-round-rolls">0</span> |
|
||||
<strong>Round:</strong> <span id="current-round">1</span>
|
||||
</p>
|
||||
|
||||
<div id="score-options">
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="three-of-a-kind" value="three-of-a-kind" disabled />
|
||||
<label for="three-of-a-kind">Three of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="four-of-a-kind" value="four-of-a-kind" disabled />
|
||||
<label for="four-of-a-kind">Four of a kind<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="full-house" value="full-house" disabled />
|
||||
<label for="full-house">Full house<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="small-straight" value="small-straight" disabled />
|
||||
<label for="small-straight">Small straight<span></span></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="large-straight" value="large-straight" disabled />
|
||||
<label for="large-straight">Large straight<span></span></label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="score-options" id="none" value="none" disabled />
|
||||
<label for="none">None of the above<span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="keep-score-btn" type="button">
|
||||
Keep the above selected score
|
||||
</button>
|
||||
<button class="btn" id="roll-dice-btn" type="button">
|
||||
Roll the dice
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="scores">
|
||||
<h3>Score history (Total score: <span id="total-score">0</span>)</h3>
|
||||
<ol id="score-history"></ol>
|
||||
</div>
|
||||
</main>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
|
||||
const rollDice = () => {
|
||||
diceValuesArr = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomDice = Math.floor(Math.random() * 6) + 1;
|
||||
diceValuesArr.push(randomDice);
|
||||
}
|
||||
|
||||
listOfAllDice.forEach((dice, index) => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRollsText.textContent = rolls;
|
||||
currentRoundText.textContent = round;
|
||||
};
|
||||
|
||||
|
||||
rollDiceBtn.addEventListener("click", () => {
|
||||
if (rolls === 3) {
|
||||
alert("You have made three rolls this round. Please select a score.");
|
||||
} else {
|
||||
rolls++;
|
||||
rollDice();
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
@@ -530,4 +530,4 @@
|
||||
"start": { "line": 1, "column": 1, "offset": 0 },
|
||||
"end": { "line": 89, "column": 1, "offset": 758 }
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user