Dynamic Result Form - Real Helper

md.shakil hossain

1281

Dynamic Result Form

<div class="form">
	<header>
		<h1>WHICH PET FORM</h1>
		<h2>Please fill all the form bellow.</h2>  
	</header>
	<ul>
	  <li class="question">
	    <h3>Do you mind bathing your pet on a regular basis?</h3>
			<label class="choice">
			  <input type="radio" name="q1" value="dog" />
				<span>NOPE</span>
			</label>
			<label class="choice">
			  <input type="radio" name="q1" value="cat" />
				<span>YES, I SUCK AT BATHING</span>
			</label>
	  </li>
		<li class="question">
			<h3>Do you mind giving <b>lots</b> of attention to your pet?</h3>
			<label class="choice">
			  <input type="radio" name="q2" value="dog" />
				<span>NOPE</span>
			</label>
			<label class="choice">
			  <input type="radio" name="q2" value="cat" />
				<span>YES, I MY DAY IS KINDA FULL</span>
			</label>
	  </li>
		<li class="question">
	    <h3>Elegance of fussiness?</h3>
			<label class="choice">
			  <input type="radio" name="q3" value="cat" />
				<span>ELEGANCE</span>
			</label>
			<label class="choice">
			  <input type="radio" name="q3" value="dog" />
				<span>FUSS 4 EVAR!</span>
			</label>
	  </li>
		<li class="question">
	    <h3>Does barking is a problem for you?</h3>
			<label class="choice">
			  <input type="radio" name="q4" value="cat" />
				<span>YEAH :(</span>
			</label>
			<label class="choice">
			  <input type="radio" name="q4" value="dog" />
				<span>NOT ACTUALLY</span>
			</label>
	  </li>
		<li class="question">
	    <h3>Is affection a must for you?</h3>
			<label class="choice">
			  <input type="radio" name="q5" value="dog" />
				<span>MY PET MUST LOOOVE ME!</span>
			</label>
			<label class="choice">
			  <input type="radio" name="q5" value="cat" />
				<span>REGULAR WARMTH IS ENOUGHT</span>
			</label>
	  </li>
	</ul>
	<button class="button-submit" onclick="calcResults('.form')">SEE MY RESULT</button>

</div>
</div>

Try it Yourself >>

@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);
body {
  font-family: Lato, Helvetica, Arial, sans-serif;
  background: linear-gradient(#dfdbd7, #d7d3d3);
  color: #545454;
  margin: 0;
  min-height: 100vh;
}
.form {
  max-width: 520px;
  background: #fff;
  margin: 1em auto;
  padding-bottom: 1em;
  border-radius: 8px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.07);
}
.form header {
  border-bottom: 3px double #e9e9e9;
  padding: 1em 0;
  padding-bottom: 1em;
}
.form header h1 {
  text-align: center;
  font-size: 1.3em;
  color: #5f7796;
  font-weight: bolder;
}
.form header h2 {
  text-align: center;
  font-size: 1em;
  color: #94a9c3;
  font-weight: normal;
}
.form .button-submit {
  font-weight: regular;
  color: #fff;
  font-size: 1em;
  padding: 0.8em 2em;
  border-radius: 50em;
  border: none;
  background: #5f7796;
  margin: 1em auto 0.3em;
  display: block;
  transition: all 0.2s linear;
}
.form .button-submit:hover {
  background: #374558;
}
.form ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.form ul h3 {
  font-weight: normal;
  font-size: 1.2em;
}
.form ul .question {
  padding: 0 1em 1.5em;
  border-bottom: 1px solid #e9e9e9;
}
.form ul .question .choice span {
  background: #70b48b;
  color: #fff;
  font-size: 0.8em;
  padding: 0.5em 1.5em 0.5em 2em;
  margin: 0 1.2em 0 0;
  border-radius: 100px;
  position: relative;
  min-width: 50px;
  text-align: center;
  display: inline-block;
  transition: all 0.2s linear;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0) inset, 0 0 0 2px rgba(0, 0, 0, 0);
}
.form ul .question .choice span:before {
  content: '';
  background: #fff;
  position: absolute;
  top: 9px;
  left: 7px;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.form ul .question .choice span:after {
  content: '';
  position: absolute;
  z-index: 2;
  width: 6px;
  height: 6px;
  top: 11px;
  left: 9px;
  transform: scale(0);
  border-radius: 50%;
  transition: all 0.3s linear;
}
.form ul .question .choice span:hover,
.form ul .question .choice span:focus {
  background: #417d59;
}
.form ul .question .choice input {
  display: none;
}
.form ul .question .choice input:checked + span {
  box-shadow: 0 0 0 2px #5f7796 inset, 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.form ul .question .choice input:checked + span:after {
  background: #5f7796;
  transform: scale(1);
}

Try it Yourself >>

function resultsFromForm(el){
  var results = {};
    $('.question',el).each(function(){
		  var iv = $('input:checked', this)[0].value;
      if(results[iv] == undefined){
			  results[iv] = 1;
			}else{
			  results[iv]++;
		  }
    });
		return results;
}

function calcResults(el){
  if(getKeyOfMaxObjValue(resultsFromForm('.form')) == "dog"){
    alert("You should look for a dog!");
	}else{
		alert("You should look for a cat!");
	}
}

/*
 * Solution bellow taken from
 * http://goo.gl/rBpjQd
 */
function getKeyOfMaxObjValue(obj){
	var max = -Infinity;
  var key;
  for(var prop in obj) {
    // ignore inherited properties
    if(obj.hasOwnProperty(prop)) { 
      if(obj[prop] > max) {
        max = obj[prop];
        key = prop;
      }
    }
  }
	return key;
}

Try it Yourself >>