Check Positive And Negative Number

Submitted by alpha_luna on Monday, May 2, 2016 - 16:37.
If you are looking for on How To Check Positive And Negative Number then you are at the right place. In this article, we are going to learn on how to create this simple program checker in positive and negative number. The user enters a number that he/she want then our program will check if it is a positive number or negative number. HTML Source Code This HTML code where the user enters a number that he/she want to enter.
  1. <h2 style="text-align:center; color:blue;">Check Positive And Negative Number</h2>
  2.  
  3. <table width="100%" cellpadding="5" cellspacing="5">
  4.         <tr>
  5.                 <td><label>Enter a value</label></td>
  6.                 <td><input type="number" class="txt_Number" id="value_NumberToCheck" name="value_NumberToCheck" required autofocus="autofocus"></td>
  7.         </tr>
  8.         <tr>
  9.                 <td colspan="2" style="text-align:center;"></td>
  10.         </tr>
  11.         <tr>
  12.                 <td colspan="2" style="text-align:center;">
  13.                         <button onclick="check_number()" class="btn_convert">Check</button>
  14.                 </td>
  15.         </tr>
  17.  
  18. <div id="demo_check"></div>
JavaScript Code This script will run after the user type a number in the textbox and after clicking the "Check" button to check the given number if it is a Positive Number or Negative Number.
  1. <script>
  2.  function check_number() {
  3. var value_NumberToCheck= document.getElementById("value_NumberToCheck").value;
  4. if (value_NumberToCheck >=0 ) {
  5.         result = "<b style='color:blue;'>" + value_NumberToCheck + "</b> is a <b style='color:blue;'>Positive Number</b>.";
  6.          }
  7.          else {
  8.         result = "<b style='color:red;'>" + value_NumberToCheck +"</b> is a <b style='color:red;'>Negative Number</b>.";
  9.          }
  10. document.getElementById("demo_check").innerHTML = result;
  11.  }
  12. </script>
And, this is the style.
  1. <style type="text/css">
  2. body {
  3.         margin:auto;
  4.         width:400px;
  5. }
  6. td {
  7.         text-align: center;
  8.     color: blue;
  9.     font-size: 18px;
  10.     font-weight: bold;
  11.     font-family: cursive;
  12. }
  13. .txt_Number {
  14.     width: 100px;
  15.     text-align: center;
  16.     border: blue 1px solid;
  17.     font-size: 25px;
  18.     background: aliceblue;
  19. }
  20. .btn_convert {
  21.     border: blue 1px solid;
  22.     background: azure;
  23.     color: blue;
  24.     font-size: 18px;
  25.     font-family: cursive;
  26.     padding: 5px;
  27. }
  28. .btn_clear {
  29.     border: red 1px solid;
  30.     background: azure;
  31.     color: red;
  32.         width: 75px;
  33.     font-size: 18px;
  34.     font-family: cursive;
  35.     padding: 5px;
  36. }
  37. #demo_check {
  38.     font-size: larger;
  39.     font-family: cursive;
  40.     text-align: center;
  41.     margin-top: 70px;
  42.     border: blue 1px solid;
  43.     line-height: 80px;
  44. }
  45. </style>
Output: This is the result if the number is Positive. Positive Number This is the result if the number is Positive. Negative Number This simple program suited for the beginner. Hope you can learn from this. Thank you very much. Enjoy coding.
Tags
Positive
Checker Tool
Checker
Positive and Negative Checker

Add new comment

About text formats
  • 111 views