The included HTML code introduces an engaging "Love Calculator" webpage, combining JavaScript for added functionality and CSS for an aesthetically pleasing design. The implementation includes measures like disabling right-click and blocking specific keyboard shortcuts to enhance the overall user experience.
The main feature of the page is a visually appealing "love-calculator" container, inviting users to input their names and discover their love percentage. The JavaScript logic behind the scenes calculates this percentage using predefined name pairs. The result is then dynamically displayed on the page, accompanied by a corresponding emoji representation. This interactive and playful webpage offers users a fun way to estimate the love percentage between two names.
Demo Or Live Preview Is Available
To access a demonstration or view a live preview, simply click on the prominent button labeled "Demo" or "Live Preview" provided below.
Steps For Creating Love Calculator Tool
Step 1: Login to Blogger
Step 2: Access the Dashboard: 💖 On the Blogger homepage, click on the dropdown menu next to the blog you want to create a page for.
Step 3: Navigate to Pages: Click on "Pages" in the left sidebar.
Step 4: Create a New Page: Click the "New 📄 page" button.
Step 5: Enter a title for your page in the "Page title" field.
Step 6: Choose "Page 📄 Mode" in "HTML View".
Step 7: Copy the provided 👇 code snippet, and then navigate to the "HTML View" section where you can paste the code.
<style>
.love-calculator {
border: 1px solid #ccc;
/* Add border */
padding: 20px;
border-radius: 5px;
text-align: center;
box-shadow: none;
/* Remove shadow */
}
label,
input {
display: block;
margin-bottom: 10px;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
cursor: pointer;
position: relative;
/* Needed for positioning the pseudo-element */
overflow: hidden;
/* Clip the animation within the button */
/* Animation */
animation: wave 1.5s infinite;
}
@keyframes wave {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
#result {
margin-top: 20px;
font-weight: bold;
font-size: 24px;
text-align: center;
}
#result.success {
color: rgb(0, 128, 0);
/* Green */
}
#result.failure {
color: rgb(255, 0, 0);
/* Red */
}
.emoji {
margin-top: 10px;
font-size: 32px;
}
.emoji.success {
color: rgb(0, 128, 0);
/* Green */
}
.emoji.failure {
color: rgb(255, 0, 0);
/* Red */
}
</style>Step 8: Paste the following HTML code directly beneath the previously inserted code.
<div class="love-calculator"> <h2>Love Calculator</h2> <label>Your Name:</label> <input type="text" id="your-name" placeholder="Your Name"> <label>Partner's Name:</label> <input type="text" id="partner-name" placeholder="Partner's Name"> <button class="button" id="calculate-btn"><i class="icon demo"></i>Calculate</button> <div id="result"></div> </div>
Step 9: Paste the following JavaScript code directly beneath the previously inserted code.
<script>
const calculateBtn = document.getElementById("calculate-btn");
const yourNameInput = document.getElementById("your-name");
const partnerNameInput = document.getElementById("partner-name");
const resultContainer = document.getElementById("result");
// Store percentages for specific name pairs
const namePairsPercentages = {
"jaydatt|rani": 100,
"rani|jaydatt": 100,
"jaydatt|sneha": 100,
"sneha|jaydatt": 100,
"jaydatt|Snehaa": 100,
"snehaa|jaydatt": 100,
"raj|lisha": 100,
"lisha|raj": 100,
// Add more name pairs and percentages as needed
};
calculateBtn.addEventListener("click", () => {
const yourName = yourNameInput.value.trim();
const partnerName = partnerNameInput.value.trim();
if (yourName === "" || partnerName === "") {
displayResult("Please enter both names.", "failure");
return;
}
const lovePercentage = calculateLovePercentage(yourName, partnerName);
const resultText = `Love Percentage between ${yourName} and ${partnerName}: ${lovePercentage}%`;
const emoji = getEmoji(lovePercentage);
displayResult(resultText, emoji);
});
function calculateLovePercentage(name1, name2) {
// Check if a specific percentage is defined for the name pair
const key = `${name1.toLowerCase()}|${name2.toLowerCase()}`;
if (namePairsPercentages.hasOwnProperty(key)) {
return namePairsPercentages[key];
} else {
// Calculate a random love percentage between 50 and 100
return Math.floor(Math.random() * 51) + 50;
}
}
function getEmoji(percentage) {
if (percentage >= 81) {
return "🥰";
} else if (percentage >= 61) {
return "😊";
} else {
return "😢";
}
}
function displayResult(text, emoji) {
resultContainer.innerHTML = `<p>${text}</p><div class="emoji">${emoji}</div>`;
}
</script>Step 10: Save, Preview, or Publish: Click "Save" to save the post as a draft, Click "Preview" to see how the post will look, Click "Publish" to make the post live.
Disclaimer:
Warning - All content and posts on this platform are the intellectual property of It Is Unique Official. Unauthorized copying, reproduction, or distribution of our content is strictly prohibited. Any attempt to replicate or use our material without explicit permission may result in legal action. Please respect our intellectual property rights and contact us for inquiries regarding the use of our content. Thank you for your understanding and cooperation.
Conclusion
The HTML code introduces a charming "Love Calculator" webpage, encouraging users to input their names for a calculated love percentage. This interactive experience is made possible through the integration of JavaScript, which not only dynamically computes the love percentage but also includes features like preventing right-click and blocking certain keyboard shortcuts. The CSS styling enhances the visual appeal of the webpage, creating an engaging atmosphere for users.
The love percentage calculation, complemented by emoji representations, adds a delightful and whimsical touch to the overall user interaction. In summary, this webpage provides a playful and interactive platform for users to explore the concept of love percentages, offering a fun and enjoyable experience as they input different name pairs.