-
Notifications
You must be signed in to change notification settings - Fork 0
/
qualitycalc.html
120 lines (109 loc) · 11.3 KB
/
qualitycalc.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>POE Quality Calculator</title>
<!-- Bootstrap CSS -->
<!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="qcalc.css">
<link href="//fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<style type="text/css" data-styleid="style-jezvofrx">
.style-jezvofrxitemsContainer {width:calc(100% - 0px);height:calc(100% - 0px);white-space:nowrap;display:inline-block;overflow:visible;position:relative;}
.style-jezvofrxmoreContainer {overflow:visible;display:inherit;white-space:nowrap;width:auto;background-color:rgba(255, 255, 255, 1);border-radius:0; }
.style-jezvofrxdropWrapper {z-index:99999;display:block;opacity:1;visibility:hidden;position:absolute;margin-top:7px;}
.style-jezvofrxdropWrapper[data-dropMode="dropUp"] {margin-top:0;margin-bottom:7px;}
.style-jezvofrxrepeaterButton {height:100%;position:relative;box-sizing:border-box;display:inline-block;cursor:pointer;font:normal normal normal 16px/1.4em din-next-w01-light,din-next-w02-light,din-next-w10-light,sans-serif ;}
.style-jezvofrxrepeaterButton[data-state~="header"] a,.style-jezvofrxrepeaterButton[data-state~="header"] div {cursor:default !important;}
.style-jezvofrxrepeaterButtonlinkElement {display:inline-block;height:100%;width:100%;}
.style-jezvofrxrepeaterButton_gapper {padding:0 5px;}
.style-jezvofrxrepeaterButtonlabel {display:inline-block;padding:0 10px;color:#A0A09F;transition:color 0.4s ease 0s;}
.style-jezvofrxrepeaterButton[data-state~="drop"] {width:100%;display:block;}
.style-jezvofrxrepeaterButton[data-state~="drop"] .style-jezvofrxrepeaterButtonlabel {padding:0 .5em;}
.style-jezvofrxrepeaterButton[data-state~="over"] .style-jezvofrxrepeaterButtonlabel,.style-jezvofrxrepeaterButton[data-preview~="hover"] .style-jezvofrxrepeaterButtonlabel {color:#FFFFFF;transition:color 0.4s ease 0s;}
.style-jezvofrxrepeaterButton[data-state~="selected"] .style-jezvofrxrepeaterButtonlabel,.style-jezvofrxrepeaterButton[data-preview~="active"] .style-jezvofrxrepeaterButtonlabel {color:#2F2E2E;transition:color 0.4s ease 0s;}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="hdCntrCnt">
<h1 class="site-name">Kat's POE Tools</h1>
</div>
<!-- <nav id="DrpDwnMn0-5s3" data-menuborder-y="0" data-menubtn-border="0" data-ribbon-els="0" data-label-pad="0" data-ribbon-extra="0" data-drophposition="" data-dropalign="center" dir="ltr" class="style-jezvofrx" data-state="center notMobile" style="left: -1px; width: 980px; position: absolute; top: 76px; height: 29px;" data-dropmode="dropDown"><ul aria-label="Site navigation" role="navigation" id="DrpDwnMn0-5s3itemsContainer" class="style-jezvofrxitemsContainer" style="text-align: center;"><li data-direction="ltr" data-listposition="center" data-data-id="bmi14ij" class="style-jezvofrxrepeaterButton" data-state="menu idle link notMobile" id="DrpDwnMn0-5s30" data-original-gap-between-text-and-btn="10" aria-hidden="false" style="width: 71px; height: 29px; position: relative; box-sizing: border-box; overflow: visible;"><a role="button" tabindex="0" aria-haspopup="false" data-listposition="center" href="https://canuckkat.wixsite.com/poetools" target="_self" id="DrpDwnMn0-5s30linkElement" class="style-jezvofrxrepeaterButtonlinkElement"><div class="style-jezvofrxrepeaterButton_gapper"><div id="DrpDwnMn0-5s30bg" class="style-jezvofrxrepeaterButtonbg" style="text-align: center;"><p id="DrpDwnMn0-5s30label" class="style-jezvofrxrepeaterButtonlabel" style="text-align: center; line-height: 29px;">HOME</p></div></div></a></li><li data-direction="ltr" data-listposition="center" data-data-id="bmi2085" class="style-jezvofrxrepeaterButton" data-state="menu idle link notMobile" id="DrpDwnMn0-5s31" data-original-gap-between-text-and-btn="10" aria-hidden="false" style="width: 47px; height: 29px; position: relative; box-sizing: border-box; overflow: visible;"><a role="button" tabindex="0" aria-haspopup="false" data-listposition="center" href="https://canuckkat.wixsite.com/poetools/cv" target="_self" id="DrpDwnMn0-5s31linkElement" class="style-jezvofrxrepeaterButtonlinkElement"><div class="style-jezvofrxrepeaterButton_gapper"><div id="DrpDwnMn0-5s31bg" class="style-jezvofrxrepeaterButtonbg" style="text-align: center;"><p id="DrpDwnMn0-5s31label" class="style-jezvofrxrepeaterButtonlabel" style="text-align: center; line-height: 29px;">CV</p></div></div></a></li><li data-direction="ltr" data-listposition="center" data-data-id="bmi14fv" class="style-jezvofrxrepeaterButton" data-state="menu idle link notMobile" id="DrpDwnMn0-5s32" data-original-gap-between-text-and-btn="11" aria-hidden="false" style="width: 132px; height: 29px; position: relative; box-sizing: border-box; overflow: visible;"><a role="button" tabindex="0" aria-haspopup="true" data-listposition="center" href="https://canuckkat.wixsite.com/poetools/calculators" target="_self" id="DrpDwnMn0-5s32linkElement" class="style-jezvofrxrepeaterButtonlinkElement"><div class="style-jezvofrxrepeaterButton_gapper"><div id="DrpDwnMn0-5s32bg" class="style-jezvofrxrepeaterButtonbg" style="text-align: center;"><p id="DrpDwnMn0-5s32label" class="style-jezvofrxrepeaterButtonlabel" style="text-align: center; line-height: 29px;">CALCULATORS</p></div></div></a></li><li data-direction="ltr" data-listposition="center" data-data-id="dataItem-jcg19vwz" class="style-jezvofrxrepeaterButton" data-state="menu idle link notMobile" id="DrpDwnMn0-5s33" data-original-gap-between-text-and-btn="11" aria-hidden="false" style="width: 68px; height: 29px; position: relative; box-sizing: border-box; overflow: visible;"><a role="button" tabindex="0" aria-haspopup="false" data-listposition="center" href="https://canuckkat.wixsite.com/poetools/blog" target="_self" id="DrpDwnMn0-5s33linkElement" class="style-jezvofrxrepeaterButtonlinkElement"><div class="style-jezvofrxrepeaterButton_gapper"><div id="DrpDwnMn0-5s33bg" class="style-jezvofrxrepeaterButtonbg" style="text-align: center;"><p id="DrpDwnMn0-5s33label" class="style-jezvofrxrepeaterButtonlabel" style="text-align: center; line-height: 29px;">BLOG</p></div></div></a></li><li data-direction="ltr" data-listposition="center" data-data-id="bmiu62" class="style-jezvofrxrepeaterButton" data-state="menu idle link notMobile" id="DrpDwnMn0-5s34" data-original-gap-between-text-and-btn="10" aria-hidden="false" style="width: 94px; height: 29px; position: relative; box-sizing: border-box; overflow: visible;"><a role="button" tabindex="0" aria-haspopup="false" data-listposition="center" href="https://canuckkat.wixsite.com/poetools/contact" target="_self" id="DrpDwnMn0-5s34linkElement" class="style-jezvofrxrepeaterButtonlinkElement"><div class="style-jezvofrxrepeaterButton_gapper"><div id="DrpDwnMn0-5s34bg" class="style-jezvofrxrepeaterButtonbg" style="text-align: center;"><p id="DrpDwnMn0-5s34label" class="style-jezvofrxrepeaterButtonlabel" style="text-align: center; line-height: 29px;">CONTACT</p></div></div></a></li><li data-listposition="center" class="style-jezvofrxrepeaterButton" data-state="menu idle header notMobile" id="DrpDwnMn0-5s3__more__" data-original-gap-between-text-and-btn="10" aria-hidden="true" style="height: 0px; overflow: hidden; position: absolute;"><a role="button" tabindex="-1" aria-haspopup="true" data-listposition="center" id="DrpDwnMn0-5s3__more__linkElement" class="style-jezvofrxrepeaterButtonlinkElement"><div class="style-jezvofrxrepeaterButton_gapper"><div id="DrpDwnMn0-5s3__more__bg" class="style-jezvofrxrepeaterButtonbg" style="text-align: center;"><p id="DrpDwnMn0-5s3__more__label" class="style-jezvofrxrepeaterButtonlabel" style="text-align: center;">More</p></div></div></a></li></ul><div id="DrpDwnMn0-5s3moreButton" class="style-jezvofrxmoreButton"></div><nav data-drophposition="" data-dropalign="center" id="DrpDwnMn0-5s3dropWrapper" class="style-jezvofrxdropWrapper" style="visibility: hidden; left: 602px; right: auto; bottom: auto;"><ul id="DrpDwnMn0-5s3moreContainer" class="style-jezvofrxmoreContainer" style="visibility: hidden; left: 602px; right: auto;"></ul></nav></nav> -->
</header>
<footer>
</footer>
<div class="content-wrap">
<div class="content">
<div class="qCalcWrap">
<div class="page-title-wrap">
<h2 class="page-title">Quality Calculator</h2>
</div>
<div class="qCalc">
<p class="qCurrTotalText">Total Quality: <span id="qCurrTotal" class="qCalcVal">0</span>%<br>Remaining: <span id="qRemaining" class="qCalcVal">40</span>%</p>
<div class="qItems"></div>
</div><!-- /qCalc -->
<div id="add-btn" class="circle-btn add-btn"><span>+</span></div>
</div><!-- /qCalcWrap -->
</div><!-- /content -->
</div><!-- /content-wrap -->
</div>
<!-- jQuery -->
<!-- <script src="jquery.js"></script> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<!-- <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<!-- <script src="Hello World"></script> -->
<script>
jQuery(document).ready(function($) {
// var $qItems = $('.qItem');
$('#add-btn').click(function(event) {
// console.log($('.qItem'));
var qItemCount = $.isEmptyObject($('.qItem')) ? 0 : $('.qItem').length;
var qItemHtml = '<div id="qItem'+(qItemCount+1);
qItemHtml += '" class="qItem group"><div class="qItemInput"><label for="qItemInput'+(qItemCount+1);
qItemHtml += '" class="qItemInputLabel"></label><input type="number" id="qItemInput'+(qItemCount+1);
qItemHtml += '" class="qItemInput" min="1" max="39" placeholder="%"></div><div id="qItemText'+(qItemCount+1);
qItemHtml += '" class="qItemText"></div><div data-item-id="'+(qItemCount+1);
qItemHtml += '" class="circle-btn del-btn"><span>-</span></div></div>';
$('.qItems').append(qItemHtml);
});
$('.qItems').on('blur','input',function(event) {calcQuality();});
$('.qItems').on('click', '.del-btn', function(event) {
// event.preventDefault();
// console.log($(this).attr('data-item-id'));
var itemID = $(this).attr('data-item-id');
$('#qItem'+itemID).remove();
calcQuality();
});
function calcQuality() {
// console.log('qItemInput onblur');
var qCurrTotal = 0;
var qRemaining = 40;
// console.log($('.qItem input'));
$('.qItem input').each(function(index, item) {
var qValue = $(item).val() ? $(item).val() : 0;
// console.log('qValue: '+qValue);
qCurrTotal += parseInt(qValue);
// console.log('qCurrTotal: '+qCurrTotal);
qRemaining -= parseInt(qValue);
// console.log('qRemaining: '+qRemaining);
});
// console.log('qCurrTotal: '+qCurrTotal);
// console.log('qRemaining: '+qRemaining);
$('#qCurrTotal').text(qCurrTotal);
$('#qRemaining').text(qRemaining);
}
});
</script>
</body>
</html>