Survey Form

index.html

  <main id="main">
    <header class="header">
      <h1 id="title">pc_SellerForm 💻 </h1>
      <p id="description">Rate your PC and get the highest price for it</p>
      <hr>
    </header>
    <form action="" id="survey-form">
      <div class="contact">
      <div id="data-send" class="form-group">
          
            <label id="name-label" for="name">Name</label>
            <input
              type="text"
              name="name"
              id="name"
              class="form-control"
              placeholder="Enter your name"
              required
            />
            <label id="email-label" for="email">Email</label>
            <input
            type="email"
            name="email"
            id="email"
            class="form-control"
            placeholder="Enter your Email"
            required
            />
            <label id="number-label" for="number"
            >How much u want?<span class="clue">(optional)</span></label
            >
            <input
            type="number"
            name="money-back"
            id="number"
            min="0"
            max="3000"
            class="form-control"
            placeholder="In € please"
            />
            
            <label id="want-label" for="number"
            >Want a Change?</label
            >
            <select id="dropdown" name="role" class="form-control" required>
              <option disabled selected value></option>
              <option value="student">Yes!</option>
              <option value="job">No!</option>
              <option value="learner">Don't Know...</option>

            </select>
            <textarea name="comment" id="comment-label"  placeholder="Something more?"></textarea>
            <div class="form-button">
              <button type="submit" id="submit" class="submit-button" >
                Get Your Price
              </button>

          </div>
        </div>

      </div>

      <section class="subpart-1">
        <h4 class="subtitle span">
          Brand of the PC?<br>
          <span class="clue">(Just Select One)</span>
        </h4>
        <div id="check" class="form-group">
  
          <label><input name="prefer" value="Asus" type="checkbox" class="input-checkbox" />Asus</label>
          <label><input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Acer</label>
          <label><input name="prefer" value="data-visualization" type="checkbox" class="input-checkbox" />Apple</label>
          <label><input name="prefer" value="challenges" type="checkbox" class="input-checkbox" />Dell</label>
          <label><input name="prefer" value="open-source-community" type="checkbox"class="input-checkbox" />Lenovo</label>
          <label><input name="prefer" value="gitter-help-rooms" type="checkbox" class="input-checkbox" />Microsoft</label>
          <label><input name="prefer" value="videos" type="checkbox" class="input-checkbox" />HP</label>
          <label><input name="prefer" value="city-meetups" type="checkbox" class="input-checkbox" />LG</label>
          <label><input name="prefer" value="wiki" type="checkbox" class="input-checkbox" />Samsung</label>
          <label><input name="prefer" value="forum" type="checkbox" class="input-checkbox" />Toshiba</label>
          <label><input name="prefer" value="additional-courses" type="checkbox" class="input-checkbox" />Xiaomi</label>
          <label><input name="prefer" value="non-know" type="checkbox" class="input-checkbox" />Not Know</label>
        </div>

      </section>

      <section class="subpart-2">

        <div >
          
          <h4 class="subtitle">
            Kind of Computer?
          </h4>
          <select name="mostKind" class="form-control" required>
            <option disabled selected value></option>
            <option value="challenges">Laptop</option>
            <option value="projects">Pc</option>
            <option value="community">Mini</option>
            <option value="openSource">Server</option>
          </select>
  
          <h4 class="subtitle">
            State of Computer?
          </h4>
          <select id="most-like" name="mostLike" class="form-control" required>
            <option disabled selected value></option>
            <option value="challenges">Perfect</option>
            <option value="projects">Great</option>
            <option value="community">Bad</option>
            <option value="openSource">Very Poor</option>
          </select>
          <div class="form-group">
            <h4  class="subtitle">Original Price</h4>
            <label id="number-label"></label>
            <input type="number" name="number" id="number" min="0" max="2500" step="100" class="form-control" placeholder="€?" required/>

          </div>
      </section>

      <section class="subpart-3">
        <div class="form-group">

          <h4 class="subtitle">Brand Processor</h4>
          
          <select name="brand-processor" id="brand" class="form-control">
            <option value="" selected="selected">Amd/Intel</option>
          </select>
          <h4 class="subtitle">Generation Processor</h4>
          <select name="generation-process" id="gene" class="form-control">
            <option value="" selected="selected">Select A Brand</option>
          </select>
         
          <h4 class="subtitle">Graphic Brand/Memory</h4>
          <select name="graphic-memo" id="memo" class="form-control">
          <option value="" selected="selected">Select a graphic</option>
        </select>
       
        </div>
      </section>

      <section class="subpart-4">

        <div id="memory" class="form-group">
          <p>Ram Memory?</p>
          <label>
            <input
              name="user-recommend"
              value="definitely"
              type="radio"
              class="input-radio"
              checked
            />2Gb</label
          >
          <label>
            <input
              name="user-recommend"
              value="maybe"
              type="radio"
              class="input-radio"
            />4Gb</label
          >
          <label>
            <input
              name="user-recommend"
              value="maybe"
              type="radio"
              class="input-radio"
            />6Gb</label
          >
    
          <label
            ><input
              name="user-recommend"
              value="not-sure"
              type="radio"
              class="input-radio"
            />8Gb/More</label
          >
          
        </div>
        
        
      </section>

      
    
    </form>
    
  </main>

script.js

// Just one CheckBox jQ trick
$("input:checkbox").on('click', function () {
    
    var $box = $(this);
    if ($box.is(":checked")) {
      var group = "input:checkbox[name='" + $box.attr("name") + "']";
      $(group).prop("checked", false);
      $box.prop("checked", true);
    } else {
      $box.prop("checked", false);
    }
  });





// Options for dropdowns
var objGraphics = ["nVidia +2Gb","nVidia -2Gb", "AMD +2Gb", "AMD -2Gb", "Integrated Graphics"]
var subjectObject = {
    "Intel": {
      "i3": objGraphics,
      "i5": objGraphics,
      "i7": objGraphics,    
    },
    "AMD": {
      "Ryzen 3": objGraphics,
      "Ryzen 5": objGraphics,
      "Ryzen 7": objGraphics,
      "Ryzen 9": objGraphics,
    }
  }
// Conditional DropDown
  window.onload = function() {
    // Getting Value Field and stablishing onchange
    var brandSel = document.getElementById("brand");
    var geneSel = document.getElementById("gene");
    var memoSel = document.getElementById("memo");
    for (var x in subjectObject) {
      brandSel.options[brandSel.options.length] = new Option(x, x);
    }
    brandSel.onchange = function() {
      memoSel.length = 1;
      geneSel.length = 1;
      for (var y in subjectObject[this.value]) {
        geneSel.options[geneSel.options.length] = new Option(y, y);
      }
    }
    geneSel.onchange = function() {
      memoSel.length = 1;
      var z = subjectObject[brandSel.value][this.value];
      for (var i = 0; i < z.length; i++) {
        memoSel.options[memoSel.options.length] = new Option(z[i], z[i]);
      }
    }
  }




const projectName = 'survey-form';

scripts

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');
/* General Rules */
:root {

  /* Shapes */
  --sh1-color: #05386B;
  --sh2-color: #379683;
  --sh3-color: #5cdb95;
  --sh4-color: #8ee4af;
  --sh5-color: #edf5e1;
/* Border */
  --sma-border: 1px solid var(--sh4-color);
  --big-border: 2px double var(--sh4-color);
}

* {
  margin: 0;
  padding: .1rem;
  font-family: 'Roboto Mono', monospace;
  transition: .3s;
}


body {
  background-color: var(--sh1-color);
  color: var(--sh5-color);
  
}
main {
  margin: 2em auto;
  width: 66%;
  text-align: center;
  /* padding: 2rem; */
  background-color: var(--sh1-color);
  /* border: 2rem solid var(--sh2-color); */
  border-radius: 2rem;

  box-shadow: 1rem 1rem 1rem 1rem rgba(0,0,0,0.6);


}


.form-control {
  display: block;
  margin: auto;
  width: 75%;
  background-clip: padding-box;
  border: 1px solid var(--sh4-color);
  border-radius: 25rem;
  transition: border-color 0.40s ease-in-out, box-shadow 0.s ease-in-out;
  
}


/* #survey-form {
    margin-left: 10%;
  } */

.submit-button {
  font-size: medium;
  text-align: center;
  background-color: var(--sh4-color);
  padding: 2px 20px;
  border-radius: 20%;
  transition: 2s;
  margin-top: 1rem;
  margin-bottom: 0.125rem;

}

.contact{
  background-color: var(--sh2-color);
  text-align: center;
  border-radius: 2%;
  grid-column: 1/3;
  grid-row: 4;
  margin: 5% 10%;
}

.contact label{
  color: var(--sh1-color);
}

.submit-button:hover {
  color: #ced4da;
}

footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: transparent;
  color: white;
  text-align: right;
}

h6{
  color: var(--sh1-color);
}

textarea {
  resize: none;
  width: 80%;
  scrollbar-color: var(--fo-color);
  margin: 1rem;
  border-radius: 5%;
}


#check {
  text-align: left;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  margin: 0 2rem 0 2rem;
  padding: 0.250rem;

  border-top: var(--big-border) ;
  min-width: 20vw;

  
}


hr {
  width: 80%;
  text-align: center;
  margin: auto;
}

.clue {
  font-style: oblique;
  font-size: xx-small;
  color: var(--sh5-color);
}



input::-webkit-input-placeholder{
  text-align: center
  }
  
.input-textarea::-webkit-input-placeholder {
  text-align: center;
}



.subtitle {
  color: var(--sh3-color);
  margin-top: 0.125rem;
  margin-bottom: 1.125rem;
  /* margin-top: 10px; */
  
}


.subpart-1 {
  grid-column: 1 / 3;
  grid-row: 1;
  border-bottom: var(--big-border);
  margin: 0 20% 0 20%;
  
  
}
.subpart-2 {
  grid-column: 1 / 2;
  grid-row: 2;
  border-right: var(--sma-border);
  padding: 1rem;
  
  
  
}

.subpart-3{
  grid-column: 2/3;
  grid-row: 2;
  padding: 1rem;
}

.subpart-4{
  grid-column: 1/3;
  grid-row: 3;
  border-bottom: var(--big-border);
  
}
/* Id Selections */
#title {
  color: var(--sh5-color);
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  background-color: var(--sh2-color);
  position: relative;
  border-radius: 2rem;
  font-family: 'Yusei Magic', sans-serif;
  /* box-shadow: 1rem 1rem 1rem 1rem rgba(0,0,0,0.6); */
}




#processor-memo {
  height: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

#survey-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

survey-form.markdown

Survey Form

A Pen by mickiticki on CodePen.

License.