<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="//code.jquery.com/jquery-1.11.1.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>
</div>
</form>
<p id="warning" class="text-danger"></p>
<div id="result" class="text-center"></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#preloader")
.show()
.delay(5000)
.fadeOut()
.hide("slow");
});
</script>
</body>
</html>
.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;
top: -50%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-m-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.heart:before {
position: absolute;
top: -50%;
left: 0;
display: block;
content: "";
width: 100%;
height: 100%;
background: inherit;
border-radius: 100%;
}
.heart:after {
position: absolute;
top: 0;
right: -50%;
display: block;
content: "";
width: 100%;
height: 100%;
background: inherit;
border-radius: 100%;
}
@-webkit-keyframes lovers {
0%{top:110%}
}
@-moz-keyframes lovers {
0%{top:110%}
}
@-ms-keyframes lovers {
0%{top:110%}
}
@keyframes lovers {
0%{top:110%}
}
#preloader{
background: #fff;
width: 100%;
height: 100%;
position: relative;
right: 0;
left: 0;
bottom: 0;
}
.bg-cover{
background: #fff;
width: 100%;
height: 100vh;
text-align: center;
left: 0;
right: 0;
z-index: 999;
position: absolute;
}
.bg-white{
background: #fff;
}
.white-text{
color: #fff;
}
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 = "";
if (!inputs[0].value || !inputs[1].value) {
document.getElementById('warning').textContent = "Please enter both names.";
} else {
names = "" + inputs[0].value + "" + inputs[1].value + "";
jointNames = names.toLowerCase();
countArray = loves.map(function(item) {
count = 0;
for (var i = 0; i < jointNames.length; i += 1) {
if (item === jointNames[i]) {
count += 1;
}
}
return count;
});
love(countArray);
}
}
document.getElementById('submit').addEventListener('click', function(e) {
e.preventDefault();
calculate();
}, false);
var lovers = setInterval(function() {
var r_num = Math.floor(Math.random() * 40) + 1;
var r_size = Math.floor(Math.random() * 65) + 10;
var r_left = Math.floor(Math.random() * 100) + 1;
var r_bg = Math.floor(Math.random() * 25) + 100;
var r_time = Math.floor(Math.random() * 5) + 5;
$('.bg_heart').append("<div class='heart' style='width:" + r_size + "px;height:" + r_size + "px;left:" + r_left + "%;background:rgba(255," + (r_bg - 25) + "," + r_bg + ",1);-webkit-animation:lovers " + r_time + "s ease;-moz-animation:lovers " + r_time + "s ease;-ms-animation:lovers " + r_time + "s ease;animation:lovers " + r_time + "s ease'></div>");
$('.bg_heart').append("<div class='heart' style='width:" + (r_size - 10) + "px;height:" + (r_size - 10) + "px;left:" + (r_left + r_num) + "%;background:rgba(255," + (r_bg - 25) + "," + (r_bg + 25) + ",1);-webkit-animation:lovers " + (r_time + 5) + "s ease;-moz-animation:lovers " + (r_time + 5) + "s ease;-ms-animation:lovers " + (r_time + 5) + "s ease;animation:lovers " + (r_time + 5) + "s ease'></div>");
$('.heart').each(function() {
var top = $(this).css("top").replace(/[^-\d\.]/g, '');
var width = $(this).css("width").replace(/[^-\d\.]/g, '');
if (top <= -100 || width >= 150) {
$(this).detach();
}
});
}, 500);
