mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat(curriculum): styling checkboxes workshop (#62607)
Co-authored-by: jdwilkin4 <jwilkin4@hotmail.com> Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com> Co-authored-by: Ilenia M <nethleen@gmail.com>
This commit is contained in:
Tim
@@ -2605,6 +2605,12 @@
|
||||
"In this lab, you'll design a contact form in HTML and style it using CSS."
|
||||
]
|
||||
},
|
||||
"workshop-game-settings-panel": {
|
||||
"title": "Build a Game Settings Panel",
|
||||
"intro": [
|
||||
"In this workshop, you will practice styling checkboxes by building a game settings panel."
|
||||
]
|
||||
},
|
||||
"lab-feature-selection": {
|
||||
"title": "Design a Feature Selection Page",
|
||||
"intro": [
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Build a Game Settings Panel
|
||||
block: workshop-game-settings-panel
|
||||
superBlock: full-stack-developer
|
||||
---
|
||||
|
||||
## Introduction to the Build a Game Settings Panel
|
||||
|
||||
This page is for the Build a Game Settings Panel
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 68e6a99a0fd7386fb66e156f
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
demoType: onLoad
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this workshop, you will practice styling checkboxes by building a game settings panel.
|
||||
|
||||
All of the HTML boilerplate (`DOCTYPE`, `html`, `head` and `body`) has been provided for you.
|
||||
|
||||
Within the `body`, create a `div` element with an `h1` element nested inside. Give the `h1` element the text `Game Settings`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `div` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("div"), 1);
|
||||
```
|
||||
|
||||
You should have an `h1` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("h1"), 1);
|
||||
```
|
||||
|
||||
Your `h1` element should be inside of your `div` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div")?.querySelector("h1"));
|
||||
```
|
||||
|
||||
Your `h1` element should have the text `Game Settings`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector("h1")?.textContent, /Game Settings/);
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 68e9a3194160f8f5620ddf21
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Immediately after your `h1` element, create four `label` elements.
|
||||
|
||||
Inside of each of the `label` elements, create an `input` element with the `type` attribute set to `"checkbox"`.
|
||||
|
||||
After each `input` element, give your `label` elements the following texts, in order: `Sound Effects`, `Background Music`, `Hard Mode`, and `Haptic Feedback`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have four `label` elements.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("label"), 4);
|
||||
```
|
||||
|
||||
Your first `label` element should have an `input` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll("label")[0]?.querySelector("input"));
|
||||
```
|
||||
|
||||
Your first `input` element should have the `type` attribute set to `checkbox`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelectorAll("label")[0]?.querySelector("input")?.type, "checkbox");
|
||||
```
|
||||
|
||||
Your first `label` element should have the text `Sound Effects`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll("label")[0]?.textContent, /Sound Effects/i);
|
||||
```
|
||||
|
||||
Your `Sound Effects` text should come after the `input` element.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll("label")[0]?.innerHTML, /\<input[^>]*>\s*Sound Effects/i)
|
||||
```
|
||||
|
||||
Your second `label` element should have an `input` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll("label")[1]?.querySelector("input"));
|
||||
```
|
||||
|
||||
Your second `input` element should have the `type` attribute set to `checkbox`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelectorAll("label")[1]?.querySelector("input")?.type, "checkbox");
|
||||
```
|
||||
|
||||
Your second `label` element should have the text `Background Music`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll("label")[1]?.textContent, /Background Music/i)
|
||||
```
|
||||
|
||||
Your `Background Music` text should come after the `input` element.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll("label")[1]?.innerHTML, /\<input[^>]*>\s*Background Music/i)
|
||||
```
|
||||
|
||||
Your third `label` element should have an `input` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll("label")[2]?.querySelector("input"));
|
||||
```
|
||||
|
||||
Your third `input` element should have the `type` attribute set to `checkbox`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelectorAll("label")[2]?.querySelector("input")?.type, "checkbox");
|
||||
```
|
||||
|
||||
Your third `label` element should have the text `Hard Mode`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll("label")[2]?.textContent, /Hard Mode/i)
|
||||
```
|
||||
|
||||
Your `Hard Mode` text should come after the `input` element.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll("label")[2]?.innerHTML, /\<input[^>]*>\s*Hard Mode/i)
|
||||
```
|
||||
|
||||
Your fourth `label` element should have an `input` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll("label")[3]?.querySelector("input"));
|
||||
```
|
||||
|
||||
Your fourth `input` element should have the `type` attribute set to `checkbox`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelectorAll("label")[3]?.querySelector("input")?.type, "checkbox");
|
||||
```
|
||||
|
||||
Your fourth `label` element should have the text `Haptic Feedback`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll("label")[3]?.textContent, /Haptic Feedback/i)
|
||||
```
|
||||
|
||||
Your `Haptic Feedback` text should come after the `input` element.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll("label")[3]?.innerHTML, /\<input[^>]*>\s*Haptic Feedback/i)
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h1>Game Settings</h1>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 68e9a4a47d8a9802cba886b7
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that the body has been styled, you are going to create a container card for the Game Settings panel. To start, create a class selector for `settings-card`.
|
||||
|
||||
This will be where all of your formatting for the container will go. Set the `max-width` to `250px` to define the overall size of your container.
|
||||
|
||||
Next, set your `padding` to `20px` so that your content has space between it and the border of the container.
|
||||
|
||||
After this, create a rounded edge by setting your `border-radius` to `10px`.
|
||||
|
||||
Then set a `box-shadow` with the values of `0 2px 6px rgba(0,0,0,0.2)`. This will create a subtle "lifted" look that will create depth for the container.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a class selector in your css for `settings-card`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(".settings-card"));
|
||||
```
|
||||
|
||||
You should add `max-width` property to the `.settings-card` class selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.maxWidth);
|
||||
```
|
||||
|
||||
You should have a `max-width` property with a value of `250px`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.maxWidth, "250px");
|
||||
```
|
||||
|
||||
You should add a `padding` property to the `.settings-card` class selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.padding);
|
||||
```
|
||||
|
||||
You should have a `padding` property with a value of `20px`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.padding, "20px");
|
||||
```
|
||||
|
||||
You should add a `border-radius` property to your `.settings-card` class selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.borderRadius);
|
||||
```
|
||||
|
||||
You should have a `border-radius` property with a value of `10px`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.borderRadius, "10px");
|
||||
```
|
||||
|
||||
You should add a `box-shadow` property to your `.settings-card` class selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.boxShadow);
|
||||
```
|
||||
|
||||
You should have a `box-shadow` with the value of `0 2px 6px rgba(0,0,0,0.2)`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.boxShadow, "rgba(0, 0, 0, 0.2) 0px 2px 6px");
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 68e9a54dd97fd9091e18acce
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now create an `h1` selector and set the `text-align` property with a value of `center`. This will center your `h1` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a type selector in your CSS for the `h1` element.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle("h1"));
|
||||
```
|
||||
|
||||
You should add a `text-align` property to your `h1` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("h1")?.textAlign);
|
||||
```
|
||||
|
||||
You should have a `text-align` property with a value of `center`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("h1")?.textAlign, "center");
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="settings-card">
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 250px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+116
@@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 68e9a6201e2efa142d62bfe1
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next up, you are going to enlarge the checkboxes for better visibility.
|
||||
|
||||
Begin by setting up a selector for `input`, but specifically targetting your `[type="checkbox"]`.
|
||||
|
||||
Within your selector, set the `width` and the `height` to `20px`. This makes it larger than it was before.
|
||||
|
||||
And to conform with your `cursor` setting that was set on the labels, add `cursor` and assign the value of `pointer` to it. After that, when you hover over the labels it will display a pointer.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a selector in your CSS of `input[type="checkbox"]`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]'));
|
||||
```
|
||||
|
||||
You should add a `width` property to your `input[type="checkbox]` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.width);
|
||||
```
|
||||
|
||||
You should have a `width` property with a value of `20px`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.width, "20px");
|
||||
```
|
||||
|
||||
You should add a `height` property to your `input[type="checkbox]` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.height);
|
||||
```
|
||||
|
||||
You should have a `height` property with a value of `20px`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.height, "20px");
|
||||
```
|
||||
|
||||
You should add a `cursor` property to your `input[type="checkbox]` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.cursor);
|
||||
```
|
||||
|
||||
You should have a `cursor` property with a value of `pointer`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.cursor, "pointer");
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="settings-card">
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 250px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 68e9a6bf1a74721a4e43e217
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you are going to remove the default checkbox that is applied by browsers. Inside of your `input[type='checkbox']` selector, add `appearance` with a value of `none`.
|
||||
|
||||
Setting the `appearance` property to `none` will clear the appearance the browser applies to checkboxes, allowing you to show the style you want.
|
||||
|
||||
After doing so, since the checkbox won't be visible anymore, set a `border` with `2px` `solid` and a hex code of `#f1be32`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `appearance` property to your `input[type="checkbox]` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.appearance);
|
||||
```
|
||||
|
||||
You should have an `appearance` property with a value of `none`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.appearance, "none");
|
||||
```
|
||||
|
||||
You should add a `border` property to your `input[type="checkbox]` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.border);
|
||||
```
|
||||
|
||||
You should have a `border` property with a value of `2px solid #f1be32`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.border, "2px solid rgb(241, 190, 50)");
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="settings-card">
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 250px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+123
@@ -0,0 +1,123 @@
|
||||
---
|
||||
id: 68e9a73075dc26207320811a
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you can see your checkbox again, you are going to finalize some styling options for it. Give them a rounded edge by adding a `border-radius` of `4px` to your `input[type="checkbox"]` selector.
|
||||
|
||||
Then give it a `background-color` of `white` to make the center of your checkbox stand out from the background of the container.
|
||||
|
||||
Since you are going to be setting up a custom transition for when a user clicks on the checkboxes, set a `transition` with the value of `all` and `0.3s` so that the transition happens smoothly over 0.3 seconds rather than instantly.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `border-radius` property to your `input[type="checkbox"]` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.borderRadius);
|
||||
```
|
||||
|
||||
You should have a `border-radius` property with a value of `4px`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.borderRadius, "4px");
|
||||
```
|
||||
|
||||
You should add a `background-color` property to your `input[type="checkbox"]` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.backgroundColor);
|
||||
```
|
||||
|
||||
You should have a `background-color` property with a value of `white`.
|
||||
|
||||
```js
|
||||
assert.oneOf(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.backgroundColor, ["white", "rgb(255,255,255)", "#ffffff"]);
|
||||
```
|
||||
|
||||
You should add a `transition` property to your `input[type="checkbox"]` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.transition);
|
||||
```
|
||||
|
||||
You should have `transition` with a value of `all 0.3s`.
|
||||
|
||||
```js
|
||||
/**
|
||||
* Because CSS is simply the most lovely thing to ever exist, the behaviour of the `all` shorthand does wonky things and will not show up
|
||||
* in the computed stylesheet. Instead, we need to query the actual style element and extract the selector, checking the properties as written
|
||||
* by the camper.
|
||||
* I really hate CSS.
|
||||
* <3 Naomi
|
||||
*/
|
||||
const { props } = document.querySelector('.fcc-injected-styles')?.innerText?.match(/input\[type=('|")checkbox\1\]\s*\{(?<props>.*)\}/s)?.groups;
|
||||
assert.match(props, /transition\s*\:\s*all\s+0.3\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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="settings-card">
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 250px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border: 2px solid #f1be32;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 68e9a7bd60c971278d2d4ffc
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In a pevious lesson you learned about pseudo-classes and pseudo-elements in CSS. You are going to apply that knowledge now by creating a combined type selector with pseudo-class selector.
|
||||
|
||||
First, start with the format for the type selector by setting it as `input[type="checkbox"]` and appending `:checked` to the end of it.
|
||||
|
||||
Next, give it a `background-color` with the value of `#f1be32`.
|
||||
|
||||
And lastly, set the `border-color` to have a value of `#e2a60d`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a combined type and pseudo-class selector of `input[type="checkbox"]:checked`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked'));
|
||||
```
|
||||
|
||||
You should add a `background-color` property to your combined type and pseudo-class selector of `input[type="checkbox"]:checked`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked')?.backgroundColor);
|
||||
```
|
||||
|
||||
You should have a `background-color` property with a value of `#f1be32`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked')?.backgroundColor, "rgb(241, 190, 50)");
|
||||
```
|
||||
|
||||
You should add a `border-color` property to your combined type and pseudo-class selector of `input[type="checkbox"]:checked`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked')?.borderColor);
|
||||
```
|
||||
|
||||
You should have a `border-color` property with a value of `#e2a60d`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked')?.borderColor, "rgb(226, 166, 13)");
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="settings-card">
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 250px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border: 2px solid #f1be32;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
transition: all 0.3s;
|
||||
vertical-align: middle;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 68e9a834dfef752dc35f6f90
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that your checkboxes change color when the user clicks them, you are going to apply some styling to make it a little more obvious that the checkbox has been selected.
|
||||
|
||||
First, create a new type selector of `input[type="checkbox"]` with the previous pseudo-class selector of `:checked` and add the pseudo-element selector of `::after`.
|
||||
This will specifically target what happens after the user has checked the box.
|
||||
|
||||
Next, add `content` with the value of `"✓"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a combined type selector with a pseudo-class selector and pseudo-element selector of `input[type="checkbox"]:checked::after`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after'));
|
||||
```
|
||||
|
||||
You should add a `content` property to your combined type selector with a pseudo-class selector and pseudo-element selector of `input[type="checkbox"]:checked::after`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.content);
|
||||
```
|
||||
|
||||
You should have a `content` property with a value of `"✓"`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.content, '"✓"');
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="settings-card">
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 250px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border: 2px solid #f1be32;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
transition: all 0.3s;
|
||||
vertical-align: middle;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked {
|
||||
background-color: #f1be32;
|
||||
border-color: #e2a60d;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 68ee86e3ee07b01626a392cc
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is time to add your newly created class `settings-card` class to your `div` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` should have a class of `settings-card`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector("div")?.className, "settings-card");
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
--fcc-editable-region--
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 250px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 68f1560aff1214103ab6b59b
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you will begin sprucing the page up with some CSS styling. Begin by creating the `body` selector.
|
||||
|
||||
Set the `body` to have a `height` property with a value of `100vh` and a `background-color` property with a value of `#f0f0f0`.
|
||||
|
||||
The `height` of `100vh` makes the `body` take up the full height of the browser viewport, while the light gray background color provides a subtle base for the page.
|
||||
|
||||
Lastly, set a `text-align` property with the value of `center`. This will center all inline-content contained within the page unless a child element overrides it with its own alignment.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `body` type selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle("body"));
|
||||
```
|
||||
|
||||
You should add the `height` property within the `body` type selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("body")?.height);
|
||||
```
|
||||
|
||||
You should have a `height` property with the value of `100vh`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("body")?.height, "100vh");
|
||||
```
|
||||
|
||||
You should add the `background-color` property within the `body` type selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("body")?.backgroundColor);
|
||||
```
|
||||
|
||||
You should have a `background-color` property with a value of `#f0f0f0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle("body")?.backgroundColor, "rgb(240, 240, 240)");
|
||||
```
|
||||
|
||||
You should add the `text-align` property within the `body` type selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("body")?.textAlign);
|
||||
```
|
||||
|
||||
You should have a `text-align` property with the value of `center`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("body")?.textAlign, "center");
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+115
@@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 68f15cd397503429f0345262
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the declaration for the `input[type="checkbox"]:checked::after` selector, set the `display` to `block`. Setting your `display` property as `block` makes the element a block-level element, meaning that it takes up the full width of its container and starts on a new line, allowing you to control its width, height, and spacing more easily.
|
||||
|
||||
Next, set `text-align` to `center`. This will center the inline content (like text, or inline elements) horizontally within the block. The block will still take up the full width of its container but everything inside it will be aligned to the center.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `display` property to your combined type selector with a pseudo-class selector and pseudo-element selector of `input[type="checkbox"]:checked::after`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.display);
|
||||
```
|
||||
|
||||
You should have a `display` property with a value of `block`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.display, "block");
|
||||
```
|
||||
|
||||
You should add a `text-align` property to your combined type selector with a pseudo-class selector and pseudo-element selector of `input[type="checkbox"]:checked::after`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.textAlign);
|
||||
```
|
||||
|
||||
You should have a `text-align` property with a value of `center`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.textAlign, "center");
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="settings-card">
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 250px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border: 2px solid #f1be32;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
transition: all 0.3s;
|
||||
vertical-align: middle;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked {
|
||||
background-color: #f1be32;
|
||||
border-color: #e2a60d;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::after {
|
||||
content: "✓";
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+107
@@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 68f15ef0446464325ce1aa45
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You need some spacing between the checkboxes and the labels. Begin by using the selector for `label` in your CSS and set a `display` property of `block`.
|
||||
|
||||
Next, set a `margin` property of `8px auto` to add vertical spacing between elements. This will create consistent spacing above and below each element, helping to separate content and improve readability.
|
||||
|
||||
Finally, set the `cursor` property to `pointer` on the `label` elements. This will change the cursor to a hand icon when a user hovers over a `label`, signaling that the element is clickable and improving the overall user experience.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a type selector in your CSS for `label`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle("label"));
|
||||
```
|
||||
|
||||
You should add a `display` property to your `label` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("label")?.display);
|
||||
```
|
||||
|
||||
You should have a `display` property with a value of `block`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("label")?.display, "block");
|
||||
```
|
||||
|
||||
You should add the `margin` property to your `label` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("label")?.margin);
|
||||
```
|
||||
|
||||
You should have a `margin` property with a value of `8px auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle("label")?.margin, "8px auto");
|
||||
```
|
||||
|
||||
You should add a `cursor` property to your `label` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("label")?.cursor);
|
||||
```
|
||||
|
||||
You should have a `cursor` property with a value of `pointer`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("label")?.cursor, "pointer");
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="settings-card">
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 250px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+211
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 68f16192e8a66f3b948d3ebd
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To finish setting up the visual effect of your checkbox, set the `font-weight` property with a value of `bold`. This will increase the visibility of the checkmark.
|
||||
|
||||
Now that this is easier to see, change the `color` to a value of `white`. This is going to change the color of the checkmark within the checkbox when it is checked.
|
||||
|
||||
Lastly, alter the `line-height` to a value of `20px`.
|
||||
|
||||
With that, you have completed the game settings panel!
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `font-weight` property to your combined type selector with a pseudo-class selector and pseudo-element selector of `input[type="checkbox"]:checked::after`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.fontWeight);
|
||||
```
|
||||
|
||||
You sould have a `font-weight` property with a value of `bold`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.fontWeight, "bold");
|
||||
```
|
||||
|
||||
You should add a `color` property to your combined type selector with a pseudo-class selector and pseudo-element selector of `input[type="checkbox"]:checked::after`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.color);
|
||||
```
|
||||
|
||||
You should have a `color` property with a value of `white`.
|
||||
|
||||
```js
|
||||
assert.oneOf(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.color, ["white", "#ffffff", "rgb(255,255,255)"]);
|
||||
```
|
||||
|
||||
You should add a `line-height` property to your combined type selector with a pseudo-class selector and pseudo-element selector of `input[type="checkbox"]:checked::after`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.lineHeight);
|
||||
```
|
||||
|
||||
You should have a `line-height` property with a value of `20px`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.lineHeight, "20px");
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="settings-card">
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 250px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border: 2px solid #f1be32;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
transition: all 0.3s;
|
||||
vertical-align: middle;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked {
|
||||
background-color: #f1be32;
|
||||
border-color: #e2a60d;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::after {
|
||||
content: "✓";
|
||||
display: block;
|
||||
text-align: center;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="settings-card">
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 250px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border: 2px solid #f1be32;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
transition: all 0.3s;
|
||||
vertical-align: middle;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked {
|
||||
background-color: #f1be32;
|
||||
border-color: #e2a60d;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked:after {
|
||||
content: '✓';
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
+106
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 68f29753fd5524530c6e65c8
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, set a `vertical-align` property with a value of `middle`.
|
||||
|
||||
The `vertical-align` property controls how `inline` or `inline-block` elements align vertically with the surrounding text or other inline elements. It's often used to adjust the vertical position of elements like images, icons, or text within a line.
|
||||
|
||||
Then finalize your checkbox with a `margin` property of `15px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `vertical-align` property to your `input[type="checkbox"]` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.verticalAlign);
|
||||
```
|
||||
|
||||
You should have a `vertical-align` property with a value of `middle`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.verticalAlign, "middle");
|
||||
```
|
||||
|
||||
You should add a `margin-right` property to your `input[type="checkbox"]` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.marginRight);
|
||||
```
|
||||
|
||||
You should have a `margin-right` property with a value of `15px`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.marginRight, "15px");
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="settings-card">
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 250px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border: 2px solid #f1be32;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
transition: all 0.3s;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 68f29dbf9125476b4808d6fb
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `.settings-card` set the `margin` property to `auto`.
|
||||
|
||||
Setting the `margin` property to `auto` automatically adjusts the margins of an element to evenly distribute the remaining space in its container, commonly used to center block-level elements horizontally.
|
||||
|
||||
And last, set a `text-align` property with the value of `left`. This will align the inline content, such as text, to the left side of its containing element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `margin` property to the `settings-card` class selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.margin);
|
||||
```
|
||||
|
||||
You should have a `margin` property with a value of `auto`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.margin, "auto");
|
||||
```
|
||||
|
||||
You should add a `text-align` property to the `settings-card` class selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.textAlign);
|
||||
```
|
||||
|
||||
You should have a `text-align` property with a value of `left`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.textAlign, "left");
|
||||
```
|
||||
|
||||
# --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>Game Settings Panel</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
<label> <input type="checkbox" />Hard Mode</label>
|
||||
<label> <input type="checkbox" />Haptic feedback</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 250px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "Design a Feature Selection Page",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"dashedName": "lab-feature-selection",
|
||||
"helpCategory": "HTML-CSS",
|
||||
"blockLayout": "link",
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "Build a Game Settings Panel",
|
||||
"isUpcomingChange": false,
|
||||
"dashedName": "workshop-game-settings-panel",
|
||||
"helpCategory": "HTML-CSS",
|
||||
"blockLayout": "challenge-grid",
|
||||
"challengeOrder": [
|
||||
{ "id": "68e6a99a0fd7386fb66e156f", "title": "Step 1" },
|
||||
{ "id": "68e9a3194160f8f5620ddf21", "title": "Step 2" },
|
||||
{ "id": "68f1560aff1214103ab6b59b", "title": "Step 3" },
|
||||
{ "id": "68e9a4a47d8a9802cba886b7", "title": "Step 4" },
|
||||
{ "id": "68f29dbf9125476b4808d6fb", "title": "Step 5" },
|
||||
{ "id": "68ee86e3ee07b01626a392cc", "title": "Step 6" },
|
||||
{ "id": "68e9a54dd97fd9091e18acce", "title": "Step 7" },
|
||||
{ "id": "68f15ef0446464325ce1aa45", "title": "Step 8" },
|
||||
{ "id": "68e9a6201e2efa142d62bfe1", "title": "Step 9" },
|
||||
{ "id": "68e9a6bf1a74721a4e43e217", "title": "Step 10" },
|
||||
{ "id": "68e9a73075dc26207320811a", "title": "Step 11" },
|
||||
{ "id": "68f29753fd5524530c6e65c8", "title": "Step 12" },
|
||||
{ "id": "68e9a7bd60c971278d2d4ffc", "title": "Step 13" },
|
||||
{ "id": "68e9a834dfef752dc35f6f90", "title": "Step 14" },
|
||||
{ "id": "68f15cd397503429f0345262", "title": "Step 15" },
|
||||
{ "id": "68f16192e8a66f3b948d3ebd", "title": "Step 16" }
|
||||
],
|
||||
"blockType": "workshop",
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true
|
||||
}
|
||||
@@ -155,6 +155,7 @@
|
||||
"lecture-best-practices-for-styling-forms",
|
||||
"workshop-registration-form",
|
||||
"lab-contact-form",
|
||||
"workshop-game-settings-panel",
|
||||
"lab-feature-selection",
|
||||
"review-styling-forms",
|
||||
"quiz-styling-forms"
|
||||
|
||||
Reference in New Issue
Block a user