Bootstrap

Create Beautiful Love Calculator using JavaScript & Bootstrap 5

by Niyander

In this article i am gone to share how you can Create Beautiful Love Calculator using JavaScript with you..ย 

Create Beautiful Love Calculator using JavaScript

Also Learn about: How to Create Cat Fact applicationย Using Free Api

 

Visit This Link to See Demoย 

To Build This Type of application You Need Some Basic knowledge just Likeย 

  1. HTML
  2. CSS,
  3. JavaScript

Follow My Steps to Create beautiful application like that

Step 1) First Create basic Html Template like that
<!DOCTYPE html>
<html>
  <head>
  ย  <title>PageTitle</title>
  </head>
  <body>
  ย  <h1>Love calculator</h1>
  ย  <p>This is a paragraph.</p>
  </body>
</html>

 

Step 2) Use Some Basic CDN links to Make Page More attractive
in This i Use 2 CDN links
  • Bootstrap 5
  • Google Fonts

Copy this CDN links and Put on Head tag. / Bootstrap 5

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

Copy this CDN links and Put on Head tag. / Google Fonts

<!-- 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">

Now Our Html Page Look Cool

Step 3) Replace all the Code inside body from this Code..
In This Code i Created a Simple Card..
<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 Now Love beats</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="checkloveper()" >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">
  ย  ย  ย  </div>
  ย  ย  ย  <br/>
  ย  ย  </form>
  ย  </div>
  </div>
</div>

Now Our Html Page Look Cool

Step 4) Add This Css Code Head Tag.
This Code make our card more attractive.
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%; } } /*space in nav bar*/ #sf{margin-right:9.5%; padding-left:5%; }
 li{padding-left:14px; padding-right:14px; font-style:bold; color:yellow; }
 /*image css*/ .ig{ border-radius: 4px; background-size: cover; background-repeat: no-repeat; background-position: center center; width:88%; height:500px; }
 /*button color*/ .btl{background-color:#ff9dbe; border-color:#ff9dbe; color:white; } .card{ width: 95%; margin-top:40px; margin-bottom:20px; }

Now Add JavaScript to do Some Cool Stuff.

Step 5)ย </span >Add Thisย </span >JavaScript</span > Code in bottom of the HTML Page.
  • In This JavaScript code i take both input box name in variable to calculate love.
<script>
  function lovep(){
  ย var name = document.getElementById('fname').value;
  ย var lname = document.getElementById('sname').value;
  ย var name = name.toLowerCase();
ย  ย var lname = lname.toLowerCase();

  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 Crush 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("demo").innerHTML = lovdata + "%"; 
ย  ย  ย  ย }

  ย  if (lovdata >=65){
  ย  document.getElementById("demp").innerHTML = "<span style='background-color:#ff007f;color:white;display: inline-block; padding-top:5px;padding-bottom:5px; padding-left:10px; padding-right:10px; border-radius:3px;text-transform:capitalize;' > "+name+" love "+lname+"</span>";
ย  ย  ย  ย  ย  ย document.getElementById("dem").innerHTML = " My favorite place in the world is by your side. My favorite distraction is you.";

  ย  }
ย  ย  else{

ย  }

  }
</script>
Now our Application is Ready. Refresh your Html Page and Enter your name or crush name to calculate love percentage.ย 
ย 
Follow me For this type of Cool Stuff.
ย 

IMPORTANT LINKS

ย 
See Demo App go to this Link:
Download Full Source code from this Link