Love Calculator

<!doctype html>
<html lang="en">
<head>
<title>Love Calculator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap" rel="stylesheet">
<style>/* Created by Mahmoud Al Hussain */

:root {
--height: 0px;
}

body {
font-family: "Oleo Script", cursive;
background-color: #fdfdfd !important;
}

#calculator {
background-color: #ecf8f8;
max-width: 400px;
}

.container div div:first-child span:first-child {
color: #d90429;
}

.btn-primary,
.bg-primary {
background-color: #f72585 !important;
}

.bg-danger {
background-color: #ef476f !important;
}

.bg-success {
background-color: #1d3557 !important;
}

.red {
color: #d90429;
}

button {
min-width: 25% !important;
}

input {
border: 0;
outline: 3px solid;
outline-color: #f72585;
outline-style: double;
}

.border-danger {
border-color: #f72585 !important;
}

.text-dark {
color: #023047 !important;
}

.percentage {
z-index: 3;
}

.position-relative {
width: 125px;
height: 110px;
}

.z-index-1 {
z-index: 1;
}

.z-index-2 {
z-index: 2;
}

.heart {
position: absolute;
width: 125px;
height: 110px;
}

.heart::before,
.heart::after {
content: "";
position: absolute;
bottom: 0;
width: 62.5px;
border-radius: 50px 50px 0 0;
}

.heart:first-child::before,
.heart:first-child::after {
height: 100px;
background: #130102;
}

.heart:last-child::before,
.heart:last-child::after {
height: var(--height);
background: #d90429;
}

.heart::before {
left: 62.5px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}

.heart::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}

.pulse {
animation: heart-pulse 1.0s infinite ease-out;
}

@keyframes heart-pulse {
0% {
      transform: scale(0.65);
}

50% {
      transform: scale(1.2);
}

70% {
      transform: scale(0.75);
}

100% {
      transform: scale(0.65);
}
}

.bg-animated {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 10s ease infinite;
}

@keyframes gradient {
0% {
      background-position: 0% 50%;
}

50% {
      background-position: 100% 50%;
}

100% {
      background-position: 0% 50%;
}
}
</style>
</head>
<body>
<div class="container p-2">
    <div class="mx-auto p-2 border border-4 border-danger rounded" id="calculator">
      <div class="p-1 bg-light text-center h4 border border-2 border-danger rounded"><span>Love</span> <span class="text-dark">Calculator</span></div>
      <div class="d-flex flex-column">
        <input class="my-3 mx-auto col-10" placeholder="Enter your name" type="text" id="name1">
        <input class="my-3 mx-auto col-10" placeholder="Enter your soulmate name" type="text" id="name2">
        <div class="bg-secondary mb-3">
          <div id="myBar" class="bg-danger text-white text-center py-2" style="width: 0;">0%</div>
        </div>
        <h4 class="text-center bg-light p-1 d-none border border-2 border-danger rounded text-dark mb-3" id="msg"> 
        </h4>
        <div class="position-relative mx-auto mb-3">
          <div class="heart z-index-1"></div>
          <div class="text-dark h3 d-flex heart z-index-2">
            <div class="mx-auto my-auto percentage text-light h3">0%</div>
          </div>
        </div>
        <button type="button" class="btn btn-primary mx-auto px-2">Calculate</button>
      </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script>// Created by Md.Siddikur Rahman

   window.onload=function() { const btn = document.querySelector("button"),
    msg = document.querySelector("#msg"),
    emptyHeart = document.querySelector(".heart:first-child"),
    filledHeart = document.querySelector(".heart:last-child"),
    container = document.querySelector("#calculator");

    btn.addEventListener("click", () => {
    let yourName = document.querySelector("#name1").value,
        soulmate = document.querySelector("#name2").value,
        random = Math.floor(Math.random() * 101);

    emptyHeart.classList.remove("d-none");
    filledHeart.classList.remove("pulse");
    container.classList.remove("bg-animated");
    msg.classList.remove("d-none");
    msg.innerHTML = `<span class="mx-2">${yourName.trim()}</span><span class="mx-2 red">&</span><span class="mx-2">${soulmate.trim()}</span>`;

    if (yourName && soulmate) {

        const bar = document.querySelector("#myBar"),
        root = document.documentElement,
        zIndexPercentage = document.querySelector(".percentage");
        let percentage = 0,
        animation = setInterval(startAnimation, 50);

        function startAnimation() {
        btn.disabled = true;
        percentage >= random ? clearInterval(animation) : percentage++;
        root.style.setProperty("--height", percentage + "px");
        zIndexPercentage.textContent = `${percentage}%`;
        bar.style.width = `${percentage}%`;
        bar.innerHTML = `${percentage}%`;
        if (percentage == random) {
            btn.disabled = false;
            if (random == 100) {
            filledHeart.classList.add("pulse");
            emptyHeart.classList.add("d-none");
            container.classList.add("bg-animated");
            }
        }
        }
    } else {
        msg.innerHTML = `<span class="mx-2">You can't leave fields empty</span>`;
    }
    });
}

</script>
</body>
</html>

Love Calculator

Contact Form