Design a Feature Selection Page - Design a Feature Selection Page

Curriculum Help
,
1

Tell us what’s happening:

I’m looking to figure out why my checkbox isn’t happy
question 14 - when the checkbox is checked, the background coloe of the checkbox should change to a color of your choosing…

I kknow its so obvious to some but I’m learning!!!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Selection Feature Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>Feature Selection</h1>
<div class="feature-card-container">
    <label class="feature-card">Cloud Storage <input type="checkbox"></label>

    <label class="feature-card">Advanced Analytics <input type="checkbox"></label>

    <label class="feature-card">Advanced Analytics <input type="checkbox"></label>

    <label class="feature-card">Advanced Analytics <input type="checkbox"></label>

    <label class="feature-card">Advanced Analytics <input type="checkbox"></label>

    <label class="feature-card">Advanced Analytics <input type="checkbox"></label>


</div>
</body>

</html>

/* file: styles.css */
body {
  background-color: midnightblue; 
  color: white; 
  text-align: center;
   display:flex; 
  justify-content: center; 
  align-items: center; 
  flex-direction:column; 
}
.feature-card-container {
  padding: 10px 20px; 
  margin: 20px; 
  background-color: lightblue; 
  width: 300px; 
  display: grid; 
  grid-template-colums: 1fr 1fr; 
  gap: 10px; 
  justify-items: start; 
}
label {
  padding: 10px 20px; 
  margin: 10px; 
  display: inline-flex; 
  align-items: center; 
  gap: 5px; 
}
input[type="checkbox"] {
  appearance: none; border-width: 10px; 
  border: 2px solid purple; 
  width: 20px; 
  height: 20px; 
  cursor: pointer; 
}
input[type="checkbox"] {
  background-color: lightblue; 
  border-color: blue; 
}
input[type="checkbox"]:checked::after{ 
  content:"✓"; 
  display:block; 
  text-align: center; 
  background-color: pink; 
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36 Edg/149.0.0.0

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Tell us what’s happening:

  1. When the checkbox is checked, the background color of the checkbox should change to a color of your choosing.
    Failed:15. When the checkbox is checked, the border color of the checkbox should change to a color of your choosing.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Selection Feature Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>Feature Selection</h1>
<div class="feature-card-container">
    <label class="feature-card">Cloud Storage <input type="checkbox"></label>

    <label class="feature-card">Advanced Analytics <input type="checkbox"></label>

    <label class="feature-card">Advanced Analytics <input type="checkbox"></label>

    <label class="feature-card">Advanced Analytics <input type="checkbox"></label>

    <label class="feature-card">Advanced Analytics <input type="checkbox"></label>

    <label class="feature-card">Advanced Analytics <input type="checkbox"></label>


</div>
</body>

</html>

/* file: styles.css */
body {
  background-color: midnightblue; 
  color: white; 
  text-align: center;
   display:flex; 
  justify-content: center; 
  align-items: center; 
  flex-direction:column; 
}
.feature-card-container {
  padding: 10px 20px; 
  margin: 20px; 
  background-color: lightblue; 
  width: 300px; 
  display: grid; 
  grid-template-colums: 1fr 1fr; 
  gap: 10px; 
  justify-items: start; 
}
label {
  padding: 10px 20px; 
  margin: 10px; 
  display: inline-flex; 
  align-items: center; 
  gap: 5px; 
}
input[type="checkbox"] {
  appearance: none; border-width: 10px; 
  border: 2px solid purple; 
  width: 20px; 
  height: 20px; 
  cursor: pointer; 
}
input[type="checkbox"] {
  background-color: lightblue; 
  border-color: blue; 
}
input[type="checkbox"]:checked::after{ 
  content:"✓"; 
  display:block; 
  text-align: center; 
  background-color: pink; 
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36 Edg/149.0.0.0

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md at main · freeCodeCamp/freeCodeCamp · GitHub

3

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

4

sorry, couldn’t find the first one.

5

you have two for the checkboxes, where is the one for the checked checkboxes?