Free Programming Source Codes and Computer Programming Tutorials

Friday, September 11, 2015

Payroll Program in JQuery

Here is a sample payroll program that I wrote using HTML,CSS and JQuery that will compute the salary of an employee in a company what is good about this program is that it automatically compute the gross pay and net pay as soon the values is being entered by the user. The code is a good tutorial in learning how to use JQuery as your javascript library in creating web applications.

If you have some questions about programming, about my work please send me an email at jakerpomperada@gmail.com and jakerpomperada@yahoo.com. People here in the Philippines can contact me at my mobile number 09173084360.

Thank you very much and Happy Programming.

Sample Program Output

Program Listing

<html>

<head>

<head>

<title>Basic Math Operations in JQuery</title>

.form-style-3{

margin: auto;

width: 60%;

padding: 10px;

max-width: 420px;

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

color: red;

font-weight: bold;

font-size: 16px;

}

.form-style-3 label{

display:block;

margin-bottom: 10px;

}

.form-style-3 label > span{

float: left;

width: 180px;

color: blue;

font-weight: bold;

font-size: 15px;

text-shadow: 1px 1px 1px #fff;

}

.form-style-3 fieldset{

border-radius: 12px;

-webkit-border-radius: 12px;

-moz-border-radius: 12px;

margin: 0px 0px 0px 0px;

border: 5px solid red;

padding: 20px;

background: lightgreen;

box-shadow: inset 0px 0px 15px black;

-moz-box-shadow: inset 0px 0px 15px black;

-webkit-box-shadow: inset 0px 0px 15px black;

}

.form-style-3 fieldset legend{

color: blue;

border-top: 2px solid red;

border-left: 2px solid red;

border-right: 2px solid red;

border-radius: 6px 6px 0px 0px blue;

-webkit-border-radius: 6px 6px 0px 0px;

-moz-border-radius: 6px 6px 0px 0px;

background: yellow;

padding: 0px 12px 3px 12px;

box-shadow: -0px -1px 2px black;

-moz-box-shadow:-0px -1px 2px black;

-webkit-box-shadow:-0px -1px 2px black;

font-weight: bold;

font-size: 18px;

}

.form-style-3 textarea{

width:320px;

height:100px;

}

.form-style-3 input[type=text],

.form-style-3 input[type=date],

.form-style-3 input[type=datetime],

.form-style-3 input[type=number],

.form-style-3 input[type=search],

.form-style-3 input[type=time],

.form-style-3 input[type=url],

.form-style-3 input[type=email],

.form-style-3 select,

.form-style-3 textarea{

border-radius: 3px;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border: 2px solid blue;

outline: none;

color: blue;

padding: 5px 8px 5px 8px;

box-shadow: inset 1px 1px 4px black;

-moz-box-shadow: inset 1px 1px 4px black;

-webkit-box-shadow: inset 1px 1px 4px black;

background: yellow;

width:30%;

font-weight: bold;

font-size: 15px;

}

</style></head>

$(document).ready(function() {

function compute_salary() {

var days_worked = $('#days').val();

var rate_per_day = $('#rates').val();

var tax = $('#tax').val();

var total_gross_salary = days_worked * rate_per_day;

var total_netpay = (total_gross_salary - tax);

$('#salary').val(total_gross_salary.toFixed(2));

$('#net_pay').val(total_netpay.toFixed(2));

}

$('#days, #rates,#tax').change(compute_salary);

});

</script>

<body>

<form>

<fieldset><legend>PAYROLL PROGRAM IN JQUERY</legend><br>

<label for="field1"><span>Number of Day's Work<span class="required"></span></span>

<label for="field1"><span>Salary Rate Per Day<span class="required"></span></span>

$<input type="number" name="rates" id="rates" class="input-field" name="field1" /> <label>

<br> DISPLAY RESULTS <br><br>

<label for="field1"><span> Gross Pay <span class="required"></span></span>

$<input type="text" name="salary" id="salary" class="salary" readonly/> </label>

$<input type="text" name="tax" class="tax" id="tax"/> </label>

$<input type="text" name="net_pay" id="net_pay" class="net_pay" readonly/> </label>

Created By Mr. Jake R. Pomperada

</font>

</fieldset>

</form>

</div>

</body>

</html>

DOWNLOAD SOURCE CODE HERE

Basic Math Operations in JQuery

In this article I would like to share with you my sample program that uses JQuery to perform basic mathematical operations like addition, subtraction, division and multiplication using forms and keyup action in JQuery. The code is very easy to understand and use that will enable the learner to appreciate the benefits of using JQuery as Javascript framework in developing web applications.

Thank you very much and Happy Programming.

Sample Program Output

Program Listing

<html>

<head>

<title>Basic Math Operations in JQuery</title>

.form-style-3{

margin: auto;

width: 60%;

padding: 10px;

max-width: 420px;

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

color: red;

font-weight: bold;

font-size: 16px;

}

.form-style-3 label{

display:block;

margin-bottom: 10px;

}

.form-style-3 label > span{

float: left;

width: 180px;

color: blue;

font-weight: bold;

font-size: 15px;

text-shadow: 1px 1px 1px #fff;

}

.form-style-3 fieldset{

border-radius: 12px;

-webkit-border-radius: 12px;

-moz-border-radius: 12px;

margin: 0px 0px 0px 0px;

border: 5px solid red;

padding: 20px;

background: lightgreen;

box-shadow: inset 0px 0px 15px black;

-moz-box-shadow: inset 0px 0px 15px black;

-webkit-box-shadow: inset 0px 0px 15px black;

}

.form-style-3 fieldset legend{

color: blue;

border-top: 2px solid red;

border-left: 2px solid red;

border-right: 2px solid red;

border-radius: 6px 6px 0px 0px blue;

-webkit-border-radius: 6px 6px 0px 0px;

-moz-border-radius: 6px 6px 0px 0px;

background: yellow;

padding: 0px 12px 3px 12px;

box-shadow: -0px -1px 2px black;

-moz-box-shadow:-0px -1px 2px black;

-webkit-box-shadow:-0px -1px 2px black;

font-weight: bold;

font-size: 18px;

}

.form-style-3 textarea{

width:320px;

height:100px;

}

.form-style-3 input[type=text],

.form-style-3 input[type=date],

.form-style-3 input[type=datetime],

.form-style-3 input[type=number],

.form-style-3 input[type=search],

.form-style-3 input[type=time],

.form-style-3 input[type=url],

.form-style-3 input[type=email],

.form-style-3 select,

.form-style-3 textarea{

border-radius: 3px;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border: 2px solid blue;

outline: none;

color: blue;

padding: 5px 8px 5px 8px;

box-shadow: inset 1px 1px 4px black;

-moz-box-shadow: inset 1px 1px 4px black;

-webkit-box-shadow: inset 1px 1px 4px black;

background: yellow;

width:30%;

font-weight: bold;

font-size: 15px;

}

</style></head>

<body>

<form>

<fieldset><legend>BASIC MATH OPERATIONS IN JQUERY</legend><br>

<label for="field1"><span>Enter 1st Digit Value<span class="required"></span></span>

<label for="field1"><span>Enter 2nd Digit Value<span class="required"></span></span>

<br> DISPLAY RESULTS <br><br>

<label for="field1"><span> The Difference is <span class="required"></span></span>

<label for="field1"><span> The Product is <span class="required"></span></span>

<label for="field1"><span> The Quotient is <span class="required"></span></span>

<br>

Created By <br><br>

Mr. Jake R. Pomperada, MAED-IT

</font> </center>

</fieldset>

</form>

</div>

$('.toCalculate').keyup(getSum);

$('.toCalculate').keyup(getDiff);

$('.toCalculate').keyup(getProduct);

$('.toCalculate').keyup(getQuotient);

function getSum(){

var num1=1*$('#value1').val() || 0;

var num2=1*$('#value2').val() || 0;

$('.sum').val( num1+num2);

}

function getDiff(){

var num1=1*$('#value1').val() || 0;

var num2=1*$('#value2').val() || 0;

$('.diff').val( num1-num2);

}

function getProduct(){

var num1=1*$('#value1').val() || 0;

var num2=1*$('#value2').val() || 0;

$('.product').val( num1*num2);

}

function getQuotient(){

var num1=1*$('#value1').val() || 0;

var num2=1*$('#value2').val() || 0;

$('.quotient').val( num1/num2);

}

</script>

</body>

</html>

DOWNLOAD SOURCE CODE HERE

Tuesday, September 8, 2015

School Grading System in C++

A sample program that I wrote in my programming class in C++ before that teaches my student how to create and use functions in C++ I called this program school grading system in C++ I am using CodeBlocks as my text editor and Dev C++ as my C++ compiler.

Thank you very much and Happy Programming.

Program Listing

#include <iostream>

#include <iomanip>

using namespace std;

float grade_solve(float midterm, float final)

{

float solve_grade=0.00;

solve_grade = (midterm+final) / 2;

if (solve_grade >= 5.0 && solve_grade <=10)

{

cout << "\n\n";

setprecision(1);

cout << " You Passed the subject with the grade of "

<< solve_grade << ".";

}

else {

cout << "\n\n";

setprecision(1);

cout << " Sorry you Failed the subject with the grade of "

<< solve_grade << ".";

}

main()

{

float midterm_grade=0.00, endterm_grade=0.00;

cout << "\t\t School Grading System";

cout << "\n\n";

cout << " Enter Midterm Grade :=> ";

cin >> midterm_grade;

cout << " Enter Endterm Grade :=> ";

cin >> endterm_grade;

grade_solve(midterm_grade,endterm_grade);

cout << "\n\n";

}

Login Security in JavaScript

In this article I would like to share with you a program that I wrote using Javascript as my programming language I called this program Login Security that will protect your website from instruders and unauthorized visitors. The code is very simple because I want to help my fellow programmers how to understand and learn how to write a program in Javascript.

It contains CSS for form layout and design and if statement in Javascript. I hope you will find my work useful and beneficial in your programming assignments and activities.

Thank you very much and Happy Programming.

Sample Program Output

Program Listing

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Login Security in JavaScript</title>

</head>

<body>

function check_password(form) {

if (form.user_name.value=="123") {

if (form.password.value=="123") {

alert("Welcome to the system");

}

else {

alert("Wrong Password. Please Try Again !!!");

document.getElementById("username").focus();

}

} else {

alert("Wrong User Name. Please Try Again ");

document.getElementById("username").focus();

}

function clear()

{

document.getElementById("username").value=""

document.getElementById("password").value=""

document.getElementById("username").focus();

}

</script><br></br><br></br>

<h3 align="center"> LOGIN SECURITY </h3>

</form>

</div>

</body>

</html>

login.css

/* login.css */

.login {

height:250px;

width:190px;

margin:auto;

border:2px green solid;

padding:20px;

font-family:arial;

background-color:lightgreen

}

input {

background:white;

border:3px blue solid;

color:black;

padding:5px;

}

Monday, September 7, 2015

Addition of Four Numbers in JavaScript

In this article I would like to share with you a simple program that I wrote while learning how to program in Javascript I called this program addition of four numbers it uses html form to accept and compute the total sum of four numbers. I also included a clear button to clear the text box in order for the user to input new series of values.

Thank you very much and Happy Programming.

Sample Program Output

Program Listing

<html>

function addition_four() {

var first = document.getElementById("textbox1").value;

var second = document.getElementById("textbox2").value;

var third = document.getElementById("textbox3").value;

var fourth = document.getElementById("textbox4").value;

var answer =parseInt(first)+parseInt(second)

+parseInt(third)+parseInt(fourth);

var textbox5 = document.getElementById('textbox5');

textbox5.value=answer;

}

function clear_box() {

document.getElementById("textbox1").value="";

document.getElementById("textbox2").value="";

document.getElementById("textbox3").value="";

document.getElementById("textbox4").value="";

document.getElementById("textbox1").focus();

}

</script>

<body>

<h3> Addition of Four Numbers</h3>

+ <input type="text" name="textbox2" id="textbox2" size="3" />

+ <input type="text" name="textbox3" id="textbox3" size="3" />

+ <input type="text" name="textbox4" id="textbox4" size="3" />

<input type="submit" name="button" id="button1" onclick="addition_four()"

value=" = " title="Click here to find the sum of four values" />

Your answer is

<input type="submit" name="button" id="button1" onclick="clear_box()"

value="Clear" title="Click here to clear text fields."/>

</body></font>

</html>

Saturday, September 5, 2015

Product of Two Numbers Using Scanner in Java

In this article I would like to share with you a sample program that will compute the product of two numbers using scanner library in Java. The code is very easy to understand and use in this program I am using Eclipse as my integrated development environment.

Thank you very much and Happy Programming.

Sample Program Output

Program Listing

package demo;

import java.util.Scanner;

public class Demo {

public static void main(String args[]) {

Scanner scan = new Scanner(System.in);

System.out.println("Product of Two Numbers");

System.out.print(" Enter first value : ");

int val1 = scan.nextInt();

System.out.print(" Enter second value : ");

int val2 = scan.nextInt();

int product = val1 * val2;

System.out.print("The product of "+ val1 + " and "

+ val2 + " is " + product + ".");

}

Area of the Triangle in Java

In this article I would like to share with you a sample program that I wrote using Java programming language I called this program area of the triangle. What does the program will do is to ask the base and height of the triangle and then it will compute its area.

Thank you very much and Happy Programming.

Sample Program Output

Program Listing

// area_of_the_triangle.java

// Written By: Mr. Jake R. Pomperada, BSCS, MAED-IT

// July 9, 2015 Thursday

// Email Address: jakerpomperada@gmail.com

// jakerpomperada@yahoo.com

import java.util.Scanner;

public class area_of_the_triangle {

public static void main(String[] args) {

Scanner input = new Scanner(System.in);

char ch;

double base_triangle = 0;

double height_triangle = 0;

double solve_area = 0;

do {

System.out.println();

System.out.print("\tAREA OF THE TRIANGLE SOLVER ");

System.out.println("\n\n");

System.out.print("What is the length of base of the triangle : ");

base_triangle = input.nextDouble();

System.out.print("What is the length of height of triangle : ");

height_triangle = input.nextDouble();

solve_area = (base_triangle * height_triangle) / 2;

System.out.println();

System.out.println("The Area of Triangle is : " + solve_area + ".");

System.out.println();

System.out.print("\nDo you want to continue (Type y or n) : ");

ch = input.next().charAt(0);

} while (ch == 'Y'|| ch == 'y');

System.out.println();

System.out.print("\t THANK YOU FOR USING THIS PROGRAM");

System.out.println("\n\n");

}

Tuesday, September 1, 2015

Crud Operations in PHP and MySQL

One of the usefulness of PHP and MySQL is that you can create a database application on it. In this article I would like to share with you a CRUD application using PHP and MySQL. CRUD (Create, Retrieve, Update and Delete) is the basic operations that can be done in any database application. The code is very easy to understand and use for beginners.

Thank you very much and Happy Programming.

DOWNLOAD SOURCE CODE HERE

Free Programming Source Codes and Computer Programming Tutorials

Friday, September 11, 2015

Payroll Program in JQuery

Basic Math Operations in JQuery

Tuesday, September 8, 2015

School Grading System in C++

Login Security in JavaScript

Monday, September 7, 2015

Addition of Four Numbers in JavaScript

Saturday, September 5, 2015

Product of Two Numbers Using Scanner in Java

Area of the Triangle in Java

Tuesday, September 1, 2015

Crud Operations in PHP and MySQL

Google Ads

Followers