Post
Ask Question

How to Play With Love Calculator in JavaScript

Introduction

 
This article describes how to play a love calculator in JavaScript. A love calculator is an application that allows you to know how compatible you and your partner are and how strong shall be the depth of love between you and your dear one.
 
Coding
 
Love_Calculator.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script type="text/javascript">     
  6.     </script>  
  7.     <style type="text/css">  
  8.         #Text1  
  9.         {  
  10.             z-index: 1;  
  11.             left: 451px;  
  12.             top: 169px;  
  13.             position: absolute;  
  14.             width: 28px;  
  15.             height: 21px;  
  16.         }  
  17.         #Text2  
  18.         {  
  19.             z-index: 1;  
  20.             left: 437px;  
  21.             top: 88px;  
  22.             position: absolute;  
  23.         }  
  24.         .style12  
  25.         {  
  26.             width: 138px;  
  27.         }  
  28.         .style13  
  29.         {  
  30.             width: 178px;  
  31.         }  
  32.         #Button1  
  33.         {  
  34.             width: 163px;  
  35.         }  
  36.         .style14  
  37.         {  
  38.             width: 184px;  
  39.         }  
  40.         #result  
  41.         {  
  42.             width: 27px;  
  43.             z-index: 1;  
  44.             left: 511px;  
  45.             top: 155px;  
  46.             position: absolute;  
  47.             height: 22px;  
  48.         }  
  49.     </style>  
  50. </head>  
  51. <body>  
  52. <script type="text/javascript">  
  53.     function calculateLove()  
  54.     {  
  55.         Fname = document.getElementById('firstname').value.toUpperCase();  
  56.         FnameLength = Fname.length;  
  57.          
  58.         Sname = document.getElementById('secondname').value.toUpperCase();  
  59.         SnameLength = Sname.length;  
  60.          
  61.         var lovecount=0;  
  62.         for(var i=0;i<FnameLength;i++)  
  63.         {  
  64.             var L1=Fname.substring(i,i+1);  
  65.             if(L1=='A') lovecount +=3;  
  66.             if(L1=='E') lovecount +=3;  
  67.             if(L1=='I') lovecount +=3;  
  68.             if(L1=='O') lovecount +=3;  
  69.             if(L1=='U') lovecount +=4;  
  70.             if(L1=='L') lovecount +=1;          
  71.             if(L1=='V') lovecount +=4;            
  72.         }  
  73.    
  74.             for (var count = 0; count < SnameLength; count++)  
  75.             {  
  76.                var L2 = Sname.substring(count, count + 1);  
  77.                 if(L2=='A') lovecount +=3;  
  78.                 if(L2=='E') lovecount +=3;  
  79.                 if(L2=='I') lovecount +=3;  
  80.                 if(L2=='L') lovecount +=3;  
  81.                 if(L2=='O') lovecount +=4;  
  82.                 if(L2=='V') lovecount +=1;          
  83.                 if(L2=='E') lovecount +=4;  
  84.             }  
  85.             var Total = 0;  
  86.             if (lovecount > 0) Total = 5 - ((FnameLength + SnameLength) / 2)  
  87.             if (lovecount > 2) Total = 10 - ((FnameLength + SnameLength) / 2)  
  88.             if (lovecount > 4) Total = 20 - ((FnameLength + SnameLength) / 2)  
  89.             if (lovecount > 6) Total = 30 - ((FnameLength + SnameLength) / 2)  
  90.             if (lovecount > 8) Total = 40 - ((FnameLength + SnameLength) / 2)  
  91.    
  92.             if (lovecount > 10) Total = 50 - ((FnameLength + SnameLength) / 2)  
  93.    
  94.             if (lovecount > 12) Total = 60 - ((FnameLength + SnameLength) / 2)  
  95.             if (lovecount > 14) Total = 70 - ((FnameLength + SnameLength) / 2)  
  96.             if (lovecount > 16) Total = 80 - ((FnameLength + SnameLength) / 2)  
  97.             if (lovecount > 18) Total = 90 - ((FnameLength + SnameLength) / 2)  
  98.             if (lovecount > 20) Total = 100 - ((FnameLength + SnameLength) / 2)  
  99.             if (lovecount > 22) Total = 110 - ((FnameLength + SnameLength) / 2)  
  100.             if (FnameLength == 0 || SnameLength == 0)  
  101.                 Total = "Error";  
  102.             if (Total < 0) Total = 0;  
  103.             if (Total > 99) Total = 99;  
  104.    
  105.             var txtresult = document.getElementById("result");  
  106.             txtresult.value = Math.floor(Total).toString();  
  107.             //alert("Toatal" + Math.floor(Total));  
  108.         }  
  109.         </script>  
  110.     <div style="height: 220px">  
  111.         <table style="border-style: ridge; border-color: #FF99FF; width: 33%; height: 187px;">  
  112.             <tr>  
  113.                 <td class="style13">  
  114.                      </td>  
  115.                 <td class="style12" style="color: #FF66FF; font-weight: bold">  
  116.                     Love Calculator</td>  
  117.                 <td class="style14">  
  118.                      </td>  
  119.             </tr>  
  120.             <tr>  
  121.                 <td class="style13">  
  122.                 <input id="firstname" type="text" /></td>  
  123.                 <td class="style12">  
  124.                     <img alt="" src="l1.gif" style="height: 98px" /></td>  
  125.                 <td class="style14">  
  126.                 <input id="secondname" type="text" /></td>  
  127.             </tr>  
  128.             <tr>  
  129.                 <td class="style13">  
  130.                      </td>  
  131.                 <td class="style12">  
  132.                     <input id="Button1" style="color: #FF66FF; font-weight: bold;" type="button"  
  133.                         value="Calculate" onclick="calculateLove()" /></td>  
  134.                 <td class="style14">  
  135.                                   
  136.                     <img id="img" alt="" src="love2.jpg" style="height: 60px; width: 112px" /><input id="result"  
  137.                         readonly="readonly" type="text" style="border-style: hidden" /> </td>  
  138.             </tr>  
  139.         </table>  
  140.     </div>  
  141. </body>  
  142. </html> 
Output 1
 
Enter a name in the first TextBox, as in:
 
First-image.jpg
 
Output 2
 
Enter a name in the second TextBox, as in:
 
second-image.jpg
 
Output 3
 
Click on the calculate button, then see the results as in the following:
 
result.jpg
 
For more information, download the attached sample application.


Similar Articles