ContextQMD
Back to Freecodecamp

Step 9

curriculum/challenges/english/blocks/workshop-game-settings-panel/68e9a6201e2efa142d62bfe1.md

latest2.7 KB
Original Source

--description--

Next up, you are going to enlarge the checkboxes for better visibility.

Begin by setting up a selector for input, but specifically targeting 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 checkboxes 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--