Make a BROTHER SISTER LOVE CALCULATOR using HTML & CSS
Love calculators have been around for centuries. They are based on the idea that the letters in your name have a numerical value, and that these values can be used to calculate your compatibility with another person.
While there is no scientific evidence to support the accuracy of love calculators, they can be a fun way to see how compatible you are with someone else. And, if you are a fan of JavaScript, HTML, and CSS, you can even create your own love calculator!
In this article, we will show you how to create a BROTHER SISTER Love Calculator using JavaScript, HTML, and CSS. We will also provide you with the code you need to get started.
So, whether you are looking for a fun way to pass the time or you are a JavaScript enthusiast, this article is for you!
Here are some of the things you will learn in this article:
- How to create a simple love calculator using JavaScript, HTML, and CSS.
By the end of this article, you will be able to create your own BROTHER SISTER Love Calculator that you can share with your friends and family!
CSS Code
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.pexels.com/photos/1028725/pexels-photo-1028725.jpeg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
header {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML Code
<div class="card w-50 m-auto text-center ">
<div class="card-header bg-danger text-white">BROTHER-SISTER LOVE CALCULATOR</div>
<div class="card-body">
<form class="form-inline w-75 m-auto">
<div class="form-group">
<input type="text" name="" class="form-control text-center" placeholder="SISTER" id="name">
</div>
<div class="pl-4 pr-4">
<span> + </span>
</div>
<div class="form-group">
<input type="text" name="" class="form-control text-center" placeholder="BROTHER" id="lname">
</div>
</form>
<br>
<div class="w-70 m-auto">
<button class="btn btn-success w-50" onclick="checkloveper()"> click </button>
</div>
<br>
<div>
<input type="text" name="" placeholder="LOVE PERCENTAGE" class="form-control text-center w-25 m-auto" id="lovevalue">
</div>
</div>
<div class="card-footer ">God Bless Your RelationShip</div>
</div>
Javascript Code
function checkloveper() {
var name = document.getElementById('name').value;
var lname = document.getElementById('lname').value;
if (name == "") {
alert('Please enter your name');
} else if (name.length <= 2) {
alert('Min lenght is 3')
} else if (!isNaN(name)) {
alert('Numbers are not allowed');
} else if (lname == "") {
alert('Please enter your love name');
} else if (lname.length <= 2) {
alert('Min lenght is 3')
} else if (!isNaN(lname)) {
alert('Numbers are not allowed');
} else {
var lovdata = Math.random() * 100;
lovdata = Math.floor(lovdata);
document.getElementById('lovevalue').value = lovdata + "%";
}
}
Here are the steps on how you can use this code in your Blogger website:
- Sign in to your Blogger account.
- Click on the Blog that you want to use.
- Click on the Theme tab.
- In the My theme section, click on the Edit HTML button.
- Remove all the previous code from your blogger site's Edit Template Page.
- Copy the FULL code from below and paste it into your blogger site's Edit Template Page.
- Click on the Save button, at the right most corner.
You can also upload a custom code to your Blogger website. To do this, follow these steps:
- Sign in to your Blogger account.
- Click on the Blog that you want to upload the custom code to.
- Click on the Theme tab.
- In the My theme section, click on the More button.
- Click on the Restore button.
- Select the custom code file from your computer.
- Click on the Open button.
- Click on the Apply button, and your custom coded website will be ready on blogger
Here are some additional tips for changing the theme of your Blogger website:
- If you are not sure which theme to choose, you can preview the different themes before you apply them. To do this, click on the Preview button next to the theme that you want to preview.
- If you want to make changes to a custom theme, you can edit the theme's HTML, CSS, and JS code. To do this, click on the More button next to the theme, and then click on the Edit HTML button.
- If you are having trouble changing the theme of your Blogger website, you can contact Blogger support for help.
Full Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<style>
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.pexels.com/photos/1028725/pexels-photo-1028725.jpeg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
header {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<header>
<div class="card w-50 m-auto text-center ">
<div class="card-header bg-danger text-white">BROTHER-SISTER LOVE CALCULATOR</div>
<div class="card-body">
<form class="form-inline w-75 m-auto">
<div class="form-group">
<input type="text" name="" class="form-control text-center" placeholder="SISTER" id="name">
</div>
<div class="pl-4 pr-4">
<span> + </span>
</div>
<div class="form-group">
<input type="text" name="" class="form-control text-center" placeholder="BROTHER" id="lname">
</div>
</form>
<br>
<div class="w-70 m-auto">
<button class="btn btn-success w-50" onclick="checkloveper()"> click </button>
</div>
<br>
<div>
<input type="text" name="" placeholder="LOVE PERCENTAGE" class="form-control text-center w-25 m-auto" id="lovevalue">
</div>
</div>
<div class="card-footer ">God Bless Your RelationShip</div>
</div>
</header>
<script>
function checkloveper() {
var name = document.getElementById('name').value;
var lname = document.getElementById('lname').value;
if (name == "") {
alert('Please enter your name');
} else if (name.length <= 2) {
alert('Min lenght is 3')
} else if (!isNaN(name)) {
alert('Numbers are not allowed');
} else if (lname == "") {
alert('Please enter your love name');
} else if (lname.length <= 2) {
alert('Min lenght is 3')
} else if (!isNaN(lname)) {
alert('Numbers are not allowed');
} else {
var lovdata = Math.random() * 100;
lovdata = Math.floor(lovdata);
document.getElementById('lovevalue').value = lovdata + "%";
}
}
</script>
</body>
</html>
Join the conversation