Compare Checklist Customised

compare-checklist-customised.markdown

Compare Checklist Customised

A Pen by Doug Willis on CodePen.

License.

index.html

<div class="container">
  <div class="content mb-4">
    <!-- Start Heading -->
    <div class="heading mt-4 mb-4">
      <div class="title">Compare Us</div>
      <div class="subtitle">to your current property manager…</div>
    </div>
    <!-- End Heading -->
    <!-- Start Question Container -->
    <div class="question-container">
      <div class="inner-content">
        <!-- Start Questions Heading -->
        <div class="ques-heading d-flex">
          <div class="text pt-2">
            <p>Does your current property manager...</p>
          </div>
          <div class="check-container text-center">
            <p>Your current Property Manager</p>
            <div class="icons d-flex mt-2">
              <div class="icon check"><i class="fas fa-check"></i></div>
              <div class="icon question"><i class="fas fa-question"></i></div>
              <div class="icon cancel"><i class="fas fa-times"></i></div>
            </div>
          </div>
          <div class="check-default text-center">
            <p>Coral Sea Property</p>
          </div>
        </div>
        <!-- End Questions Heading -->
        <!-- Start Questions Content -->
        <div class="ques-content">
          <!-- Start Question -->
          <div class="ques-row d-flex">
            <div class="text">
              <p>Guarantee personalised service and commit to care, communication and continual improvement?</p>
            </div>
            <div class="check-container">
              <div class="icons d-flex">
                <div class="icon check text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-check"></i></span>
                      </label>
                </div>
                <div class="icon question text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-question"></i></span>
                      </label>
                </div>
                <div class="icon cancel text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-times"></i></span>
                      </label>
                </div>
              </div>
            </div>
            <div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div>
          </div>
          <!-- End Question -->
          <!-- Start Question -->
          <div class="ques-row d-flex">
            <div class="text">
              <p>Stand as owner advocates, working to maximise your annual returns?</p>
            </div>
            <div class="check-container">
              <div class="icons d-flex">
                <div class="icon check text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-check"></i></span>
                      </label>
                </div>
                <div class="icon question text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-question"></i></span>
                      </label>
                </div>
                <div class="icon cancel text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-times"></i></span>
                      </label>
                </div>
              </div>
            </div>
            <div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div>
          </div>
          <!-- End Question -->
          <!-- Start Question -->
          <div class="ques-row d-flex">
            <div class="text">
              <p>Provide systemised, industry leading marketing to get your property leased sooner?</p>
            </div>
            <div class="check-container">
              <div class="icons d-flex">
                <div class="icon check text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-check"></i></span>
                      </label>
                </div>
                <div class="icon question text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-question"></i></span>
                      </label>
                </div>
                <div class="icon cancel text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-times"></i></span>
                      </label>
                </div>
              </div>
            </div>
            <div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div>
          </div>
          <!-- End Question -->
          <!-- Start Question -->
          <div class="ques-row d-flex">
            <div class="text">
              <p>Respond to owner and tenant messages on the same day?</p>
            </div>
            <div class="check-container">
              <div class="icons d-flex">
                <div class="icon check text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-check"></i></span>
                      </label>
                </div>
                <div class="icon question text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-question"></i></span>
                      </label>
                </div>
                <div class="icon cancel text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-times"></i></span>
                      </label>
                </div>
              </div>
            </div>
            <div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div>
          </div>
          <!-- End Question -->
          <!-- Start Question -->
          <div class="ques-row d-flex">
            <div class="text">
              <p>Structure your leases to end in the busiest periods of the real estate market? (lease ending November-January)</p>
            </div>
            <div class="check-container">
              <div class="icons d-flex">
                <div class="icon check text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-check"></i></span>
                      </label>
                </div>
                <div class="icon question text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-question"></i></span>
                      </label>
                </div>
                <div class="icon cancel text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-times"></i></span>
                      </label>
                </div>
              </div>
            </div>
            <div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div>
          </div>
          <!-- End Question -->
          <!-- Start Question -->
          <div class="ques-row d-flex">
            <div class="text">
              <p>Keep you updated with what is happening at your property, with progress and photos of maintenance jobs available online?</p>
            </div>
            <div class="check-container">
              <div class="icons d-flex">
                <div class="icon check text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-check"></i></span>
                      </label>
                </div>
                <div class="icon question text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-question"></i></span>
                      </label>
                </div>
                <div class="icon cancel text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-times"></i></span>
                      </label>
                </div>
              </div>
            </div>
            <div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div>
          </div>
          <!-- End Question -->
          <!-- Start Question -->
          <div class="ques-row d-flex">
            <div class="text">
              <p>Employ a full-time specialised maintenance coordinator to qualify and coordinate maintenance requests.</p>
            </div>
            <div class="check-container">
              <div class="icons d-flex">
                <div class="icon check text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-check"></i></span>
                      </label>
                </div>
                <div class="icon question text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-question"></i></span>
                      </label>
                </div>
                <div class="icon cancel text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-times"></i></span>
                      </label>
                </div>
              </div>
            </div>
            <div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div>
          </div>
          <!-- End Question -->
          <!-- Start Question -->
          <div class="ques-row d-flex">
            <div class="text">
              <p>Have long term experience in the local property market and knows the average lease lengths, current vacancy rates, and annual average vacancy rates? – We also provide all of our success stats</p>
            </div>
            <div class="check-container">
              <div class="icons d-flex">
                <div class="icon check text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-check"></i></span>
                      </label>
                </div>
                <div class="icon question text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-question"></i></span>
                      </label>
                </div>
                <div class="icon cancel text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-times"></i></span>
                      </label>
                </div>
              </div>
            </div>
            <div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div>
          </div>
          <!-- End Question -->
          <!-- Start Question -->
          <div class="ques-row d-flex">
            <div class="text">
              <p>Use professional photographs and premier listings to promote your property on the internet?</p>
            </div>
            <div class="check-container">
              <div class="icons d-flex">
                <div class="icon check text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-check"></i></span>
                      </label>
                </div>
                <div class="icon question text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-question"></i></span>
                      </label>
                </div>
                <div class="icon cancel text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-times"></i></span>
                      </label>
                </div>
              </div>
            </div>
            <div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div>
          </div>
          <!-- End Question -->
          <!-- Start Question -->
          <div class="ques-row d-flex">
            <div class="text">
              <p>Respect tenants as the lifeblood of the rental industry?</p>
            </div>
            <div class="check-container">
              <div class="icons d-flex">
                <div class="icon check text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-check"></i></span>
                      </label>
                </div>
                <div class="icon question text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-question"></i></span>
                      </label>
                </div>
                <div class="icon cancel text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-times"></i></span>
                      </label>
                </div>
              </div>
            </div>
            <div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div>
          </div>
          <!-- End Question -->
          <!-- Start Question -->
          <div class="ques-row d-flex">
            <div class="text">
              <p>Provide an online 24/7 booking system for prospective tenants?</p>
            </div>
            <div class="check-container">
              <div class="icons d-flex">
                <div class="icon check text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-check"></i></span>
                      </label>
                </div>
                <div class="icon question text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-question"></i></span>
                      </label>
                </div>
                <div class="icon cancel text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-times"></i></span>
                      </label>
                </div>
              </div>
            </div>
            <div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div>
          </div>
          <!-- End Question -->
          <!-- Start Question -->
          <div class="ques-row d-flex">
            <div class="text">
              <p>Only provide guided tenant inspections to allow us to begin to qualify potential tenant applicants and upsell the property ?</p>
            </div>
            <div class="check-container">
              <div class="icons d-flex">
                <div class="icon check text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-check"></i></span>
                      </label>
                </div>
                <div class="icon question text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-question"></i></span>
                      </label>
                </div>
                <div class="icon cancel text-center">
                  <label class="sign-container">
                        <input type="checkbox">
                        <span class="sign-container-icon"><i class="fas fa-times"></i></span>
                      </label>
                </div>
              </div>
            </div>
            <div class="check-default"><i class="fas fa-check"></i> <span>Yes</span></div>
          </div>
          <!-- End Question -->
        </div>
        <!-- Start Questions Content -->
        <!-- Start Questions Footer -->
        <div class="ques-heading d-flex">
          <div class="text pt-2"></div>
          <div class="check-container results text-center">
            <p>Get Results</p>
          </div>
          <div class="check-default text-center"></div>
        </div>
        <!-- End Questions Footer -->
      </div>
    </div>
    <!-- End Question Container -->
    <!-- Start Results Container -->
    <div class="results-container">
      <div class="res-heading mt-4 mb-4">
        <p>You're currently receiving <span class="percentage"></span> of the service you would get at <strong>Coral Sea Property</strong>.</p>
      </div>
      <div class="res-content mb-4">
        <div class="subtitle mb-2">You are currently missing out on the following benefits:</div>
      </div>
    </div>
    <!-- End Results Container -->
  </div>
</div>

script.js

(function() {
  let quesContent = document.querySelector('.ques-content'),
      resultsBtn = document.querySelector('.results p');

  // Select on option from the checklist on click
  quesContent.addEventListener('click', function(event) {
    let ele = event.target;
    if (ele.parentElement.tagName === 'LABEL' && ele.tagName === 'INPUT') {
      let lbls = ele.parentElement.parentElement.parentElement.querySelectorAll('label');
      for (let i = 0; i < lbls.length; i++) {
        if (lbls[i] !== ele.parentElement) {
          if (lbls[i].classList.contains('active')) {
            lbls[i].classList.remove('active');
            lbls[i].querySelector('input').checked = false;
          }
        }
      }
      if (ele.parentElement.classList.contains('active')) {
        ele.checked = false;
        ele.parentElement.classList.remove('active');
      } else {
        ele.parentElement.classList.add('active');
        ele.checked = true;
      }
    }
  })

  // Show Results on click on the 'Get Results' button
  resultsBtn.addEventListener('click', function() {
    let allQues = document.querySelectorAll('.ques-row'),
        maxNum = 100 / allQues.length,
        rightNum = 0,
        arr = [];
    for (let i = 0; i < allQues.length; i++) {
      if (allQues[i].querySelector('label.active')) {
        let lbls = allQues[i].querySelector('label.active');
        if (lbls.parentElement.classList.contains('check')) {
          rightNum++;
        } else {
          let txt = allQues[i].querySelector('.text p').textContent;
          arr.push(txt);
        }
      } else {
        let txt = allQues[i].querySelector('.text p').textContent;
        arr.push(txt);
      }
    }
    rightNum = Math.ceil(rightNum * maxNum);
    showResults(rightNum, arr)
  });
  function showResults(res, txt) {
    let quesContainer = document.querySelector('.question-container'),
        overlay = document.createElement('div'),
        spin = document.createElement('div'),
        results = document.querySelector('.results-container'),
        resContent = results.querySelector('.res-content'),
        percentage = document.querySelector('.percentage');
    overlay.className = 'overlay';
    spin.className = 'spinner';
    quesContainer.appendChild(overlay);
    quesContainer.appendChild(spin);
    percentage.textContent = res + '%';
    if (txt.length === 0) {
      resContent.style.display = 'none';
    }
    for (let i = 0; i < txt.length; i++) {
      let para = document.createElement('p');
      para.textContent = txt[i];
      resContent.appendChild(para);
    }
    setTimeout(function() {
      overlay.remove();
      spin.remove();
      quesContainer.style.display = 'none';
      results.classList.add('active');
    }, 1200);
  }

}());

style.css

* {box-sizing: border-box;}
.mt-2 {margin-top: 15px;}
.mb-2 {margin-bottom: 15px;}
.mt-4 {margin-top: 30px;}
.mb-4 {margin-bottom: 30px;}
.pt-2 {padding-top: 15px;}
p {margin: 0px; padding: 10px 0;}
.text-center {text-align: center;}
.d-flex {display: flex;}
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  padding: 0;
  margin: 0;
}
.container {
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
}
.container .content {
  padding: 0 10px;
  position: relative;
}
.title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #662d91;
}
.subtitle {
  font-size: 24px;
  font-weight: 600;
}
.question-container {
  position: relative;
  border-top: 1px solid #ddd;
}
.question-container .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  background-color: #fff;
  z-index: 999;
}
.question-container .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-width: 8px;
  border-style: solid;
  border-radius: 100%;
  border-color: #ddd #2d98f7 #ddd #ddd;
  z-index: 99999;
  animation: spinner .3s linear infinite;
}
@keyframes spinner {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}
.question-container .text {
  flex: 0 0 65%;
  width: 65%;
  padding-left: 15px;
  position: relative;
}
.question-container .ques-content .text {
  display: flex;
  align-items: center;
}
.question-container .ques-heading:last-child .check-container p::after,
.question-container .ques-content .text::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f0da";
  font-weight: 900;
  visibility: hidden;
}
.question-container .text svg {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #662d91;
}
.question-container .check-container {
  flex: 0 0 20%;
  width: 20%;
}
.question-container .check-default {
  flex: 0 0 15%;
  width: 15%;
}
.question-container .ques-heading .check-container {
  padding: 0 15px 15px 25px;
  border-right: 1px solid #ddd;
}
.question-container .ques-heading:last-child .check-container {
  border-right-color: transparent;
}
.question-container .ques-heading:last-child .check-container p svg {
  font-size: 18px;
  margin-left: 5px;
  margin-bottom: -2.5px;
}
.question-container .ques-heading .check-container p {
  background-color: #458ae8;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  color: #fff;
  font-weight: bold;
  padding: 5px 0;
  font-size: 13px;
}
.question-container .ques-heading .check-default p {
  font-weight: bold;
  color: #662d91;
  padding: 15px 5px 5px 15px;
  text-align: left;
}
.question-container .icons .icon {
  flex: 0 0 33%;
  width: 33%;
  padding: 5px;
  font-size: 24px;
}
.ques-row .check-default,
.question-container .icon.check {color: #6EC067;}
.question-container .icon.question {color: #FAA61A;}
.question-container .icon.cancel {color: #EF413D;}
.ques-row .icon.check label.active {border-color: #6EC067;}
.ques-row .icon.question label.active {border-color: #FAAd16;}
.ques-row .icon.cancel label.active {border-color: #EF413D;}
.res-content p,
.text p {
  color: #6d6d6d;
}
.ques-row .check-container {
  border-right: 1px solid #ddd;
}
.ques-row label {
  position: relative;
  width: 42px;
  height: 45px;
  border: 1px solid #ddd;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  cursor: pointer;
}
.ques-row label:hover {
  border-color: #662d91;
}
.ques-row input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
  opacity: 0;
  cursor: pointer;
}
.ques-row .check-container {
  padding: 0 15px 0 25px;
}
.ques-row .check-default {
  font-size: 21px;
  padding-top: 10px;
  padding-left: 15px;
}
.ques-row .check-default span {
  color: #662d91;
  font-size: 17px;
  display: inline-block;
  margin-left: 4px;
}
.ques-row .check-default svg {
  margin-bottom: -2px;
}
.ques-row .icon span {
  display: none;
}
.ques-row .icon input:checked + span {
  display: block;
}
.ques-row:last-child {
  border-bottom: 1px solid #ddd;
}
.ques-row:last-child .check-container {
  padding-bottom: 15px;
}
.question-container .ques-heading .check-container.results p {
  cursor: pointer;
}
.results-container {
  display: none;
  padding-top: 20px;
}
.results-container.active {
  display: block;
  animation: show-results .3s ease-in-out;
}
@keyframes show-results {
  0% {opacity: 0;transform: translateY(40px)}
  100% {opacity: 1; transform: translateY(0px)}
}
.results-container .res-heading p {
  text-align: center;
  max-width: 727px;
  font-size: 30px;
  margin: 0 auto;
  padding: 15px 20px 25px 15px;
  border-radius: 30px;
  background-color: #662d91;
  color: #fff;
}
.results-container .res-heading p span {
  font-weight: bold;
  font-size: 50px;
  line-height: 50px;
}
@media only screen and (max-width: 1100px) {
  .question-container .check-default {
    flex: 0 0 95px;
    width: 95px;
  }
  .question-container .check-container {
    flex: 0 0 200px;
    width: 200px;
  }
  .question-container .text {
    padding-right: 15px;
    width: 100%;
    flex: inherit;
  }
}
@media only screen and (max-width: 590px) {
  .ques-heading .text {
    display: none;
  }
  .ques-row .check-container,
  .question-container .ques-heading .check-container {
    border-right: none;
  }
  .question-container .ques-content .text {
    flex: 0 0 100%;
    width: 100%;
  }
  .ques-row {flex-wrap: wrap;}
  .question-container .text {padding-right: 0px;}
  .results-container {padding-top: 0px;}
}