Wednesday, November 18, 2015

Math Calculator Using Check Box in JavaScript

A program that I wrote the uses check box  to select the math operator in JavaScript that will will perform basic arithmetic operations. I include some error detection in checking for the values in our program.


If you  have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. 

My mobile number here in the Philippines is 09173084360.

Sample Program Output

Program Listing
<html>
<head>
        <title>Basic Calculator with Check Box</title>
<style>
body,h1 {
font-family:arial;
font-size:18px;
}
label{
width: 7em;
float: left;
text-align: right;
margin-right: 0.8em;
display: block
}
  
h1 {
font-family:arial;
padding-left: 37px;
  }

  .message {
color: blue;
font-family:arial;
font-size:18px;
font-weight:bolder;
padding-left: 38px;
               }

.warning {
color: red;
font-family:arial;
font-size:18px;
   font-weight:bolder;
padding-left: 38px;
           }
.move {
   font-style:italic;
padding-left: 32px;
          }
 
</style>
     <script>
            function solve() {
                 var math_opt = document.getElementsByName("math");
 var no_one = document.getElementById("no1").value;
  var no_two = document.getElementById("no2").value;
 
if (no_one=="") {
var msg = "<span class='warning'>Give the first value.</span>";
                    document.getElementById('msg').innerHTML = msg;
return false;
}  
else if (no_two=="") {
var msg = "<span class='warning'>Give the second value.</span>";
                    document.getElementById('msg').innerHTML = msg;
return false;
}
 
                if (math_opt[0].checked == true) {
 
   sum = parseInt(no_one) + parseInt(no_two);
                    results = "<span class='message'> The sum of " + no_one 
+ " and " + no_two + " is " + sum +".</span>";
document.getElementById('msg').innerHTML = results;
return false;
                } else if (math_opt[1].checked == true) {
                     diff = parseInt(no_one) - parseInt(no_two);
                    results = "<span class='message'> The difference between "  
+ no_one + " and " + no_two + " is " + diff +".</span>";
   document.getElementById('msg').innerHTML = results;
return false;
                } else if (math_opt[2].checked == true) {
                     product = parseInt(no_one) *parseInt(no_two);
                    results = "<span class='message'>The product between " 
+ no_one + " and " + no_two + " is " + product +".</span>";
   document.getElementById('msg').innerHTML = results;
return false;
                } else if (math_opt[3].checked == true) {
                     quotient = parseInt(no_one) / parseInt(no_two);
                   results = "<span class='message'>The quotient between " 
  + no_one + " and " + no_two + " is " + quotient +". </span>";
   document.getElementById('msg').innerHTML = results;
return false;
                } 
else {
                    var msg = "<span class='warning'>You must select your math operator.</span>";
                    document.getElementById('msg').innerHTML = msg;
                    return false;
                }
return true;
            }

            function reset_msg() {
                document.getElementById('msg').innerHTML = '';
         }
 
 function clear()
 {
  document.getElementById('msg').innerHTML = "";
  no_one="";
  no_two="";
  no_one.focus();
 }
        </script>
    </head>
    <body>
   <br>
   <h1> Basic Calculator Using Check Box </h1>
<br>
        <form action="" method="POST">
 <label for="first_value">
 First Value
 
 </label>
 <input type="text" name="no_one" id="no1"  size="5" autofocus>
 <br><br>
 <label for="second_value">
  Second Value
  </label>
  <input type="text" name="no_2" id="no2" size="5">
         <br><br>
            <label class="move">Math Operators</label><br>
<br> <label for="radio1">
&nbsp;  &nbsp;  &nbsp;  
            <input type="checkbox" name="math"  onclick="reset_msg();" />Addition
            &nbsp;  &nbsp;  &nbsp;  
</label>
            <input type="checkbox" name="math"  onclick="reset_msg();" />Subtraction
       &nbsp;  &nbsp;  &nbsp; 
            <input type="checkbox" name="math"  onclick="reset_msg();" />Multiplication
             &nbsp;  &nbsp;  &nbsp;   
             <input type="checkbox" name="math"  onclick="reset_msg();" />Division
             &nbsp;  &nbsp;  &nbsp;   
<br><br>
&nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp; 
<input type="submit" value="Compute" onclick="return solve();" />
   &nbsp;  &nbsp;  &nbsp;  &nbsp; 
<input type="submit" value="Clear" onclick="return clear();" />
<br><br>
            <div id="msg"></div>
         </form>
    </body>

</html>

Posted by at No comments:
Labels:

Calculator Using Radio Buttons in JavaScript

A program that I wrote the uses radio buttons to select the math operator in JavaScript that will will perform basic arithmetic operations. I include some error detection in checking for the values in our program.


If you  have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. 

My mobile number here in the Philippines is 09173084360.


Sample Program Output

Program Listing

 <html>
<head>
        <title>Basic Calculator with Radio button </title>
<style>
body,h1 {
font-family:arial;
font-size:18px;
}
label{
width: 7em;
float: left;
text-align: right;
margin-right: 0.8em;
display: block
}
  
h1 {
font-family:arial;
padding-left: 37px;
  }

  .message {
color: blue;
font-family:arial;
font-size:18px;
font-weight:bolder;
padding-left: 38px;
               }

.warning {
color: red;
font-family:arial;
font-size:18px;
   font-weight:bolder;
padding-left: 38px;
           }
</style>
    <script>
            function solve() {
                 var math_opt = document.getElementsByName("math");
 var no_one = document.getElementById("no1").value;
  var no_two = document.getElementById("no2").value;
 
if (no_one=="") {
var msg = "<span class='warning'>Give the first value.</span>";
                    document.getElementById('msg').innerHTML = msg;
return false;
}  
else if (no_two=="") {
var msg = "<span class='warning'>Give the second value.</span>";
                    document.getElementById('msg').innerHTML = msg;
return false;
}
 
                if (math_opt[0].checked == true) {
 
   sum = parseInt(no_one) + parseInt(no_two);
                    results = "<span class='message'> The sum of " + no_one 
+ " and " + no_two + " is " + sum +".</span>";
document.getElementById('msg').innerHTML = results;
return false;
                } else if (math_opt[1].checked == true) {
                     diff = parseInt(no_one) - parseInt(no_two);
                    results = "<span class='message'> The difference between "  
+ no_one + " and " + no_two + " is " + diff +".</span>";
   document.getElementById('msg').innerHTML = results;
return false;
                } else if (math_opt[2].checked == true) {
                     product = parseInt(no_one) *parseInt(no_two);
                    results = "<span class='message'>The product between " 
+ no_one + " and " + no_two + " is " + product +".</span>";
   document.getElementById('msg').innerHTML = results;
return false;
                } else if (math_opt[3].checked == true) {
                     quotient = parseInt(no_one) / parseInt(no_two);
                   results = "<span class='message'>The quotient between " 
  + no_one + " and " + no_two + " is " + quotient +". </span>";
   document.getElementById('msg').innerHTML = results;
return false;
                } 
else {
                    var msg = "<span class='warning'>You must select your math operator.</span>";
                    document.getElementById('msg').innerHTML = msg;
                    return false;
                }
return true;
            }

            function reset_msg() {
                document.getElementById('msg').innerHTML = '';
         }
 
 function clear()
 {
  document.getElementById('msg').innerHTML = "";
  no_one="";
  no_two="";
  no_one.focus();
 }
        </script>
    </head>
    <body>
   <br>
   <h1> Basic Calculator Using Radio Button </h1>
<br>
        <form action="" method="POST">
 <label for="first_value">
 First Value
 
 </label>
 <input type="text" name="no_one" id="no1"  size="5" autofocus>
 <br><br>
 <label for="second_value">
  Second Value
  </label>
  <input type="text" name="no_2" id="no2" size="5">
         <br><br>
            <label>Operators</label><br>
<br> <label for="radio1">
&nbsp;  &nbsp;  &nbsp;  
            <input type="radio" name="math"  onclick="reset_msg();" />Addition
            &nbsp;  &nbsp;  &nbsp;  
</label>
            <input type="radio" name="math"  onclick="reset_msg();" />Subtraction
       &nbsp;  &nbsp;  &nbsp; 
            <input type="radio" name="math"  onclick="reset_msg();" />Multiplication
             &nbsp;  &nbsp;  &nbsp;   
             <input type="radio" name="math"  onclick="reset_msg();" />Division
             &nbsp;  &nbsp;  &nbsp;   
<br><br>
&nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp; 
<input type="submit" value="Compute" onclick="return solve();" />
   &nbsp;  &nbsp;  &nbsp;  &nbsp; 
<input type="submit" value="Clear" onclick="return clear();" />
<br><br>
            <div id="msg"></div>
         </form>
    </body>
</html>

Posted by at No comments:
Labels: ,

Gender Checker in JavaScript

A simple program that will ask the user to give his or her name and the user select which of the two gender male or female using radio buttons after that when the user click the ok button our program will greet the user and then it will tell whether the user is a male or female.

If you  have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. 

My mobile number here in the Philippines is 09173084360.




Sample Program Output


Program Listing

 <html>
<head>
         <title>Gender Checker</title>
<style>
body {
font-family:arial;
font-size:18px;
}
label{
width: 7em;
float: left;
text-align: right;
margin-right: 0.8em;
display: block
}
  
h1 {
font-family:arial;
font-size:25px;
padding-left: 75px;
  }

  .message {
color: blue;
font-family:arial;
font-size:18px;
font-weight:bolder;
padding-left: 38px;
               }

.warning {
color: red;
font-family:arial;
font-size:18px;
   font-weight:bolder;
padding-left: 38px;
           }
       .move {
     padding-left: 10px;
      }
.space {
  padding-left: 38px;
 }
</style>
    <script>
            function process_values() {
                 var genders = document.getElementsByName("gender");
 var user = document.getElementById("user").value;
 
if (user=="") {
var msg = "<span class='warning'>Please write your name!</span>";
                    document.getElementById('msg').innerHTML = msg;
return false;
}  
 
                if (genders[0].checked == true) {
 
                    results = "<span class='message'> Hello " 
         + user.toUpperCase() + ". Your gender is Male. </span>" ;
document.getElementById('msg').innerHTML = results;
return false;
                } else if (genders[1].checked == true) {
                    results ="<span class='message'> Hello " 
        + user.toUpperCase() + ". Your gender is Female. </span>";
   document.getElementById('msg').innerHTML = results;
return false;
                } else {
                    var msg = "<span class='warning'>You must select your gender!</span>";
                    document.getElementById('msg').innerHTML = msg;
                    return false;
                }
return true;
            }

            function reset_msg() {
                document.getElementById('msg').innerHTML = '';
            }
function clear_all()
 {
  document.getElementById('msg').innerHTML = "";
  genders="";
  user="";
  genders.focus();
 }
        </script>
    </head>
    <body>
 <br>
 <h1> Gender Checker </h1>
        <form action="" method="POST">
 <label for="name">Name </label>
 <input type="text" name="user" id="user" size="30" autofocus>
 <br><br>
            <label class="move">Gender</label>
<br /><br>
<label class="move">
&nbsp;  &nbsp;  
            <input type="radio" name="gender" value="m" onclick="reset_msg();" />Male
</label>
                &nbsp;   
<label for="radio2">
            <input type="radio" name="gender" value="f" onclick="reset_msg();" />Female
</label>
           <br><br>
   &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; 
<input type="submit" value="Ok" onclick="return process_values();" />
&nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; 
<input type="submit" value="Clear" onclick="return clear_all();" />
<br><br>
            <div class="space" id="msg"></div>
        </form>
    </body>
</html>




Posted by at No comments:
Labels:

Multiplication Table in JavaScript

Here is a sample program that I wrote using JavaScript, CSS and HTML to generate a multiplication table the code is very simple and easy to understand.

If you  have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. 

My mobile number here in the Philippines is 09173084360.

Sample Program Output


Program Listing

<html>
<head>
<title>MULTIPLICATION TABLE </title>
</head>
<style>
body {
  font-family:arial;
  font-size:20px;
  }
 </style>  
<body>
<br>
<h3 align="center"> MULTIPLICATION TABLE</h3>
<script language="JavaScript">

document.write("<center><table border='1px'>");

for(var a = 1; a < 13; a++) {
    document.write("<tr style='height:40px'>");

for(var b = 1; b < 13; b++) {
    document.write("<td style='width:40px'><center><font size='4'>" 
+ a*b + "</center></font></td>");
}
document.write("</tr>");
}
document.write("</table></center>");

</script>
</head>
</body>
</html>



Posted by at No comments:
Labels:

Monday, November 16, 2015

Name and Age Display Using Two Dimensional Array in JavaScript


A simple program that demonstrate how to accept a value using two dimensional array in JavaScript and display the result on the screen.

 If you  have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. 

My mobile number here in the Philippines is 09173084360.




 Program Listing


<html>
<body>
<script>
var arr  = [];

 name = prompt("Enter your name");
age  = Number(prompt("Enter your age "));
var arr1 = [name,age];
arr.push(arr1);

 document.write("Name : " +arr[0][0] + "<br>");
document.write("Age  : " +arr[0][1]);

 </script>
</body>
</html>

Posted by at No comments:
Labels:

Shell Sort in JavaScript

A simple program that I wrote using JavaScript to show the concept of Shell Sort algorithm.

If you  have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. 

My mobile number here in the Philippines is 09173084360.
Sample Program Output

Program Listing
<html>
 <head>
   <title>Shell Sort</title>
  </head>
<body> 
   <script>

   var values=[],a=[];
   var temp=0,pos=0;
   
   document.write("<font face='arial' size='4'>SHELL SORT </font>");
   document.write("<br><br>");
 for (a=0; a<10; a++) {
  values.push(Number(prompt("Enter item value at no. " + (a+1))));
   }
      document.write("<font face='arial' size='4'>Numbers");
     document.write(" given by the user </font>");
     document.write("<br><br>");
  for (a=0;a<10; a++) {
    document.write("<font face='arial' size='4'> " +values[a] + "");
   }
  
  function shellSort (a) {
    for (var h = a.length; h = parseInt(h / 2);) {
        for (var i = h; i < a.length; i++) {
            var k = a[i];
            for (var j = i; j >= h && k < a[j - h]; j -= h)
                a[j] = a[j - h];
            a[j] = k;
        }
    }
    return a;
}
 shellSort(values);

      document.write("<br><br>");
 document.write("<font face='arial' size='4'>Sorted List of Numbers </font>");
 document.write("<br><br>");
 
  for (a=0; a<10; a++) {
    document.write("<font face='arial' size='4'> " +  values[a]+"</font>");
  }  
  </script>
  </body>
 </html>  

   
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)