Love Percentage Calculator | Source code Free
Love Percentage Calculator | Source code Free
This single-page web application provides a fun and interactive way to calculate the love percentage between two individuals. Here's a breakdown of its key components:
HTML Structure:
The HTML structure is straightforward, consisting of a container div that holds the entire content.
Inside the container, there's a title for the app ("Love Percentage Calculator"), an input section where users can enter two names, a button to trigger the calculation, a div to display the result, and a div for the progress bar.
CSS Styling:
The CSS is used to style the elements and layout of the application.
It sets the background color, font family, and centers the content both vertically and horizontally on the page.
The input fields, button, and result display are styled for better visual appeal.
The progress bar is styled to have a green color and a rounded shape.
JavaScript Functionality:
The JavaScript code handles the logic for calculating the love percentage and updating the progress bar.
When the user clicks the "Calculate" button, the calculatePercentage() function is triggered.
Inside this function, it retrieves the values of the input fields (names) and converts them to lowercase.
It then iterates through the characters of both names to count the common letters.
After calculating the love percentage, it updates the result display with the percentage and adjusts the width of the progress bar accordingly, creating an animated effect.
The love percentage calculation considers the total number of letters in both names and the number of common letters to determine the compatibility score.
Overall:
The application provides a simple and intuitive interface for users to input names and instantly see the love percentage between them.
The animated progress bar adds a visual element to the calculation process, making it more engaging for users.
While the calculation is simplistic and meant for entertainment purposes, it demonstrates the integration of HTML, CSS, and JavaScript to create interactive web applications.
Source code For a Single Page File name : "index.html"
open your VS code or Any tools and create a file and paste it code there.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love Percentage Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
.input-container {
margin-bottom: 20px;
}
input {
padding: 10px;
margin-right: 10px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
.result {
margin-bottom: 20px;
}
.progress-container {
width: 50%;
margin: auto;
}
.progress {
width: 0%;
background-color: #4CAF50;
height: 30px;
border-radius: 15px;
transition: width 1s ease-in-out;
}
</style>
</head>
<body>
<div class="container">
<h1>Love Percentage Calculator</h1>
<div class="input-container">
<input type="text" id="name1" placeholder="Enter name 1">
<input type="text" id="name2" placeholder="Enter name 2">
<button onclick="calculatePercentage()">Calculate</button>
</div>
<div id="result" class="result"></div>
<div class="progress-container">
<div id="progress" class="progress"></div>
</div>
</div>
<script>
function calculatePercentage() {
var name1 = document.getElementById('name1').value.toLowerCase();
var name2 = document.getElementById('name2').value.toLowerCase();
var totalLetters = name1.length + name2.length;
var commonLetters = 0;
for (var i = 0; i < name1.length; i++) {
for (var j = 0; j < name2.length; j++) {
if (name1[i] === name2[j]) {
commonLetters++;
break;
}
}
}
var lovePercentage = Math.floor((commonLetters / totalLetters) * 100);
document.getElementById('result').innerHTML = "Love percentage between " + name1 + " and " + name2 + " is " + lovePercentage + "%";
document.getElementById('progress').style.width = lovePercentage + '%';
}
</script>
</body>
</html>
No comments: