Build a Love Calculator App Using HTML, CSS & JavaScript ❤

Love is everywhere , in this blog post i will show you how you can build the love calculator web app using html css & javascript

Whether you're learning web development or just want to impress your friends with a quirky web tool, this app is a great beginner-friendly project.

🎯 Concept of Love Calculator App?

A Love Calculator is a fun app where users enter two names (usually their own and their crush’s) and it returns a “love percentage” result—purely for entertainment!

🚀 Key Features

• 🔤 Input fields for two names

• 🧮 Random love percentage generator

• 🎨 Stylish and mobile-friendly UI

• 🔁 Automatically Reload every 5 Seconds

🛠️ Technologies Used

1. HTML – for structuring the app

2. CSS – for styling and layout

3. JavaScript – to calculate and display results dynamically

HTML Code

<div id="conatiner">
        <input type="text" placeholder="Enter Your Name" id="yourName" required >
        <input type="text" placeholder="Enter Your Crush Name" id="crushName" required >
        <button id="love" onclick="calclove()">Calculate Love ❤</button>
        <p>Build by   xcodervicky 😎</p>
    </div>

above code I have used id #container and user 2 input field one input field is Your Name & other input field enter your Crush Name

and the last step use button tag to calculate love also i have use click event is onclick() when user click on button Love score is Display

CSS Code

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;1,600&display=swap');

* {
    font-family: "Montserrat", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: linear-gradient(to right, red,purple);
}

#conatiner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}
input  {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: none;
    outline: none;
    width: 350px;
    font-family: monospace;
    font-size: 18px;
}

button {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: none;
    outline: none;
    font-size: 20px;
    width: 350px;
    font-family: monospace;
    font-weight: 600;

}

p {
    margin-top: 80px;
    color: rgb(49, 48, 48);
    background: white;
    border-radius: 10px;
    padding: 6px;
    font-size: 9px;
}

in this css code i will use Gradient background also i will center my container horizontally & Vertically then the are design the input field that width is 350px and font-size is 18px

And now the last step design the button its give same width 350px & font-size is 20 & font weight is 600

Javascript code

// Generate random love score between 1 and 100
    var loveScore = Math.random() * 100;
    loveScore = Math.floor(loveScore) + 1;
    console.log(loveScore);

    // Main function to calculate love
    function calclove() {
      // Get input values
      const yourName = document.getElementById("yourName").value.trim();
      const crushName = document.getElementById("crushName").value.trim();
      // If both names are filled
      if (yourName !== "" && crushName !== "") {
        // Show result using SweetAlert
        Swal.fire({
          title: "Your Love Score",
          text: "Your Love Calculate Score is " + loveScore + "%",
          icon: "success"
        });
        // Reload page after 5 seconds
        setTimeout(function () {
          location.reload();
        }, 5000);
      } else {
        // Show error if names are missing
        Swal.fire("Please fill your name & Crush Name");
      }
    }

This is javascript code that generated random number to calculate the love score When user fill two input felid and click on button then function will be run & user get love score

Final Words

The Love Calculator App is a light-hearted way to improve your front-end coding skills. It's quick to build and a great addition to your portfolio. Don’t forget—real love can't be calculated, but coding it is super fun!

###