Bootstrap

How to Create a Beautiful Love Calculator Using JavaScript

by Niyander

Hello friends! In this article, I’m excited to share how you can build a charming Love Calculator using JavaScript. This project will help you learn how to combine HTML, CSS, and JavaScript to create an engaging web application. / How to Create a Beautiful Love Calculator Using JavaScript

Introduction

Creating a Love Calculator is a fun way to enhance your web development skills. This project involves building a simple web app that calculates a love percentage based on user input. With basic knowledge of HTML, CSS, and JavaScript, you’ll be able to create a visually appealing and functional application.

Demo and Source Code / You can see a live demo of the Love Calculator here:
See Demo

Download Full Source Code / For the full source code, visit the following links:
View Full Source Code

 

Building the Love Calculator

Step 1: Create the Basic HTML Template
Start by creating a basic HTML template. Save this file as index.html.

<!DOCTYPE html>
<html>
<head>
<title>Love Calculator</title>
</head>
<body>
<h1>Love Calculator</h1>
<p>This is a paragraph.</p>
</body>
</html>

 

Step 2: Add CDN Links for Styling
Enhance the appearance of your application by including Bootstrap 5 and Google Fonts CDN links in the <head> section of your HTML.

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Google Fonts CSS -->
<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=Comfortaa&display=swap" rel="stylesheet">

 

Step 3: Update the HTML Body
Replace the content inside the <body> tag with the following code. This code creates a simple card layout for your Love Calculator.

<div class="cont">
<div class="row">
<div class="col-md-6">
<div class="d-none d-md-block">
<img src="love1.jpg" class="ig"/>
</div>
</div>
<div class="col-md-6 col-lg-6">
<h2 style="color:pink;">Try the Love Calculator</h2>
<hr/>
<form method="POST" onclick="return false" id="myform">
<div class="form-group">
<label for="text">Your Name:</label>
<input type="text" class="form-control" id="fname" placeholder="Your name" name="fname" autocomplete="off">
</div>
<br/>
<div class="form-group">
<label for="text">Crush Name:</label>
<input type="text" class="form-control" id="sname" placeholder="Crush name" name="sname" autocomplete="off">
</div>
<br/>
<br/>
<button type="submit" class="btn btn btl" id="btn" onclick="checkLovePercentage()">Submit</button>
<br/><br/><br/>
<div class="form-group">
<h6 class="text-center" id="demp"> </h6>
<h2 class="text-center">Love Percentage</h2>
<h1 class="text-center"><span id="demo"></span></h1>
<span id="dem"></span>
</div>
<br/>
</form>
</div>
</div>
</div>

 

Step 4: Apply Custom CSS
Add the following CSS code within the <style> tags in the <head> section to style your Love Calculator.

<style>
body {
margin: 0;
padding: 0;
font-family: 'Comfortaa', cursive;
}
.row {
background-color: #ffffff;
margin-top: 5%;
border-radius: 4px;
box-shadow: 0 1px 1px 0 rgb(255,105,180), 0 6px 20px 0 rgb(255,192,203);
padding: 5%;
}
hr {
width: 80%;
align: left;
color: #e91e63;
}
#fname, #sname {
border: 1.2px solid pink;
border-radius: 4px;
}
.cont {
margin: auto;
width: 62%;
}
#demp {
margin-bottom: 15px;
}
@media only screen and (max-width: 600px) {
body {
margin: 0;
padding: 0;
}
.cont {
width: 82%;
}
}
.ig {
border-radius: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 88%;
height: 500px;
}
.btl {
background-color: #ff9dbe;
border-color: #ff9dbe;
color: white;
}
.card {
width: 95%;
margin-top: 40px;
margin-bottom: 20px;
}
</style>

 

Step 5: Implement JavaScript Functionality
Add the following JavaScript code just before the closing </body> tag. This script calculates the love percentage and provides feedback based on the result.

<script>
function checkLovePercentage() {
var name = document.getElementById('fname').value;
var lname = document.getElementById('sname').value;
name = name.toLowerCase();
lname = lname.toLowerCase();

if (name === "") {
alert('Please Enter Your Name');
} else if (name.length <= 2) {
alert('Minimum length is 3 characters');
} else if (!isNaN(name)) {
alert('Numbers are not allowed in names');
} else if (lname === "") {
alert('Please Enter Your Crush Name');
} else if (lname.length <= 2) {
alert('Minimum length is 3 characters');
} else if (!isNaN(lname)) {
alert('Numbers are not allowed in names');
} else {
var loveData = Math.random() * 100;
loveData = Math.floor(loveData);
document.getElementById("demo").innerHTML = loveData + "%";

if (loveData >= 65) {
document.getElementById("demp").innerHTML = "<span style='background-color:#ff007f;color:white;display: inline-block; padding: 5px 10px; border-radius: 3px;'> " + name + " loves " + lname + "</span>";
document.getElementById("dem").innerHTML = "My favorite place in the world is by your side. My favorite distraction is you.";
}
}
}
</script>

 

Conclusion

Your Love Calculator is now ready! Refresh your HTML page, enter your name and your crush’s name, and click “Submit” to see the love percentage. This simple project combines HTML, CSS, and JavaScript to create an engaging and interactive web application. Feel free to customize and expand on this project as you see fit!

Follow me for more cool projects and tutorials.