How to create Brother sister love calculator with javascript

Brother Sister Love Calculator – HTML, CSS & JavaScript Se Love Calculator Banaye

Kya aap HTML, CSS aur JavaScript se ek interesting calculator project banana chahte hain? Is tutorial mein hum ek simple aur colorful Brother Sister Love Calculator banayenge.

Ye project beginners ke liye useful hai kyunki ismein hum HTML form, CSS styling, JavaScript functions, DOM manipulation aur basic calculation logic ka use karenge.

Aap is project ko apne personal website, coding practice project ya JavaScript project collection mein bhi use kar sakte hain.

Brother Sister Love Calculator Kya Hai?

Brother Sister Love Calculator ek fun JavaScript project hai jisme user do names enter karta hai aur calculator ek percentage result show karta hai.

Example:

Brother Name: Rahul
Sister Name: Priya

Uske baad CALCULATE button par click karne par ek percentage result display hota hai.

Note: Ye result sirf entertainment ke liye hai. Ye actual relationship ya love ko scientifically measure nahi karta.

Is Project Mein Kaun Si Technologies Use Hui Hain?

Is calculator ko banane ke liye mainly 3 technologies use ki gayi hain:

HTML – webpage ka structure banane ke liye
CSS – design, colors, heart animation aur layout ke liye
JavaScript – names read karne aur result calculate karne ke liye

Brother Sister Love Calculator Ka Complete Code

Neeche complete HTML, CSS aur JavaScript code diya gaya hai:

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Brother Sister Love Calculator - Fun Love Calculator</title>

<meta name="description"
content="Try this fun Brother Sister Love Calculator made with HTML, CSS and JavaScript. Enter two names and calculate a fun compatibility percentage.">

<meta name="author" content="Gajabwap Tech World">

<link rel="shortcut icon"
href="https://www.oflox.com/blog/wp-content/uploads/2020/08/love.png">

<style>

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Bungee+Shade');
@import url('https://fonts.googleapis.com/css?family=Bungee');

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;
    background-color: brown;
    font-family: Arial, sans-serif;
}

h1 {
    background-color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    font-size: 2em;
    text-shadow: 2px 2px 3px rgba(0,0,0,.3);
    font-family: 'Bungee Shade';
    padding: 15px;
}

/* Heart */

.heart {
    margin: 30px auto;
    position: relative;
    background-color: red;
    height: 60px;
    transform: rotate(-45deg);
    width: 60px;
}

.heart:before,
.heart:after {
    content: "";
    background-color: yellow;
    border-radius: 50%;
    height: 60px;
    position: absolute;
    width: 60px;
}

.heart:after {
    left: 30px;
    top: 0;
}

.heart:before {
    top: -30px;
    left: 0;
}

/* Cards */

.persons {
    margin: 50px auto;
    position: relative;
    min-height: 280px;
    max-width: 600px;
}

.person {
    background-color: black;
    min-height: 200px;
    width: 45%;
    padding: 15px;
    border-radius: 10px;
}

#card1 {
    float: left;
}

#card2 {
    float: right;
}

.name {
    text-align: center;
    color: white;
    font-size: 20px;
    font-family: Arial;
}

.nameLabel {
    color: white;
    font-family: Arial, sans-serif;
    margin-left: 5px;
}

input[type=text] {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.setButton {
    background-color: #13213c;
    border: none;
    padding: 8px 15px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    margin: 5px auto;
    display: block;
    cursor: pointer;
    color: white;
    border-radius: 5px;
}

#compute {
    position: relative;
    background-color: #ff0000;
    display: block;
    margin: 40px auto 20px;
    border: none;
    color: white;
    font-family: 'Bungee';
    font-size: 20px;
    border-radius: 15px;
    padding: 10px 20px;
    cursor: pointer;
}

#compute:focus {
    background-color: white;
    color: #13213c;
    outline: none;
}

#resultLabel {
    text-align: center;
    margin: 20px auto;
    font-family: 'Indie Flower';
    font-size: 50px;
    font-weight: bold;
    color: white;
}

#resultLabel.animated::after {
    content: "";
    animation-name: calculating;
    animation-duration: 3s;
}

@keyframes calculating {

    0%   { content: "74%"; }
    10%  { content: "54%"; }
    20%  { content: "44%"; }
    30%  { content: "87%"; }
    40%  { content: "66%"; }
    50%  { content: "89%"; }
    60%  { content: "22%"; }
    70%  { content: "32%"; }
    85%  { content: "80%"; }
    100% { content: "35%"; }

}

/* Mobile Responsive */

@media(max-width:600px) {

    .person {
        width: 100%;
        float: none !important;
        margin-bottom: 20px;
    }

    .persons {
        min-height: auto;
    }

    h1 {
        font-size: 1.3em;
    }

    #compute {
        margin-top: 30px;
    }

}

</style>

</head>

<body>

<h1>Brother Sister Love Calculator!</h1>

<div class="heart"></div>

<div class="persons">

    <div class="person" id="card1">

        <p class="name" id="person1">
            Brother Name
        </p>

        <label class="nameLabel">
            Enter Brother Name:
        </label>

        <input type="text"
               id="nameInput1"
               placeholder="Enter Brother Name">

        <button onclick="update1()"
                class="setButton">
            SET
        </button>

    </div>


    <div class="person" id="card2">

        <p class="name" id="person2">
            Sister Name
        </p>

        <label class="nameLabel">
            Enter Sister Name:
        </label>

        <input type="text"
               id="nameInput2"
               placeholder="Enter Sister Name">

        <button onclick="update2()"
                class="setButton">
            SET
        </button>

    </div>


    <button onclick="magicHappens()"
            id="compute">

        CALCULATE

    </button>


    <p id="resultLabel"></p>

</div>


<script>

function update1() {

    var element =
        document.getElementById("nameInput1");

    var content = element.value.trim();

    if(content === "") {
        alert("Please enter Brother Name");
        return;
    }

    document.getElementById("person1")
        .innerHTML = content;

    element.value = "";

}


function update2() {

    var element =
        document.getElementById("nameInput2");

    var content = element.value.trim();

    if(content === "") {
        alert("Please enter Sister Name");
        return;
    }

    document.getElementById("person2")
        .innerHTML = content;

    element.value = "";

}


function compute() {

    var name1 =
        document.getElementById("person1")
        .innerHTML;

    var name2 =
        document.getElementById("person2")
        .innerHTML;

    var num1 = 0;
    var num2 = 0;


    for(var i = 0; i < name1.length; i++) {

        num1 =
            num1 + name1.charCodeAt(i);

    }


    for(var j = 0; j < name2.length; j++) {

        num2 =
            num2 + name2.charCodeAt(j);

    }


    var result =
        num1 * num2 * 273;

    var strRes =
        result.toString();

    return strRes.substring(0, 2) + "%";

}


function magicHappens() {

    var element =
        document.getElementById("resultLabel");

    element.innerHTML = "";

    element.classList.add("animated");

    setTimeout(function() {

        display();

    }, 3005);

}


function display() {

    var element =
        document.getElementById("resultLabel");

    element.innerHTML = compute();

    element.classList.remove("animated");

    document.getElementById("compute").blur();

}

</script>

</body>
</html>

JavaScript Calculation Kaise Work Karti Hai?

Is project ka main calculation JavaScript ke compute() function mein hai.

Sabse pehle dono names ko HTML se obtain kiya jata hai:

var name1 = document.getElementById("person1").innerHTML;
var name2 = document.getElementById("person2").innerHTML;

Uske baad JavaScript har character ka Unicode/character code calculate karti hai:

name1.charCodeAt(i)

Aur dono names ke calculated values ko multiply karke ek number generate kiya jata hai:

var result = num1 * num2 * 273;

Finally result ke starting digits ko percentage ke form mein display kiya jata hai:

return strRes.substring(0, 2) + "%";

Isliye calculator ka result fun algorithm ka output hai, actual love percentage nahi.

HTML Ka Role

HTML project ka basic structure create karta hai.

Ismein:

Heading
Name input boxes
SET buttons
Calculate button
Result area

banaya gaya hai.

Example:

<input type="text"
       id="nameInput1"
       placeholder="Enter Brother Name">

CSS Ka Role

CSS calculator ko attractive banata hai.

Is project mein CSS se:

Background color
Heart design
Input box
Buttons
Cards
Fonts
Responsive layout
Animation

create kiye gaye hain.

Heart CSS se banaya gaya hai, kisi image ki zarurat nahi hai.

JavaScript Ka Role

JavaScript calculator ka main logic handle karti hai.

JavaScript:

User ka name read karti hai.
Name ko page par display karti hai.
Character codes calculate karti hai.
Fun percentage generate karti hai.
Result ko screen par display karti hai.
Calculation animation show karti hai.

Is Project Ko Kaise Run Karein?

Is project ko run karna bahut easy hai.

Step 1

Notepad ya VS Code open karein.

Step 2

Upar diya complete code copy karein.

Step 3

File ko save karein:

love-calculator.html

Step 4

File par double-click karein.

Browser mein Brother Sister Love Calculator open ho jayega.

Blogger Mein Is Calculator Ko Kaise Add Karein?

Agar aap is project ko Blogger website par add karna chahte hain, to ek important baat yaad rakhein:

Blogger post mein HTML/CSS/JavaScript ka code use kiya ja sakta hai, lekin Blogger editor kabhi-kabhi <script> aur kuch HTML elements ko sanitize ya modify kar sakta hai.

Isliye pehle calculator ko standalone HTML file mein test karna better hai.

Agar Blogger mein directly add karna hai, to post editor ke HTML view mein required HTML/CSS/JavaScript add karein.

Responsive Love Calculator

Is version mein basic responsive CSS bhi add ki gayi hai, jisse calculator mobile screen par bhi better fit ho sake.

Desktop par dono name cards side-by-side दिखाई देंगे, jabki small screen par cards vertically arrange ho jayenge.

Important Note

Ye Love Calculator ek entertainment/coding project hai. Iska percentage result names ke characters se banne wale mathematical output par based hai.

Is result ko real relationship compatibility, personality matching ya actual love measurement nahi maana jaana chahiye.

Frequently Asked Questions

1. Love Calculator kis language mein bana hai?

Ye project HTML, CSS aur JavaScript ka use karke banaya gaya hai.

2. Kya is Love Calculator ko free mein use kar sakte hain?

Haan, ye ek simple browser-based fun project hai.

3. Kya Love Calculator ka result real hota hai?

Nahi. Result ek programming algorithm se generate hota hai aur entertainment purpose ke liye hai.

4. Kya beginners ye project bana sakte hain?

Bilkul. Ye beginners ke liye HTML, CSS aur JavaScript practice karne ka simple project hai.

5. Kya is calculator ko Blogger par add kar sakte hain?

HTML/CSS/JavaScript based version ko Blogger mein suitable HTML view se add kiya ja sakta hai, lekin Blogger ke editor restrictions ki wajah se code ko test karna zaroori hai.

Conclusion

Brother Sister Love Calculator ek simple aur interesting HTML CSS JavaScript project hai. Is project ke through beginners DOM manipulation, JavaScript functions, CSS styling, form inputs aur basic calculations ko practically samajh sakte hain.

Agar aapko HTML, CSS, JavaScript, PHP, Web Designing, SEO aur coding tutorials pasand hain, to Gajabwap Tech World par aur bhi practical projects aur tutorials explore kar sakte hain.

Gajabwap Web in Hindi – Tech, AI, Blogging & Computer Tips

Search This Blog