Website Estimate Builder

by Ian Roberts

HTML

<h1>Estimate Builder</h1>
<div class="Specifications">
  <label>Client:</label>
  <input type="text" placeholder="Client">
  <label>Hourly Rate:</label>
  <input type="text" placeholder="$150">
  <input class="showAll" type="checkbox"><span>Include All Fields</span>
</div>
<hr>
<div class="customBuild">
  <h3>Default Build Settings</h3>
  <form>
  <div class="wrap">
    <div class="column-50">
      <div class="item parent">
        <input type="checkbox" checked><input type="text" placeholder="Responsive"><input type="text" placeholder="$3000">
      </div>
      <div class="item parent hidden">
        <input type="checkbox"><input type="text" placeholder="Parallax Containers"><input type="text" name="cost" placeholder="$600">
      </div>
      <div class="item parent hidden">
        <input type="checkbox"><input type="text" placeholder="Full Width Layouts"><input type="text" name="cost" placeholder="$1200">
      </div>
      <div class="item parent hidden">
        <input type="checkbox"><input type="text" placeholder="Dark Content Container"><input type="text" name="cost" placeholder="$600">
      </div>
    </div>
    <div class="column-50">
      <div class="item parent hidden">
        <input type="checkbox"><input type="text" placeholder="Associated Sites">
        <br>
        <span>Number of sites</span><input type="text" placeholder="0">
        <br>
        <span>Cost per site</span><input type="text" placeholder="$1200">
        <br>
        <textarea type="message" placeholder="Specification on Associated Sites"></textarea>
      </div>
    </div>
    <div class="column-clear"></div>
  </div>
  </form>
  <hr>
</div>
<div class="customOptions">
  <h3>Custom Build Options</h3>
  <form>
  <button type="button" class="button-add--field">Add Field</button>
  </form>
</div>

SCSS

@mixin type {
  color: #555;
  font-family: sans-serif;
  font-weight: bold;
}
@mixin outline {
  outline:none;
}
h1, h3 {
  @include type;
}
.button {
  &-add {
    &--field {
      @include type;
      @include outline;
      background-color: lightblue;
      border: none;
      border-radius: 3px;
      padding: 7px 10px;
      margin-top:5px;
    }
  }
}
input {
  @include outline;
  &[type="checkbox"]{
    
  }
  &[type="text"] {
    
  }
}
.wrap{
  width:100%;
  .column {
    &-50 {
      float:left;
      width:50%;
    }
    &-clear {
      clear:both;
    }
  }
}
.item{
  -webkit-transition: opacity 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out;
  -ms-transition: opacity 300ms ease-in-out;
  -o-transition: opacity 300ms ease-in-out;
  opacity: 1;
  &.hidden {
    opacity:.5;
  }
}

JavaScript

$('.button-add--field').on('click', function() {
  var option = '<div class="item parent"><input type="checkbox" checked><input type="text" placeholder="Name:"><input type="text" placeholder="$0"></div>'
  $(option).insertBefore(this);
});
$(document).on('change','.item input:checkbox', function(){
	$(this).parent('.parent').toggleClass('hidden');
  $('.showAll').prop('checked', false);
});
$('.showAll').change( function() {
	$('input[type="checkbox"]:not(".showAll")').each( function() {
    $(this).prop('checked', true)
    $(this).parent('.parent').removeClass('hidden')
	})
})