Love Calculator Using JavaScript HTML and CSS With Code to Find Love Percentage 2022

How to make love calculator 2022, Love Calculator Using JavaScript HTML and CSS With Code to Find Love Percentage 2022

Love Calculator Using JavaScript HTML and CSS With Code to Find Love Percentage, How to make love calculator: Love Calculator Using JavaScript HTML and CSS With Code to Find Love Percentage: Feel free to use our Love Calculator on your website. The example implementation is shown below. It is possible to alter the color, font, and certain parts of the code to best fit your website.

Love Calculator Using JavaScript HTML and CSS With Code

Copy 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">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="Your Name" 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=" Love Name" 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>

How to make love calculator

  • BY COPYING THE CODE FOR USE, YOU AGREE:
  • THAT THE MATERIALS ARE PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND
  • NOT TO CHANGE ANY OF THE JAVASCRIPT CODE, INCLUDING THE LICENSE TEXT
  • NOT TO REMOVE THE LINE OF TEXT "powered by calculator.net"
  • THAT THE COPYRIGHT BELONGS TO calculator.net
  • NOT TO REMOVE THE TERMS OF USE
Next Post Previous Post
No Comment
Add Comment
comment url