Skip to content

Instantly share code, notes, and snippets.

@Mindgames

Mindgames/index.html

Created January 7, 2019 04:01
Show Gist options
  • Save Mindgames/5dfa6084edde9c5f9f2ab42ae532b9ba to your computer and use it in GitHub Desktop.
Save Mindgames/5dfa6084edde9c5f9f2ab42ae532b9ba to your computer and use it in GitHub Desktop.
Download ZIP
Meeting Time calulator
Raw
index.html
<div id="waste_calulator" class="container">
<div class="heading p-5">
<h1 class="display-4 text-white text-center">What is your cost<br> of ineffective meetings?</h1>
</div>
<div class="row justify-content-center">
<!-- Meeting time -->
<div class="col-4">
<div class="form-group">
<label class="text-white" for="exampleFormControlSelect1">Average meeting time</label>
<select class="meeting-time form-control form-control-lg">
<option value="0.25">15 min</option>
<option value="0.5">30 min</option>
<option value="0.75">45 min</option>
<option value="1" selected="selected">60 min</option>
<option value="1.5">90 min</option>
<option value="2">120 min</option>
</select>
</div>
</div>
<!-- Meeting participants -->
<div class="col-4">
<div class="form-group">
<label class="text-white" for="exampleFormControlSelect1">Average number of meeting participants</label>
<select class="meeting-participants form-control form-control-lg">
<option value="2">1-3</option>
<option value="5" >4-6</option>
<option value="8" selected="selected">7-9</option>
<option value="11">10-12</option>
<option value="14">13-15</option>
<option value="17">16-18</option>
</select>
</div>
</div>
</div>
<div class="row justify-content-center">
<!-- Meetings per week -->
<div class="col-4">
<div class="form-group">
<label class="text-white" for="exampleFormControlSelect1">Average number of meetings per week</label>
<select class=" meetings-per-week form-control form-control-lg">
<option value="2">1-3</option>
<option value="5" selected="selected">4-6</option>
<option value="8">7-9</option>
<option value="11">10-12</option>
<option value="14">13-15</option>
<option value="17">16-18</option>
</select>
</div>
</div>
<!-- World Region -->
<div class="col-4">
<div class="form-group">
<label class="text-white" for="exampleFormControlSelect1">World region</label>
<select class="world-region form-control form-control-lg">
<option value="16">Africa</option>
<option value="39">Asia</option>
<option value="49">Australia</option>
<option value="59" selected="selected">Europe</option>
<option value="62">North America</option>
<option value="22">South America</option>
</select>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 text-right">
<div id="reg_calc_wrapper" class="g one-whole field_reg_calc">
<div class="field_reg_calc">
<h4 class="text-light p-l-10rem text-center">
<div><br>
<label class="text-white "> <strong> TOTAL ANNUAL COST</strong></label>
<div class="display-1 p-l-10rem text-right" id="waste">0 $</div>
</div>
</h4>
</div>
</div>
</div>
<div class="col-md-6">
<div id="reg_calc_wrapper" class="g one-whole field_reg_calc">
<div class="field_reg_calc">
<h4 class="text-light ">
<div><br>
</div>
<label class="text-white"> <strong> WITH <img src="https://timeqube.com/wp-content/uploads/2019/01/Timeqube_logo_White.png" class="topplus5" height="35px">YOU COULD SAVE </strong></label>
<div class="display-1 teal" id="save">0 $</div>
</h4>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<a href="https://timequ.be/calc-cta" class="btn btn-success btn-lg p-2rem">GET TIMEQUBE</a>
</div></div>
<div class="row justify-content-center"> <div class="col-md-6 text-center">
<div class="disclaimer text-center"> All figures are indicative estimates only. Estimation is based on Timeqube's average 15% efficacy. More precise calculation is available on request. Data based on research papers by MIT <a href="https://sloanreview.mit.edu/article/the-science-and-fiction-of-meetings/"> The Science and Fiction of Meetings</a> and <a href="https://hbr.org/2017/07/stop-the-meeting-madness"> Stop the Meeting Madness </a> by Harvard Business Review. We used average hourly wages for global IT workforce.
</div>
Raw
script.babel
$(document).ready(function() {
$("#waste_calulator select").each(function() {
$(this).load(calculateSum())
});
});
// Wrap function
$(function() {
$("#waste_calulator select").each(function() {
$(this).change(function() {
calculateSum()
});
});
});
// Calculate the value
function calculateSum() {
var waste =
$(".meeting-time").val() *
$(".meeting-participants").val() *
$(".meetings-per-week").val() *
$(".world-region").val() *
52 *
0.7;
var waste = waste.toFixed(0)
var save = waste * 0.15
save = save.toFixed(0)
$("#waste").text(waste += " $")
$("#save").text(save += " $")
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.scss
body {
font-family:"Gilroy";
font-weight: 400;
background: url("https://timeqube.com/wp-content/uploads/2019/01/photo-1526540711844-1efbc5685fbf.jpeg"),-webkit-gradient(linear,left top,right top,from(#06d6a0),to(#ff4c4c));
font-smooth: auto;
background-size:cover;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
font-weight:600 !important;
letter-spacing:0.5px;
text-shadow: 0 2px 2px #00000059;
}
label {
font-weight:400 !important;
letter-spacing:0.5px;
font-size:16px;
}
.btn {
width:200px;
border: none;
border-radius: 50px;
outline: 0;
text-decoration: none;
color: #fff!important;
background-color: #06D6A0;;
white-space: nowrap;
display: inline-block;
padding: 14px 16px;
-webkit-box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
font-size: 20px;
font-weight: 600;
letter-spacing: 2px;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
}
.btn:hover {
background:#048C67;
}
.form-control {
margin:0 0 25px;
}
.teal {
color: #06D6A0;
}
.p-2rem {
margin-top:25px;
margin-bottom:50px;
}
.text-right {
text-align:right;
}
p-l-10rem {
padding-left:10rem;
}
.disclaimer {
text-align:center;
color:#fff;
font-size:0.8rem;
padding-bottom:1rem;
}
.disclaimer a {
color:#fff;
}
.bold {
font-weight:bold;
}
.topplus5 {
margin-top:-5px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment