"Love calculator"
Bootstrap 4.1.1 Snippet by 8huvaneswar

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>Love Calculator</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
</style>
<body>
<div class="bg_heart"></div>
<div id="preloader">
<div class="bg-cover"><img src="https://www.heart2heartrelationships.com/wp-content/uploads/2018/06/heart.gif" class="img-fluid bg-white"></div>
</div>
<div class="container text-center">
<div class="clearfix">
<div class="calc col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<h2 class="white-text">Love Calculator</h2>
<h5 class="white-text">Enter your Names to Check Your LOVE!!!! </h5>
<form role="form" class="form-horizontal">
<div class="form-group">
<input type="text" class="form-control" name="names" placeholder="Person One" />
</div>
<div class="form-group">
<input type="text" class="form-control" name="names" placeholder="Person Two" />
</div>
<div class="form-group">
<button class="btn btn-danger pull-right" type="submit" id="submit">Calculate</button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
.calc {
margin-top: 50px;
margin-bottom: 50px;
padding:20px 50px;
border: 5px solid #d9534f;
background-color: #d44844;
border-radius: 50px;
clear: both;
}
.form-group button{
text-align: center;
}
.btn-danger {
color: #d44844;
background-color: #fff;
border-color: #fff;
width: 100%;
font-weight: 900;
}
#result {
color: rgb(255, 255, 255);
font-size: 85px;
text-shadow: 1px 1px 1px #646161;
/*height: 150px;*/
}
.bg_heart {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden
}
.heart {
position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
function love(array) {
var hold = [],
result,
newArray;
if (array.length > 2) {
newArray = array.map(function(item, index, array) {
return item + array[index + 1];
});
newArray.forEach(function(item) {
if (typeof item === "number" && !isNaN(item)) {
if (item < 10) {
hold.push(item);
} else if (item > 9) {
console.log('Splitting' + item + " into " + item.toString()[0] + " and " + item.toString()[1]);
hold.push(parseInt(item.toString()[0]));
hold.push(parseInt(item.toString()[1]));
}
} else {
console.log("failed number check: " + item);
}
});
love(hold);
} else {
document.getElementById('result').textContent = array[0] + "" + array[1] + "%";
result = array[0] + "" + array[1] + "%";
return result;
}
}
function calculate() {
var inputs = document.getElementsByName('names'),
loves = ["l", "o", "v", "e", "s"],
countArray = [],
count,
names,
jointNames;
document.getElementById('warning').textContent = "";
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Angular
Bootstrap Loan Calculator
Like / Love / Share / Delete

Questions / Comments: