mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-10-13 08:32:54 +08:00
refactor: workshop game settings panel step order (#63884)
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
This commit is contained in:
Fernando Belmonte Archetti
co-authored by
majestic-owl448
majestic-owl448
parent
a202702795
commit
a728840a00
+6
-62
@@ -7,70 +7,16 @@ 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`.
|
||||
Now that the body has been styled, you are going to create a container card for the Game Settings panel.
|
||||
|
||||
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.
|
||||
To start, add a class of `settings-card` to your `div` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a class selector in your css for `settings-card`.
|
||||
Your `div` should have a class of `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");
|
||||
assert.strictEqual(document.querySelector("div")?.className, "settings-card");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@@ -87,7 +33,9 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.b
|
||||
<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>
|
||||
@@ -104,8 +52,4 @@ body {
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
+29
-8
@@ -7,14 +7,36 @@ dashedName: step-6
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is time to add your newly created class `settings-card` class to your `div` element.
|
||||
Within your `.settings-card` selector 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--
|
||||
|
||||
Your `div` should have a class of `settings-card`.
|
||||
You should add a `margin` property to the `settings-card` class selector.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector("div")?.className, "settings-card");
|
||||
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--
|
||||
@@ -31,9 +53,7 @@ assert.strictEqual(document.querySelector("div")?.className, "settings-card");
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
--fcc-editable-region--
|
||||
<div class="settings-card">
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
@@ -56,7 +76,8 @@ body {
|
||||
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--
|
||||
}
|
||||
```
|
||||
|
||||
+46
-18
@@ -7,36 +7,70 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `.settings-card` set the `margin` property to `auto`.
|
||||
Now it is time to style the `settings-card` container. Create a class selector for `settings-card`.
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
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.
|
||||
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 add a `margin` property to the `settings-card` class selector.
|
||||
You should have a class selector in your css for `settings-card`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.margin);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(".settings-card"));
|
||||
```
|
||||
|
||||
You should have a `margin` property with a value of `auto`.
|
||||
You should add `max-width` property to the `.settings-card` class selector.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.margin, "auto");
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.maxWidth);
|
||||
```
|
||||
|
||||
You should add a `text-align` property to the `settings-card` class selector.
|
||||
You should have a `max-width` property with a value of `250px`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.textAlign);
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.maxWidth, "250px");
|
||||
```
|
||||
|
||||
You should have a `text-align` property with a value of `left`.
|
||||
You should add a `padding` property to the `.settings-card` class selector.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.textAlign, "left");
|
||||
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--
|
||||
@@ -53,7 +87,7 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.t
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div class="settings-card">
|
||||
<h1>Game Settings</h1>
|
||||
<label> <input type="checkbox" />Sound Effects</label>
|
||||
<label> <input type="checkbox" />Background Music</label>
|
||||
@@ -71,13 +105,7 @@ body {
|
||||
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--
|
||||
}
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user