How To Create Perfect Number Checker

Submitted by alpha_luna on Tuesday, April 26, 2016 - 15:15.
Related Code: How To Check The Odd And Even Number In this article, we are going to learn on How To Create Perfect Number Checker using JavaScript. The user type into the textbox a numerical value then our program will check the given number if it is a Perfect Number or Not. Also, we have an alert message to check the values if it is valid or invalid. HTML Source Code This HTML code where the user types their numeric value to check if it is a Perfect Number or Not.
  1. <h2 style="text-align:center; color:blue;">Perfect Number Checker</h2>
  2.  
  3. <table cellpadding="5" cellspacing="5" width="100%">
  4.         <tr>
  5.                 <td class="table_1">
  6.                         Enter a Number
  7.                         <input type="text" id="userEnter_Value" class="txtBox_number" autofocus="autofocus" />
  8.                 </td>
  9.         </tr>
  10.         <tr>
  11.                 <td height="50"></td>
  12.         </tr>
  13.         <tr>
  14.                 <td style="text-align:center;">
  15.                         <input type="submit" class="button_style" value="Check" onclick="check_prime()" />
  16.                         <input type="submit" class="button_style1" value="Clear" onclick="clear_textbox()" />
  17.                 </td>
  18.         </tr>
  20.  
  21. <p id="result"></p>
JavaScript This script will use to determine the value if it is a Perfect Number or Not.
  1. <script type="text/javascript">
  2. function check_PerfectNumber() {
  3.          var input = document.getElementById("userEnter_Value").value;
  4.  var number = parseInt(input);
  5. if (isNaN(number)) {
  6. alert("Please enter a number.");
  7. document.getElementById("userEnter_Value").value="";
  8. document.getElementById("result").innerHTML = "";
  9. document.getElementById("userEnter_Value").focus();
  10. }
  11.  
  12. else if (input.length === 0) {
  13. alert("Please enter a valid input");
  14. document.getElementById("userEnter_Value").focus();
  15. }
  16. else if (!isNaN(number)) {
  17. if (is_perfect(number)) {
  18. document.getElementById("result").innerHTML = number + " is a PERFECT number.";
  19. }
  20. else {
  21. document.getElementById("result").innerHTML = number + " is NOT a PERFECT number.";
  22. }
  23. }
  24. else {
  25. document.getElementById("result").innerHTML = "Please enter a number.";
  26. }
  27. }
  28. function is_perfect(number)
  29. {
  30. var temp = 0;
  31. for(var i=1;i<=number/2;i++)
  32.  {
  33.  if(number%i === 0)
  34.  {
  35. temp += i;
  36.  }
  37.  }
  38.  
  39.  if(temp === number)
  40. {
  41. return true;
  42. }
  43.  else
  44. {
  45. return false;
  46. }
  47.  }
  48. function clearTextbox_Value(){
  49.  document.getElementById("result").innerHTML = "";
  50.  document.getElementById("userEnter_Value").value="";
  51.  document.getElementById("userEnter_Value").focus();
  52.  
  53. }
  54. </script>
And, this is the style we are going to use for the layout.
  1. <style type="text/css">
  2. body {
  3. width:400px;
  4. margin:auto;
  5. }
  6. .table_1 {
  7.     text-align: center;
  8.     color: blue;
  9.     font-size: 18px;
  10.     font-weight: bold;
  11.     font-family: cursive;
  12. }
  13. .txtBox_number {
  14.     width: 150px;
  15.     font-size: 18px;
  16.     border: blue 1px solid;
  17.     background: azure;
  18.     text-align: center;
  19.     cursor: pointer;
  20. }
  21. .button_style {
  22.     font-size: 18px;
  23.     border: blue 1px solid;
  24.     background: azure;
  25.     color: blue;
  26.     width: 100px;
  27.     padding: 5px;
  28.     cursor: pointer;
  29.         margin-right:20px;
  30. }
  31. .button_style1 {
  32.     font-size: 18px;
  33.     border: red 1px solid;
  34.     background: azure;
  35.     color: red;
  36.     width: 100px;
  37.     cursor: pointer;
  38.     padding: 5px;
  39. }
  40. #result {
  41.     margin-top: 40px;
  42.     font-size: 18px;
  43.     font-family: cursive;
  44.     color: blue;
  45.     padding: 10px;
  46.     text-align: center;
  47.     border: red 1px solid;
  48. }
  49. </style>
Output: If the given value is Perfect Number. Perfect Number If the given value is Not Perfect Number. Not Perfect Number Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Tags
Perfect Number
Checker Tool
Checker

Add new comment

About text formats
  • 38 views