Survey Form - Build a Survey Form

Tell us what’s happening:
I’m still working on the project and I had a question. Is it possible for me to not allow the user to choose the same option in my separate select elements?

For example in my code I’m trying to get feedback on which one of our cookies is customer’s favorite and which one of our cookies is customer’s least favorite. I hope my code is readable enough for anyone that can help me :smiley:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div> 

      <!--Title and small description-->

      <header>
        <h1 id="title">Cookie Corporation Customer Satisfaction Survey</h1>
        <p id="description">Help us make exquisite cookies</p>
      </header>

      <!--Survey form-->

      <form id="survey-form">

        <!--Customer name-->

        <div>
          <label id="name-label" for="name">Name
          <input id="name" name="customer-name" type="text" placeholder="Enter your name" required>
        </div>

        <!--Customer email-->

        <div>
          <label id="email-label" for="email">Email
          <input id="email" name="customer-email" type="email" placeholder="Enter your email" required>
        </div>

        <!--Customer age-->

        <div>
          <label id="number-label" for="number">Age(Optional)
          <input id="number" name="customer-age" type="number" placeholder="Enter your age" min="12" max="122">
         </div>

         <!--Dropdown list of customer's favorite cookie select-->

         <div>
          <p>Which one of our cookies is your favorite?</p>
          <select id="dropdown-favorite">
            <option disabled value="best-cookie">Select your favorite cookie</option>
            <option value="Snickerdoodles">Snickerdoodles</option>
            <option value="Chocolate Chip Cookies">Chocolate Chip Cookies</option>
            <option value="Oatmeal Raisin Cookies">Oatmeal Raisin Cookies
</option>
            <option value="Gingersnaps">Gingersnaps</option>
            <option value="Shortbread Cookies">Shortbread Cookies
</option>
            <option value="Peanut Butter Cookies">Peanut Butter Cookies
</option>
         </select>
         </div>

         <!--Dropdown list of customer's least favorite cookie select-->

         <div>
          <p>Which one of our cookies is your least favorite?</p>
          <select id="dropdown-least-favorite">
            <option disabled value="worst-cookie">Select your least favorite cookie</option>
            <option value="Snickerdoodles">Snickerdoodles</option>
            <option value="Chocolate Chip Cookies">Chocolate Chip Cookies</option>
            <option value="Oatmeal Raisin Cookies">Oatmeal Raisin Cookies
</option>
            <option value="Gingersnaps">Gingersnaps</option>
            <option value="Shortbread Cookies">Shortbread Cookies
</option>
            <option value="Peanut Butter Cookies">Peanut Butter Cookies
</option>
         </select>
         </div>

         <!--Radio elements where user is asked if they would recommend us-->

         <div>
           <p>Would you recommend our cookies to your friends?</p>
           <input value="positive-feedback" name="yes" type="radio" id="positive">Yes</input>
           <input value="neutral-feedback" name="not really sure" type="radio" id="neutral">Not really sure</input>
           <input value="negative-feedback" name="no" type="radio" id="negative">No</input>
         </div>

  </body>
</html>
/* file: styles.css */
html{
  background-color: black;
  color: rgb(0, 254, 0)
}
body{
  background-color: black;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

it’s doable, but not with just html and css, so maybe a bit outside of the scope of the project

Alright I’ll scrap the idea then thank you for quick response :+1: