Website Template in PHP

In this article I would like to share with you a simple website template that is written in HTML,CSS and PHP. I hope you will find it useful in learning web development.

I am currently accepting programming work, it projects, school 

programming projects, thesis and capstone projects, IT consulting 

work, computer tutorials, and web development work kindly contact me in the following email address for further details.  If you want to advertise in my website kindly contact me also in my email address also. Thank you.

My email address is the following jakerpomperada@gmail.com, jakerpomperada@aol.com, and jakerpomperada@yahoo.com.

My mobile number here in the Philippines is 09173084360.

My telephone number at home here in Bacolod City, Negros Occidental Philippines is  +63 (034) 4335675.

My personal website is http://www.jakerpomperada.com

Sample Program Output

Program Listing

mystyle.css

body { margin: 0; padding: 0; background: #f9f7f5; font-family: Calibri, Tahoma, Arial; }

a { margin: 0; color: #3b608a; }

a:hover { color: #443b31;}

p { color: #443b31; }

.wrapper { width: 1000px; margin: 0 auto 0; }

#header { min-height: 120px; background: #0664DE; }

#header h1 { color: #f9f7f5; margin: 0;padding-top:35px;padding-left:75px }

#navigation { min-height: 40px; background: #9DFE74; overflow: hidden; }

.navbar { margin: 10px 0 0 0; list-style-type: none; padding: 0; }

.navbar li { display: inline; margin: 0; }

.navbar li a { color: #0664DE; text-decoration: none; padding: 12px;}

.navbar li a:hover { background: #e89440; color: #f9f7f5; padding: 12px; }

#content { width: 1000px; margin: 0 auto; overflow: auto; }

#contentleft { width: 630px; float: left; margin-right: 20px; }

#contentleft h2 { margin: 15px 0 10px 0; color: #3b608a; }

#contentleft p { }

#sidebar { width: 330px; float: left; overflow: auto; }

#sidebar h3 { color: #3b608a; }

.testimonal { }

.testimonial-title {color:blue;}

.testimonial-body {background-color:#f4f974de;}

.testimonial-meta {color:#2bbb72;}

#footer { min-height: 150px; background: #e7e1de; padding: 15px; }

#footer ul { width: 560px; margin: 0 auto; padding: 0; list-style-type: none; }

#footer ul li { display: inline; }

#footer ul li a { padding: 0 15px; }

#footer p { color: #443b31; width: 360px; margin: 15px auto; }

index.php

<?php include('header.php'); ?>

<div id="content">

<div id="contentleft">

<h2>My Website Home Page</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod leo vitae nulla euismod commodo. Phasellus at mi quam.

Etiam lacinia elit pellentesque ligula faucibus nec luctus mi mollis. Duis ante elit, blandit sed placerat sit amet, varius vitae tellus.

Duis in ante sed metus mollis ornare. Donec ipsum lorem, mollis non ultrices et, porta at dolor. Sed nisi mauris, condimentum nec vehicula

nec, venenatis a nisi. Integer ac erat elit, eget convallis ipsum. Nulla eget rhoncus neque. Proin velit mauris, tristique sit amet suscipit id,

elementum quis eros. Maecenas vehicula luctus volutpat. Praesent condimentum sodales nulla, ut fermentum purus hendrerit eget. Suspendisse eget

turpis risus. Praesent ac leo egestas mauris venenatis adipiscing a at erat. Cras convallis suscipit augue, scelerisque sagittis nisi tempus in.

Sed non elit augue, a rhoncus dui.</p>

<p>Aliquam dapibus turpis id ligula feugiat et ornare eros vulputate. Pellentesque vitae libero felis. Mauris id urna et felis eleifend sodales ut

sed nisl. Nullam tristique sem in metus suscipit vestibulum. In hac habitasse platea dictumst. Donec aliquet eros quis metus egestas varius. Ut vel

magna quam, non hendrerit ante. Praesent lacinia ligula at odio porttitor porttitor et vel mi. Nunc non fermentum felis. Cras viverra dictum vulputate.

Sed quis lorem lectus. Nulla porta est sed tortor venenatis ut gravida est cursus. Aenean vehicula metus quis tellus tempor a tempor massa aliquam. Sed

in risus tellus. Curabitur egestas porttitor eros in imperdiet. Vestibulum eu mollis nibh. Donec in orci lorem. Sed ultrices dapibus justo, sed placerat

urna fermentum blandit. Suspendisse euismod elit nec nunc tristique vel aliquam neque suscipit.</p>

</div>

<?php include('sidebar.php'); ?>

</div>

<?php include('footer.php'); ?>

header.php

<!DOCTYPE>

<html>

<head>

<!--Title-->

<title>My Website</title>

<!--Links-->

<link rel="stylesheet" href="mystyle.css" type="text/css" />

</head>

<body>

<div id="header">

<div class="wrapper">

<h1>My Personal Website</h1>

</div>

</div>

<div id="navigation">

<div class="wrapper">

<ul class="navbar">

<li><a href="index.php">Home</a></li>

<li><a href="about.php">About</a><li>

<li><a href="sales.php">Sales</a><li>

<li><a href="thanks.php">Thank You</a></li>

<li><a href="contact.php">Contact Us</a></li>

</ul>

</div>

</div>

</body>

</html>

footer.php

<div id="footer">

<div class="wrapper">

<ul>

<li><a href="index.php">Terms</a></li>

<li><a href="index.php">Privacy Policy</a></li>

<li><a href="index.php">Earnings Disclaimer</a></li>

<li><a href="index.php">Affiliates</a></li>

<li><a href="index.php">Contact Us</a></li>

</ul>

<p>&copy;Copyright 2018 mywebsite.com All Rights Reserved.</p>

</div>

</div>

</body>

</html>

about.php

<?php include('header.php'); ?>

<div id="content">

<div id="contentleft">

<h2>About</h2>

<p>This is our about page</p>

</div>

<?php include('sidebar.php'); ?>

</div>

<?php include('footer.php'); ?>

contact.php

<?php include('header.php'); ?>

<div id="content">

<div id="contentleft">

<h2>Contact Us</h2>

<p>This is our contact page</p>

</div>

<?php include('sidebar.php'); ?>

</div>

<?php include('footer.php'); ?>

sales.php

<?php include('header.php'); ?>

<div id="content">

<div id="contentleft">

<h2>Sales</h2>

<p>This is our sales page</p>

</div>

<?php include('sidebar.php'); ?>

</div>

<?php include('footer.php'); ?>

sidebar.php

<div id="sidebar">

<h3>Testimonials</h3>

<!--Testimonial #1-->

<div class="testimonial">

<p class="testimonial-title">The Best Ever!</p>

<p class="testimonial-body">You guys are the best ever. I tried your product and instantly made a millions dollars. Now, I sit around sipping Pina Coladas and playing video games. I'm the happiest ever. Thanks so much!</p>

<p class="testimonial-meta">Micheal Jordan<br />Chicago, USA<br />mywebsite.com</p>

</div>

<!--Testimonial #2-->

<div class="testimonial">

<p class="testimonial-title">Saved My Life!</p>

<p class="testimonial-body">You guys saved my life. I was headed for financial disaster, bankruptcy, and divorce... then, I downloaded your 2-page PDF and my life changed forever. You're the greatest. Thanks!!</p>

<p class="testimonial-meta">Kobe Bryant<br/>Los Angeles, USA<br />lakers.com</p>

</div>

</div>

thanks.php

<?php include('header.php'); ?>

<div id="content">

<div id="contentleft">

<h2>Thank You</h2>

<p>This is our thank you page</p>

</div>

<?php include('sidebar.php'); ?>

</div>

<?php include('footer.php'); ?>

DOWNLOAD SOURCE CODE HERE

PHP, MySQL and D3 Display Graph

In this article I would like to share with you a sample program that I wrote using PHP, MySQL and D3 Javascript library to display graph. The code is very short and simple I hope you will find my work useful thank you.

I am currently accepting programming work, it projects, school 

programming projects, thesis and capstone projects, IT consulting 

work, computer tutorials, and web development work kindly contact me in the following email address for further details.  If you want to advertise in my website kindly contact me also in my email address also. Thank you.

My email address is the following jakerpomperada@gmail.com, jakerpomperada@aol.com, and jakerpomperada@yahoo.com.

My mobile number here in the Philippines is 09173084360.

My telephone number at home here in Bacolod City, Negros Occidental Philippines is  +63 (034) 4335675.

My personal website is http://www.jakerpomperada.com

JSON File Sample Output

D3 Graph Output

Program Listing

api.php

<?php
        // set up the connection variables
        $db_name  = 'animals';
        $hostname = 'localhost';
        $username = 'root';
        $password = '';
        // connect to the database
        $dbh = new PDO("mysql:host=$hostname;dbname=$db_name", $username, $password);
        // a query get all the records from the users table
        $animal='wombat';


        $sql = 'SELECT * FROM animals where name="wombat" ';
       // $sql .= ' WHERE name ='.$animal;
        // use prepared statements, even if not strictly required is good practice
        $stmt = $dbh->prepare( $sql );
        // execute the query
        $stmt->execute();
        // fetch the results into an array
        $result = $stmt->fetchAll( PDO::FETCH_ASSOC );
        // convert to json
        $json = json_encode( $result );
        // echo the json string
        echo $json;
        ?>

index.php

<html>
<head>
<title>PHPRO AJAX D3.js MySQL Example</title>

<style>
body {
    background-color:white;
    font: 10px sans-serif;
}


.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.area {
    fill: steelblue;
}
</style>

<script src="https://d3js.org/d3.v3.min.js"></script>
</head>

<body>
<h1> PHP,MySQL and D3 Demonstration </h1>
<br>
<h2> Created By Mr. Jake R. Pomperada </h2>
<br>

<script>

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 1080 - margin.left - margin.right,
    height = 960 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .0);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var area = d3.svg.area()
    .x(function(d) { return x(d.record_date); })
    .y0(height)
    .y1(function(d) { return y(d.total); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

   d3.json("api.php", function(error, data) {
  var k = [];
    data.forEach(function(d) {
        d.record_date = d.record_date;
        d.total = +d.total;
        k.push(d.record_date)
    });


  x.domain(k);
  y.domain([0, d3.max(data, function(d) { return d.total; })]);

  svg.append("path")
    .datum(data)
    .attr("class", "area")
    .attr("d", area);

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
.style("text-anchor", "end")
.text("Count");
});

</script>
</body>
</html>
       
animals.sql


-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Sep 26, 2018 at 04:16 AM
-- Server version: 5.7.21
-- PHP Version: 5.6.24

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `animals`
--

-- --------------------------------------------------------

--
-- Table structure for table `animals`
--

CREATE TABLE `animals` (
  `id` int(11) NOT NULL,
  `name` varchar(20) NOT NULL COMMENT 'Name of the animal',
  `total` int(11) NOT NULL COMMENT 'The number of animals',
  `record_date` timestamp NULL DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `animals`
--

INSERT INTO `animals` (`id`, `name`, `total`, `record_date`) VALUES
(1, 'dingo', 127000, '2016-01-20 16:00:00'),
(2, 'wombat', 98000, '2016-01-20 16:00:00'),
(3, 'koala', 293000, '2016-01-20 16:00:00'),
(4, 'dingo', 125000, '2016-02-20 16:00:00'),
(5, 'wombat', 96000, '2016-02-20 16:00:00'),
(6, 'koala', 288000, '2016-02-20 16:00:00'),
(7, 'dingo', 127000, '2016-03-20 16:00:00'),
(8, 'wombat', 93000, '2016-03-20 16:00:00'),
(9, 'koala', 221000, '2016-03-20 16:00:00'),
(10, 'dingo', 115000, '2016-04-20 16:00:00'),
(11, 'wombat', 91000, '2016-04-20 16:00:00'),
(12, 'koala', 229000, '2016-04-20 16:00:00'),
(13, 'dingo', 102000, '2016-05-20 16:00:00'),
(14, 'wombat', 92000, '2016-05-20 16:00:00'),
(15, 'koala', 249000, '2016-05-20 16:00:00'),
(16, 'dingo', 98000, '2016-06-20 16:00:00'),
(17, 'wombat', 83000, '2016-06-20 16:00:00'),
(18, 'koala', 261000, '2016-06-20 16:00:00'),
(19, 'dingo', 9400, '2016-07-20 16:00:00'),
(20, 'wombat', 81000, '2016-07-20 16:00:00'),
(21, 'koala', 278000, '2016-07-20 16:00:00');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `animals`
--
ALTER TABLE `animals`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `animals`
--
ALTER TABLE `animals`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

DOWNLOAD SOURCE CODE HERE

Civil Status Checker in C++

In this article, I would like to share with you a simple program that is being requested of me by a student who visited my website. It is a civil status checker that I wrote using C++ as our programming language.

What the program does is to ask the user to give his or her name and then it will ask again for the civil status of the person and the program will display the result on the screen. The code is very simple and easy to understand.

I am currently accepting programming work, it projects, school 

programming projects, thesis and capstone projects, IT consulting 

work, computer tutorials, and web development work kindly contact me in the following email address for further details.  If you want to advertise in my website kindly contact me also in my email address also. Thank you.

My email address is the following jakerpomperada@gmail.com, jakerpomperada@aol.com, and jakerpomperada@yahoo.com.

My mobile number here in the Philippines is 09173084360.

My telephone number at home here in Bacolod City, Negros Occidental Philippines is  +63 (034) 4335675.

My personal website is http://www.jakerpomperada.com

Sample Program Output

Program Listing

// civil_status.cpp

// Written By Mr. Jake Rodriguez Pomperada, MAED-IT

// Date : September 20, 2018

// Tool : Dev C++ 5.11

// www.jakerpomperada.com

// jakerpomperada@aol.com and jakerpomperada@gmail.com

#include <iostream>

#include <cctype>

#include <cstring>

#include <cstdio>

using namespace std;

int main()

{

string status;

char civil_status;

char option,reply;

char name[200];

do {

system("cls");

cout <<"\n\n";

cout <<"\tCivil Status Checker in C++";

cout <<"\n\n";

cout << "\tWhat is your name : ";

gets(name);

cout <<"\n\n";

cout <<"\t1-Single,2-Married,3-Annulled,4-Separated and 5-Widow";

cout <<"\n\n";

cout <<"\tWhat is your Civil Status? : ";

    cin >> civil_status;

    

    if (civil_status == '1') {

    status ="SINGLE";

}

else if (civil_status == '2') {

    status ="MARRIED";

}

else if (civil_status == '3') {

    status ="ANNULLED";

}

else if (civil_status == '4') {

    status ="SEPARATED";

}

else if (civil_status == '5') {

    status ="WIDOW";

}

else {

status ="Invalid Civil Status Try Again.";

}

for (int i=0; i<strlen(name); i++) {

       name[i] = toupper(name[i]);

    }

cout <<"\n\n";

cout <<"\t===== DISPLAY RESULT =====";

cout <<"\n\n";

cout <<"\tHi " <<name <<".";

cout <<"\n\n";

cout <<"\tYour Civil Status is " << status <<".";

cout <<"\n\n";

cout <<"\tDo you want to continue Y/N? : ";

cin >> reply;

option = toupper(reply);

      } while(option=='Y');

    cout <<"\n\n";

    cout <<"\tThank you for using this software";

cout <<"\n\n";  

}

Leap Year Checker Using Structure in C++

I this article I would like to share with you a sample program that will show how to use structure in C++ to check the leap year.

I am currently accepting programming work, it projects, school 

programming projects, thesis and capstone projects, IT consulting 

work, computer tutorials, and web development work kindly contact me in the following email address for further details.  If you want to advertise in my website kindly contact me also in my email address also. Thank you.

My email address is the following jakerpomperada@gmail.com, jakerpomperada@aol.com, and jakerpomperada@yahoo.com.

My mobile number here in the Philippines is 09173084360.

My telephone number at home here in Bacolod City, Negros Occidental Philippines is  +63 (034) 4335675.

My personal website is http://www.jakerpomperada.com

Sample Program Output

Program Listing

// leap_year.cpp

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

// Date      : September 3, 2018   Monday  4:42 PM

// Location  : Bacolod City, Negros Occidental Philippines.

// Website   : http://www.jakerpomperada.com

// Email     : jakerpomperada@jakerpomperada.com and jakerpomperada@gmail.com

// Tool      : Dev C++ Version 5.11

#include <iostream>

using namespace std;

struct leap_year {

    int year;

};

int main()

{

struct leap_year years;

system("COLOR F0"); 

cout << "\n\n";

cout << "\tLeap Year Checker Using Structure";

cout <<"\n\n";

cout << "\tEnter Year : ";

cin >> years.year;

cout <<"\n";

if(years.year%4==0)

{

if(years.year%100==0)

{

if(years.year%400==0)

cout <<"\tThe Given Year " <<years.year << " is a Leap Year.";

else

cout <<"\tThe Give Year " <<years.year <<" Not a Leap Year.";

}

else

cout <<"\tThe Given Year " <<years.year <<" is a Leap Year.";

}

else {

  cout <<"\tThe Given Year " <<years.year<< " Not a Leap Year.";

}

cout <<"\n\n";

cout <<"\tEND OF PROGRAM";

cout <<"\n\n";

}

Nested Structure in C++

Here is a very simple program that I wrote to demonstrate how nested structure works in C++?

I am currently accepting programming work, it projects, school 

programming projects, thesis and capstone projects, IT consulting 

work, computer tutorials, and web development work kindly contact me in the following email address for further details.  If you want to advertise in my website kindly contact me also in my email address also. Thank you.

My email address is the following jakerpomperada@gmail.com, jakerpomperada@aol.com and jakerpomperada@yahoo.com.

My mobile number here in the Philippines is 09173084360.

My telephone number at home here in Bacolod City, Negros Occidental Philippines is  +63 (034) 4335675.

My personal website is http://www.jakerpomperada.com

Sample Program Output

Program Listing

// employees.cpp

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

// Date      : September 4, 2018   Tuesday  8:04 AM

// Location  : Bacolod City, Negros Occidental Philippines.

// Website   : http://www.jakerpomperada.com

// Email     : jakerpomperada@jakerpomperada.com and jakerpomperada@gmail.com

// Tool      : Dev C++ Version 5.11

#include <iostream>

#include <iomanip>

using namespace std;

struct contact_details    // structure tag

{

    char address[200];

int telephone;

    int mobile;

    char email[200];

};

struct emp             // structure tag

{

int empno;

char name[200];

char position[200];

contact_details user;

/* See, user is a structure variable itself (of type

      contact_details) and it is member of another structure,

   the emp structure. */

float basic;

};

int main()

{

emp user_details;   // create structure variable

system("COLOR F0"); 

cout <<"\n\n";

cout << fixed << setprecision(2);

cout << "\tNested Structure Demonstration in C++";

cout <<"\n\n";

cout<<"\tEmployee Number  : ";

cin>>user_details.empno;

cin.ignore();

cout<<"\tEmployee Name    : ";

gets(user_details.name);

cout<<"\tPosition         : ";

gets(user_details.position);

cout<<"\tBasic Salary     : PHP ";

cin >> user_details.basic;

cin.ignore();

cout<<"\tHome Address     : ";

gets(user_details.user.address);

cout<<"\tEmail Address    : ";

gets(user_details.user.email);

cout<<"\tTelephone Number : ";

cin>>user_details.user.telephone;

cout<<"\tMobile Number    : ";

cin >> user_details.user.mobile;

cout<<"\n\n";

cout<<"\tEMPLOYEE DISPLAY RECORD";

    cout <<"\n\n";

cout<<"\n\tEmployee Number     : "<<user_details.empno;

cout<<"\n\tEmployee Name       : "<<user_details.name;

cout<<"\n\tPosition            : "<<user_details.position;

cout<<"\n\tHome Address        : "<<user_details.user.address;

cout<<"\n\tEmail Address       : "<<user_details.user.email;

cout<<"\n\tTelephone Number    : "<<user_details.user.telephone;

cout<<"\n\tMobile Number       : "<<user_details.user.mobile;

cout<<"\n\tBasic Salary Pay    : PHP "<<user_details.basic;

cout<<"\n";

    cout <<"\n\n";

    cout <<"\tEND OF PROGRAM";

    cout <<"\n\n";

    system("pause");

}

Money Bill Denomination in JavaScript

In this article, I would like to share with you a program written by my student named Bliss Jay Gayon. I already ask permission to him to publish his work in my website which he agrees upon. I would like to thank Bliss for sharing this program with us. 

What the program does it will ask the user to give an amount and it will compute the bill denomination based on the amount given by the user using JavaScript.

I am currently accepting programming work, it project, school 

programming projects , thesis and capstone projects, IT consulting 

work, computer tutorials and web development work kindly contact me in the following email address for further details.  If you want to advertise in my website kindly contact me also in my email address also. Thank you.

My email address are the following jakerpomperada@gmail.com, jakerpomperada@aol.com and jakerpomperada@yahoo.com.

My mobile number here in the Philippines is 09173084360.

My telephone number at home here in Bacolod City, Negros Occidental Philippines is  +63 (034) 4335675.

My personal website is http://www.jakerpomperada.com

Sample Program Output

Program Listing

<DOCTYPE html>

<html>

<head>

<style>

div{

    background-color: lightgrey;

    width: 500px;

    border: 25px solid green;

    padding: 25px;

    margin: 25px;

}

input

{

padding:8px;

display:block;

border:none;

border-bottom:1px solid #ccc;width:100%

}

</style>

</head>

<div>

<h1>Denomination</h1>

<h5>made bt: Bliss Jay Gayon (9/12/18)</h5>

  <label for="prelim">Prelim Grade </label>

    <input type="text" id="prelim" class="input" name="prelim" placeholder="Enter Amount">

  <button type="submit" class="input" onclick="myFunction()">Try it</button>

  

<p style="color:black;" id="demo"></p>

</div>

<script>

function myFunction() {

  var prelim = document.getElementById("prelim").value;

  var average = parseInt(prelim)/1000;

  var fivehundred = parseInt(prelim)/500;

  var twohundred = parseInt(prelim)/200;

  var onehundred = parseInt(prelim)/100;

  var fifty = parseInt(prelim)/50;

  var twenty = parseInt(prelim)/20;

  

  

  var n = average - (average % 1 );

  var a = fivehundred - (fivehundred % 1);

  var b = twohundred - (twohundred % 1);

  var c = onehundred - (onehundred % 1);

  var d = fifty - (fifty % 1);

  var e = twenty - (twenty % 1);

  

  document.getElementById("demo").innerHTML = " There Are " +n+ ", 1000 Bills and " +a+ ", 500 Bills  and " +b+ ", 200 Bills </br> and " +c+ ", 100 Bills  and " +d+ ", 50 Bills and " +e+ ", 20 Bills";

}

</script>

</form>

</body>

</html>