Introduction : Day 1
This project is to be completed by the Accounting Department and the IT Department. Expertise is needed from each department.
Accounting provides how the program should work and the IT Department is needed to modify the code.
Any good app or program needs input from the people using it. There is no excuse for a program not to meet the needs of the final user.
The program that I wrote follows all standard accounting principles.
In accounting, all accounts are listed in a trial balance. Some of these accounts are balance sheet accounts and some are income statement accounts. All accounts have either a debit or credit balance.
The balance in these accounts is essentially the same regardless of the statement: balance sheet or Income statment.
The program is designed to take the information from the trial balance and distribute the amounts to either the balance sheet, income statment or statement of retained earnings.
All these statements show the financial condition of the business. All are required for tax purposes, ability to get loans, credit ratings, etc.
There are also seven cascading style sheet files that provide the code for styling the html elements and help make the appliation mobile friendly.
You will be using accounting data from our web pape - accounting lessons chapter 2 and 12 that have been tested and are in balance with known outcomes to test the accuracy and validadity of the program that we are creating.
The data is entered into the program itself as internal data, modified or posted and saved as one of the other forms.
All the files listed above with the exception of the two template files contain data found in these chapters.
Here is what the template for a service business looks like.
Service Template
The chart of accounts was created that will cover most businesses. It is arranged in the following order: assets, liabilities, stockholders equity , revenue and expenses. There is another chart of accounts for companies that carry merchandise and it includes a cost of goods sold set of accounts.
Accounts can be changed if needed, balances can be set and accounts can be debited or credited. Let's look at how the function displayAllService(); works in our template program. The function is executed when the user presses the displaAllService button. The following lines of code are for each account.
var Debit = Number(0);
var Credit = Number(0);
var account0 = {Name:"Cash", Balance: 0 + Debit- Credit}
document.getElementById("a0").innerHTML = account0["Name"] + tab20 + tab + space + space + account0.Balance.toFixed(2):
Assets (accounts that have monetary value) have debit balances.
Liabilities (accounts where we owe money to someone) have credit balances.
Stockholder' Equity (owners' share of the business) have credit balances.
Revenue (money that comes in as result of sales) has a credit balance.
Expenses (money spent to run the business) have debit balances.
To increase the amount of an account, you put the transaction on its balance side.
To decrease an account balance, you post the entry on opposite the balance side.
The accounts are numbered 0 - 38. We always start arrays - lists of data with the index number 0. The first account in the chart of accounts is account0 which is Cash. Currently its balance is zero and there are no postings to the account. These are the places where the user adds numbers pertaining to this account to increase its balance or decrease its balance. Debits increase the balance and credits decrease it because it is a balance sheet account with a debit balance. There are almost identical lines of code like these for each account.
Line one is where you would put a debit posting to increase the Cash balance.
Line 2 is where you would put a credit posting to Cash to decrease its balance.
Line 3 initializes the Cash account, gives it a name and adds debit posting to it and subtracts credit posting from its balance.
Line 4 takes the information for the javascript lines here and displays them in a div tag called a0 in the HTML section of code. It first prints the account name, tabs over26 spaces and then prints the balance of the account with two decimal points.
Cash is a balance sheet account, so we also want it printed on the balance sheet. I coded that as div b0.
If it went on the income statement, it would also display at div c0 and div d0 is for stockholders' equity reports.
All accounts appear on the trial balance and are coded as a0, a1, a2, etc.
Asset, liability and stockholders' equity, balance sheet accounts, are coded b and then the account number.
Income statement accounts are coded with the letter c. and include revenue and expense accounts. If it is a merchandise business, purchases would be included
Stockholder's Equity accounts are coded with the letter d.
The tabs are four spaces, tab10 is 10 spaces and tab20 is 20 spaces. Spaces are just one space. By using a combination of these you can line up the numbers into a debit column and a credit column.
To calculate the tabs take the number of letters and spaces in the account name and subtract it from 30 for debits and 40 for credit balance accounts. Cash, for example needs 26 spaces for its tab. The account name has 4 spaces. 30 - 4 = 26
For the tabs to work, you need to have a font that treats each letter in the account name with the same width. Courier New accomplishes that.
If you examine the css files you will notice the Courrier New is the font used in the body for all the text.
If you edit any account name, you will have to keep this in mind and recalculate the tabs in order for the numbers to line up.
Day 2: Getting the files
serviceTemplate.html file
Use the Copy Text button to put the above javascript code for the serviceTemplate.html on the clipboard.
Paste it into your Notebook ++.
Save it.
Style1.css file
/*smart phones, portrait 480 X 320 phones, IPhone*/
@media screen and (min-width:320px) and (max-width:480px){
body{
font: 12pt Helvetica;
background:rgb(28%,24%,20%);/*dark lava*/
}
td{
text-align:left;
padding:8;
color:black;
font-size:10;
}
#main{
min-height:800px;
display:flex;
flex-flow:column;
border-radius:7pt;
}
#main > nav{
min-height:800px;
padding:4px;
margin:5px;
border-radius:7pt;
border:2px solid #ff55a3;/* brilliant Rose*/
background: RGB(98%,92%,84%);/*antique white*/
order:1;
}
/*#top_menu{
border:2px solid #ff55a3;/* brilliant Rose*/
/*background:RGB(93%,91%,67%);/*pale goldenrod*/
/*padding:25px;
order:1;*/
/*}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 24px tahoma;
}*/
#main> article{
min-height:800px;
margin:5px;
padding:4px;
border:solid #8888bb;
border-radius:7pt;
border:2px solid #ff55a3;/* brilliant Rose*/
background: RGB(98%,92%,84%);/*antique white*/
order:2;
}
#main> aside{
min-height:800px;
margin:5px;
padding:4px;
border-radius:7pt;
border:2px solid #ff55a3;/* brilliant Rose*/
order:3;
background: RGB(98%,92%,84%);/*antique white*/
}
header {
margin:0 auto;
min-width:200px;
height:200px;
background: RGB(75%,75%,75%);/* silver*/
/*background-image:url(style1Header.jpg);*/
background-repeat: no-repeat;
border-radius: 7pt;
padding:4px;
border-style:solid;
border-width:5pt;
border-color:red;
opacity:0.9;
}
footer{
height:200px;
border-radius:7pt;
border:2px solid #ff55a3;/* brilliant Rose*/
background: RGB(75%,75%,75%);/* silver*/
}
.border{
border-color:blue;
border-width:1px;
border-style:solid;
}
/* new stuff*/
#buttons{
background-color: RGB(80,80,80);/**/
border-radius: 15px;
border:5px solid RGB(0%,0%,0%);/*black*/
padding:5px;
width:100px;
height:45px;
}
#buttons:hover{
opacity:0.6;
background-color:RGB(89,0,13);/*cadium red*/
}
em {
font: bold 12pt sans-serif;
color:RGB(59%,44%,9%); /*bistro brown*/
}
h1{
font: bold 5pt helvetica;
color:#FFFFFF;
}
h2{
font:bold 16px Times New Roman;
color:RGB(0%,0%,0%); /* black*/
}
h3{
font:bold 14px Comic Sans;
color:RGB(0%,0%,0%); /*black*/
}
h4{
font:Bold 17px Comic Sans;
color:RGB(0%,0%,0%); /*white*/
}
p{
font-family:arial;
font-size: 8pt;
color:rgb(24%,5%,1%);/*black bean*/
}
p.special
{
font-family: tahoma;
font-size:16pt;
color: RGB(66%,66%,66%);/*dark gray*/
font-weight:bold;
}
p.medium
{
font-family:Verdana, Arial, Helvetica,sans-serif;
font-size:12;
font-weight:bold;
color:RGB(94%,87%,80%);/*almond*/
}
p.large
{
font-family:Verdana, Arial, Helvetica,sans-serif;
font-size:14pt;
font-weight:bold;
color:RGB(76%,13%,28%);/*Bright Maroon*/
}
p.small
{
font-family:Verdana, Arial, Helvetica,sans-serif;
font-size:9;
font-weight:bold;
color:RGB(49%,4%,1%);/*barn red*/
}
p.xsmall{
font-family:Verdana, Arial, Helvetica,sans-serif;
font-size:8;
font-weight:bold;
color:RGB(49%,4%,1%);/*barn red*/
}
strong{
font-weight:bold;
color:black;
}
/* unvisited link */
a:link {
font:tahoma;
font-size:14;
font-weight:bold;
color: RGB(0%,0%,100%); /* blue*/
}
/* visited link */
a:visited {
color: RGB(0%,19%,57%); /*air force blue*/
}
/* mouse over link */
a:hover {
color: RGB(23%,27%,29%); /* arsenic*/
}
/* selected link */
a:active {
color: RGB(100%,75%,0%);/*amber*/
}
textarea {
height:400px;
width:500px;
color:black;
background-color: #CCCCCC;
text-align:justify;
}
img{
max-width:100%;
height:auto;
}
img:hover{
transform: scale(1.5);
}
ol {
background: rgb(76%,60%,42%);/*camel*/
padding: 5px;
}
ul {
background: rgb(44%,31%,22%);/*coffee*/
padding: 20px;
}
ol li {
background: RGB(94%,87%,80%);/* almond*/
padding: 5px;
margin-left: 22px;
}
ul li {
background: RGB(94%,87%,80%);/* almond*/
margin: 5px;
}
textarea {
height:200px;
width:150px;
}
}
Use the Copy Text button to put the above javascript code for Style1.css on the clipboard.
Paste it into your Notebook ++.
Save it.
Style2.css file
/* Too narrow to support three columns */
@media screen and (min-width:481px) and (max-width:640px){
#main, #page{
flex-flow:column;
flex-direction: column;
}
#main > article, #main > nav, #main > aside{
/* return them to document order*/
font-family:Courier New;
font-size:12px;
order: 0;
}
strong{
font-weight:bold;
color:black;
}
header {
margin:0 auto;
min-width:200px;
height:200px;
/*background-image:url(Style2Header.jpg);*/
background-repeat:no-repeat;
border-radius: 7pt;
}
#main > nav, #main > aside{
min-height: 800px;
/*max-height: 150px;*/
}
textarea {
height:400px;
width:500px;
color:black;
background-color: #CCCCCC;
text-align:justify;
}
img:hover{
transform: scale(1.5);
}
img{
max-width:100%;
height:auto;
}
.button {
background-color: #fdee00;/*Aureolin*/
border: none;
color: RGB(89%,0%,13%); /* cadium red*/
padding: 15px 32px;
border-radius:7px;
border:4px solid #00308f;
transition-duration:0.14s;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover{
background-color: #bebebe;/*light grey*/
color: RGB(0%,0%,0%); /* black*/
}
}
Use the Copy Text button to put the above javascript code Style2.css on the clipboard.
Paste it into your Notebook ++.
Save it.
Style3.css file
/* tablet portrait, landscape e-readers, some phones*/
@media screen and (min-width:641px) and (max-width:960px){
/*@media only screen and max-width:960px){*/
body{
font-family:Courier New;
font-size:12px;
color:black;
background:rgb(21%,27%,31%);/*charcoal*/
}
td{
text-align:left;
padding:8;
color:black;
font-size:10;
}
#main{
min-height:800px;
margin:0px;
padding:0px;
display:flex;
flex-flow:column;
}
#main > article{
margin:5px;
padding:4px;
border:solid #8888bb;
border-radius:7pt;
background: RGB(94%,97%,100%);/*alice blue*/
order:2;
flex: 40%;
}
#main > nav{
border:solid #8888bb;
background:RGB(45%,63%,76%);/*air superiority*/
color:white;
padding:4px;
margin:5px;
order:1;
flex: 20%;
}
#main > aside{
margin:5px;
padding:4px;
border:solid #8888bb;
border-radius: 7pt;
background: RGB(49%,73%,91%);/*aero blue*/
order:3;
flex: 40%;
}
header {
margin:0 auto;
min-width:200px;
height:200px;
background: RGB(57%,63%,81%);/* Ceil*/
/*background-image:url(style3Header.jpg);*/
background-repeat: no-repeat;
border-radius: 7pt;
padding:4px;
border-style:solid;
border-width:5pt;
border-color:red;
opacity:0.9;
}
footer {
display:block;
margin: 5px;
padding:4px;
min-height:100px;
border:solid #8888bb;
border-radius: 7pt;
background: RGB(36%,54%,91%);/*RAF air force blue*/
}
.border{
border-color:blue;
border-width:1px;
border-style:solid;
}
h1{
font:bold 25px helvetica;;
color:#f0f8ff; /*alice blue*/
}
h2{
font:bold 18px Times New Roman;;
color:red;
}
h3{
font:bold 16px Comic Sans;;
color:red;
}
p{
font-size:7pt;
font-family:arial, sans-serif;
color:blue;
}
p.large{
font:bold 20px Times New Roman;
color:RGB(89%,15%,21%); /*Alizarin Crimson*/
}
p.small{
font:bold 8pt Times New Roman;
color:RGB(100%,1%,24%);/*American rose*/
}
p.special
{
font-family: tahoma;
font-size:13pt;
color: RGB(80,80,80);/*dark gray*/
font-weight:bold;
}
em{
font-size:14pt;
font-family:tahoma;
color:RGB(0%, 0%, 100%);/*Blue*/
}
strong{
font-weight:bold;
color:black;
}
textarea {
height:400px;
width:500px;
color:black;
background-color: #CCCCCC;
text-align:justify;
}
img{
max-width:70%;
height:auto;
}
img:hover{
transform: scale(1.5);
}
/*unvisited link*/
a:link{
font:tahoma;
font-size:16pt;
font-weight:bold;
color:RGB(0%,19%,57%) /*air force blue*/
}
/*visited link*/
a:visited{
color: RGB(89%,0%,13%) /* cadium red*/
}
/*mouse over link*/
a:hover{
color:RGB(0%,0%,0%) /* black*/
}
/*selected link*/
a:active{
color: RGB(100%,75%,0%) /*amber*/
}
ol {
background: rgb(63%,90%,100%);/*winter wizard*/
padding: 20px;
}
ul {
background: #DEB887;/*burlywood*/
padding: 20px;
}
ol li {
list-style-position:inside;
background:rgb(63%,90%,100%);/*winter wizard*/
padding: 5px;
margin-left: 35px;
color:black;
}
ul li {
background: rgb(63%,90%,100%);/*winter wizard*/
margin: 5px;
color:black;
}
textarea {
height:100px;
width:100px;
background-color: #CCCCCC;
}
.button {
background-color: #fdee00;/*Aureolin*/
border: none;
color: RGB(89%,0%,13%); /* cadium red*/
padding: 15px 32px;
border-radius:7px;
border:4px solid #00308f;
transition-duration:0.14s;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover{
background-color: #bebebe;/*light grey*/
color: RGB(0%,0%,0%); /* black*/
}
}
Use the Copy Text button to put the above javascript code for Style3 on the clipboard.
Paste it into your Notebook ++.
Save it.
Style4.css file
/* tablet landscape lo-res laptops and desktops*/
@media screen and (min-width:961px) and (max-width:1024px){
/*@media only screen and (max-width:1024px){*/
body{
background:rgb(87%,44%,63%);/*china peak*/
font-family:Courier New;;
font-size:12px;
color:black;
}
td{
text-align:left;
padding:8;
color:black;
font-size:10;
}
#main{
min-height:800px;
margin:0px;
padding:0px;
display:flex;
flex-flow:row;
}
#main > article{
margin:5px;
padding:4px;
border:solid #8888bb;
border-radius:7pt;
background: RGB(98%,81%,69%);/*apricot*/
order:2;
flex: 40%;
}
#main > nav{
margin:5px;
padding:4px;
border:solid #8888bb;
background:RGB(98%,92%,84%);/*antique white*/
color:black;
order:1;
flex: 20%;
}
#main > aside{
margin:5px;
padding: 4px;
border:solid #8888bb;
border-radius: 7pt;
background: RGB(98%,91%,71%);/*banana mania*/
order:3;
flex: 40%;
}
header {
margin:0 auto;
min-width:200px;
height:200px;
background: RGB(97%,91%,81%);/* champagne*/
/*background-image:url(style4Header.jpg);*/
background-repeat: no-repeat;
border-radius: 7pt;
padding:4px;
border-style:solid;
border-width:5pt;
border-color:red;
opacity:0.9;
}
footer {
display:block;
margin: 5px;
padding:4px;
min-height:100px;
border:solid #8888bb;
border-radius: 7pt;
background:RGB(94%,87%,80%);/* almond*/
}
.border{
border-color:brown;
border-width:1px;
border-style:solid;
}
h1{
font:bold 30px helvetica;;
color:RGB(54%,20%,14%); /*burnt umber*/
color:#ffffff;
}
h2{
font:bold 20px Times New Roman;;
color:RGB(65%,16%,16%);/*brown*/
}
h3{
font:bold 18px Comic Sans;;
color:red;
}
p{
font-family:arial, sans-serif;
font-size:9pt;
color:RGB(51%,38%,24%);/* Coyote brown*/
}
p.large{
font:bold 25px Times New Roman;
color:RGB(48%,25%,0%); /*Choclate*/
}
p.small{
font:bold 7pt Times New Roman;
color:RGB(100%,1%,24%);/*American rose*/
}
p.special
{
font-family: tahoma;
font-size:14pt;
color: RGB(80,80,80);/*dark gray*/
font-weight:bold;
}
em{
font-size:14pt;
font-family:tahoma;
color:RGB(28%, 24%, 20%);/*taupe*/
font-weight:bold;
}
textarea {
height:400px;
width:500px;
color:black;
background-color: #CCCCCC;
text-align:justify;
}
img{
max-width:80%;
height:auto;
}
img:hover{
transform: scale(1.5);
}
/*unvisited link*/
a:link{
font:tahoma;
font-size:18;
font-weight:bold;
color:RGB(0%,19%,57%) /*air force blue*/
}
/*visited link*/
a:visited{
color: RGB(89%,0%,13%) /* cadium red*/
}
/*mouse over link*/
a:hover{
color:RGB(0%,0%,0%) /* black*/
}
/*selected link*/
a:active{
color: RGB(100%,75%,0%) /*amber*/
}
ol {
background: rgb(76%,60%,42%);/*camel*/
padding: 5px;
}
ul {
background: rgb(44%,31%,22%);/*coffee*/
padding: 20px;
}
ol li {
list-style-position:inside;
background: RGB(94%,87%,80%);/* almond*/
padding: 5px;
margin-left: 22px;
}
ul li {
background: RGB(94%,87%,80%);/* almond*/
margin: 5px;
}
textarea {
height:350px;
width:300px;
background-color: #CCCCCC;
}
.button {
background-color: #fdee00;/*Aureolin*/
border: none;
color: RGB(89%,0%,13%); /* cadium red*/
padding: 15px 32px;
border-radius:7px;
border:4px solid #00308f;
transition-duration:0.14s;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover{
background-color: #bebebe;/*light grey*/
color: RGB(0%,0%,0%); /* black*/
}
}
Use the Copy Text button to put the above javascript code for Style4 on the clipboard.
Paste it into your Notebook ++.
Save it.
Style5.css file
/*laptops, desktops */
@media screen and (min-width:1025px) and (max-width:1280px){
/*@media only screen and (max-width:1280px){*/
td{
text-align:left;
padding:8;
color:black;
font-size:10;
}
body{
font-family:Courier New;
font-size:12px;
color:black;
background:rgb(42%,27%,14%);/*brown nose*/
}
#main{
min-height:800px;
margin:5px;
padding:4px;
display:flex;
flex-flow:row;
/*justify-content:center;*/
/*align-items:center;*/
}
#main > article{
min-height:800px;
margin:5px;
padding:4px;
color:black;
border:solid #cc5500;/*burnt orange*/
border-radius:7pt;
background: #faebd7;/*antique white*/
flex: 40%;
order:2;
}
#main > nav{
min-height:800px;
border:solid #cc5500;/*burnt orange*/
border-radius:7pt;
background: #cc963e;/*peru*/
color:white;
margin:5px;
padding:4px;
order:1;
flex: 20%;
}
#main > aside{
min-height:800px;
margin:5px;
padding:4px;
border:solid #cc5500;/*burnt orange*/
color:white;
border-radius: 7pt;
background: #deb887;/*burlywood*/
order:3;
flex: 40%;
}
header {
margin:0 auto;
min-width:200px;
height:200px;
background: RGB(59%,44%,9%);/*bistro brown*/
/*background-image:url(style5Header.jpg);*/
background-repeat: no-repeat;
border-radius: 7pt;
padding:4px;
border-style:solid;
border-width:5pt;
border-color:red;
opacity:0.9;
}
footer {
display:block;
margin: 4px;
padding:5px;
border-radius: 7pt;
min-height:100px;
border:solid #000000;/*vivid amber*/
background: #cc9900; /*vivid amber*/
}
.border{
border-color:green;
border-width:5px;
border-style:solid;
}
h1{
font:bold 40pt Times New Roman;
color:#000000;
}
h2{
font:bold 30px comic sans;
color:red;
}
h3{
font:bold 25px arial;
color:black;
}
p{
font-size:10pt;
font-family:arial, sans-serif;
color:#92272a;/*vivid auburn*/
font-weight:bold;
}
p.large{
font:bold 25px Times New Roman;
color:RGB(89%,15%,21%); /*Alizarin Crimson*/
}
p.small{
font:bold 8pt Times New Roman;
color:RGB(100%,1%,24%);/*American rose*/
}
p.special
{
font-family: tahoma;
font-size:12pt;
color:RGB(80,80,80);/*dark gray*/
font-weight:bold;
}
em{
font-size:18pt;
font-family:tahoma;
color:rgb(50%, 0%, 50%); /*purple*/
font-weight:bold;
}
strong{
font-weight:bold;
color:black;
}
textarea {
height:400px;
width:500px;
color:black;
background-color: #CCCCCC;
text-align:justify;
}
.img{
max-width:100%;
height:auto;
background-color:red;
}
img:hover{
transform: scale(1.5);
}
/*unvisited link*/
a:link{
font:tahoma;
font-size:14pt;
font-weight:bold;
color:RGB(0%,0%,100%); /*blue*/
}
/*visited link*/
a:visited{
color: RGB(89%,0%,13%); /* cadium red*/
}
/*mouse over link*/
a:hover{
color:RGB(0%,0%,0%); /* black*/
}
/*selected link*/
a:active{
color: RGB(100%,75%,0%) ;/*amber*/
}
ol {
background: #ffffbf;/*very pale yellow*/
padding: 15px;
color:black;
}
ul {
background: #ffffbf;/*very pale yellow*/
padding: 15px;
color:black;
}
ol li {
list-style-position:inside;
background: #ffff66;/*laser lemon*/
padding: 5px;
margin-left: 15px;
}
ul li {
background: #fff000;/*yellow process*/
margin: 5px;
}
#buttons{
background-color: RGB(29,33,13);/*army green*/
border-radius: 15px;
border:5px solid RGB(0%,0%,0%);/*black*/
padding:25px;
width:105px;
height:45px;
}
#buttons:hover{
opacity:0.6;
background-color:RGB(100%,0%,0%);/*red*/
}
textarea {
height:550px;
width:200px;
background-color: #CCCCCC;
}
.button {
background-color: #fdee00;/*Aureolin*/
border: none;
color: RGB(89%,0%,13%); /* cadium red*/
padding: 15px 32px;
border-radius:7px;
border:4px solid #00308f;
transition-duration:0.14s;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover{
background-color: #bebebe;/*light grey*/
color: RGB(0%,0%,0%); /* black*/
}
}
Use the Copy Text button to put the above javascript code for Style5 on the clipboard.
Paste it into your Notebook ++.
Save it.
Style6.css file
/*hi-res laptops, desktops */
@media screen and (min-width:1281px) and (max-width:1600px){
/*@media only screen and (max-width:1600px){*/
#main{
min-height:800px;
margin:0px;
padding:5px;
display:flex;
flex-flow:row;
}
body{
background:rgb(0%,48%,65%);/*CG blue*/
font-family:Courier New;
font-size:16px;
color:black;
}
td{
text-align:left;
padding:8;
color:black;
font-size:10;
}
#main > article{
margin:4px;
padding:5px;
border:solid #8888bb;
border-radius:7pt;
background: RGB(80%,80%,100%);/* lt grey*/
flex: 33%;
order:2;
}
#main > nav{
border:solid #8888bb;
background: RGB(70%,75%,71%);/*ash grau*/
color:white;
padding:4px;
margin:5px;
flex: 33%;
order:1;
}
#main > aside{
margin:5px;
padding: 4px;
border:solid #8888bb;
border-radius: 7pt;
background: RGB(75%,75%,75%);/*silver*/
flex: 40%;
order:3;
}
header {
margin:0 auto;
min-width:200px;
height:200px;
background: RGB(0%,48%,65%);/*cerulen blue*/
/*background-image:url(style6Header.jpg);*/
background-repeat: no-repeat;
border-radius: 7pt;
/*background: RGB(0%,48%,65%);/*cerulen blue*/
padding:4px;
border-style:solid;
border-width:5pt;
border-color:red;
/*background-size:cover;*/
opacity:0.9;
}
footer {
display:block;
margin: 5px;
padding:4px;
min-height:100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: RGB(184,184,184);
}
.border{
border-color:blue;
border-width:1px;
border-style:solid;
}
h1{
font:bold 60px Times New Roman;
opacity:5;
}
h2{
font:bold 30px comic sans;
color:red;
}
h3{
font:bold 25px arial;
color:black;
}
p{
font-size:10pt;
font-family:arial, sans-serif;
color:black;
}
p.large{
font:bold 25px Times New Roman;
color:RGB(89%,15%,21%); /*Alizarin Crimson*/
}
p.small{
font:bold 8pt Times New Roman;
color:RGB(100%,1%,24%);/*American rose*/
}
p.special
{
font-family: tahoma;
font-size:16pt;
color: RGB(80,80,80);/*dark gray*/
font-weight:bold;
}
em{
font-size:16pt;
font-family:tahoma;
color:brown;
}
strong{
font-weight:bold;
color:black;
}
textarea {
height:400px;
width:500px;
color:black;
background-color: #CCCCCC;
text-align:justify;
}
img{
max-width:100%;
height:auto;
}
img:hover{
transform: scale(1.5);
}
/*unvisited link*/
a:link{
font:tahoma;
font-size:18;
font-weight:bold;
color:RGB(94%,100%,100%) /*azure*/
}
/*mouse over link*/
a:hover{
color:RGB(0%,0%,0%) /* black*/
}
/*selected link*/
a:active{
color: RGB(100%,75%,0%) /*amber*/
}
ol {
background: #f8f8ff;/*ghostwhite*/
padding: 2px;
}
ul {
background: #72a0c1;/*air superiority blue*/
padding: 2px;
}
ol li {
list-style-position:inside;
background: #e6e8fa;/*glitter*/
padding: 5px;
margin-left: 1px;
color:black;
}
ul li {
/*list-style-type:round;*/
list-style-position:inside;
background: #f0f8ff;/*alice blue*/
margin: 1px;
color:black;
}
textarea {
height:400px;
width:300px;
background-color: #CCCCCC;
}
.button {
background-color: #fdee00;/*Aureolin*/
border: none;
color: RGB(89%,0%,13%); /* cadium red*/
padding: 15px 32px;
border-radius:7px;
border:4px solid #00308f;
transition-duration:0.14s;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover{
background-color: #bebebe;/*light grey*/
color: RGB(0%,0%,0%); /* black*/
}
}
Use the Copy Text button to put the above javascript code for Style6 on the clipboard.
Paste it into your Notebook ++.
Save it.
Style7.css file
/*hi-res laptops, desktops */
@media screen and (min-width:1601px){
/*and (max-device-width: 1920px)*/
/*and (-webkit-min-device-pixel-ratio: 1)*/
#main{
min-height:800px;
margin:0px;
padding:0px;
display:flex;
flex-flow:row;
}
body{
background-color:rgb(75%,75%,75%);/*gray*/
font-family:Courier New;
font-size:16px;
color:black;
}
td{
text-align:left;
padding:8;
color:black;
font-size:10;
}
#main > article{
margin:5px;
padding:4px;
border:solid #8888bb;
border-radius:7pt;
background: RGB(52%,52%,51%);/* bayylrdhip grey*/
flex:40%;
order:2;
}
#main > nav{
border:solid #8888bb;
background: RGB(0,102,255);/*lt blue*/
/*background: #006666;*/
color:white;
padding:4px;
margin:5px;
border-radius:7pt;
flex:20%;
order:1;
}
#main > aside{
margin:5px;
padding: 4px;
border:solid #8888bb;
color:white;
border-radius: 7pt;
background: RGB(70%,75%,71%);/*ash gray*/
flex:40%;
order:3;
}
header {
margin: 4px;
padding:5px;
min-height:200px;
border: 1px solid #787878;
border-radius: 7pt;
/*height:300px;*/
/*background-image:url(style7Header.jpg);*/
/*background-size: 250px 250px;*/
/*background-attachment: scroll;*/
/*background-position: right 100px top 10px;*/
background-repeat: no-repeat;
background-color: RGB(80%,80%,80%);/*gray*/
}
footer {
display:block;
margin: 4px;
padding:5px;
min-height:100px;
border-radius: 7pt;
border: 1px solid #787878;
background: RGB(184,184,184);
}
.border{
border-color:blue;
border-width:1px;
border-style:solid;
}
h1{
font:bold 60px Times New Roman;
opacity:5;
}
h2{
font:bold 30px comic sans;
color:#ffff99;
}
h3{
font:bold 25px arial;
color:white;
}
p{
/*font-family: Arial, Helvetica, sans-serif;*/
font-family: Courier New;
font-size:12pt;
color:black;
}
p.large{
font:bold 25px Times New Roman;
color:RGB(89%,15%,21%); /*Alizarin Crimson*/
}
p.small{
font:bold 8pt Times New Roman;
color:RGB(100%,1%,24%);/*American rose*/
}
p.special
{
/*background-color:rgb(100%,100%,100%);/*black*/
font-family: Arial, Helvetica, sans-serif;
color:red;
}
em{
font-size:12pt;
font-family:tahoma;
color:brown;
}
img{
max-width:100%;
height:auto;
}
/*unvisited link*/
a:link{
/*color:RGB(98%,81%,69%);/* apricot*/
font:tahoma;
font-size:18;
font-weight:bold;
color:RGB(0%,19%,57%) /*air force blue*/
}
/*mouse over link*/
a:hover{
color:RGB(64%,0%,0%) /* dark candy apple red*/
}
/*selected link*/
a:active{
color: RGB(100%,75%,0%) /*amber*/
}
ol {
background: #ecdac9;/*bone*/
padding: 20px;
}
ul {
/*background: #3399ff;/*brilliant Azure*/
padding: 20px;
}
ol li {
list-style-position:inside;
background: #e3dac9;/*bone*/
padding: 5px;
margin-left: 35px;
color:black;
}
ul li {
/*background: #cce5ff;/*light blue*/
/*background: RGB(0,102,255);/*lt blue*/
list-style:circle
list-style-position:inside;
font-family: Arial, Helvetica, sans-serif;
font-size:12pt;
margin: 5px;
color:black;
}
.button {
background-color: #fdee00;/*Aureolin*/
border: none;
color: RGB(89%,0%,13%); /* cadium red*/
padding: 15px 32px;
border-radius:7px;
border:4px solid #00308f;
transition-duration:0.14s;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover{
background-color: #bebebe;/*light grey*/
color: RGB(0%,0%,0%); /* black*/
}
textarea {
height:800px;
width:500px;
background-color: #CCCCCC;
}
}
Use the Copy Text button to put the above javascript code for Style7 on the clipboard.
Paste it into your Notebook ++.
Save it.
Day 3: Entering startup costs for service business
The information for these start up costs came from Chapter two janetbelch.com Accounting Tutorial
Owners invested seed money $85,000
Loan $150,800
Furniture, office supplies, office equipment, other assets purchased
Enter these amounts into the serviceTemplate.html on the following lines. Save and Run.
Line number Balance Account name
40 85000 Cash
57 47000 Furniture & Fixtures
69 1500 Office Supplies
75 100000 Other Assets
87 2300 Office Equipment
110 150800 Notes Payable
178 85000 Common Stock
Your trial balance should be in balance as well as your balance sheet. The income statement and retained earning statements were not affected by these transactions.
Save your program using an html extension. Run it and see what your get.
Code to add up trial balance debit and credit numbers
313//trial balance totals
314 var totalDebits = account0.Balance + account1.Balance + account2.Balance + account4.Balance + account5.Balance + account7.Balance + account9.Balance + account23.Balance + account25.Balance+ account26.Balance+ account27.Balance+ account28.Balance+ account29.Balance+ account30.Balance+ account31.Balance+ account32.Balance+ account33.Balance+ account34.Balance+ account35.Balance+ account36.Balance+ account37.Balance +account38.Balance
317 var totalCredits = account3.Balance +account6.Balance + account8.Balance + account10.Balance + account11.Balance+ account12.Balance+ account13.Balance+ account14.Balance+ account15.Balance+ account16.Balance+ account17.Balance+ account18.Balance+ account19.Balance+ account20.Balance+ account21.Balance+ account22.Balance+ account24.Balance;
321 document.getElementById("a40").innerHTML = "Totals" + tab20 + tab + totalDebits.toFixed(2) + space+space +totalCredits.toFixed(2);
Line 314 creates a variable called totalDebits and adds up all the accounts with debit balances
Line 317 creates a variable called totalCredits and adds up all account with credit balances.
Line 321 finds a40 and prints The debit and credit totals in separate columns.
Code to add up all accounts that are assets.
103 totalAssets = account0.Balance +account1.Balance + account2.Balance + account4.Balance + account5.Balance + account7.Balance + account9.Balance - (account3.Balance + account6.Balance + account8.Balance);
104 document.getElementById("b9b").innerHTML = "Total Assets" + tab20 + tab + tab + totalAssets.toFixed(2);
Line 103 creates a variable called totalAssets, then it adds up all accounts that are assets.
Line 104 prints the words Total Assets on the balance sheet at b9b and the total value of asset accounts.
Code to add up all accounts that are liabilities.
168 totalLiabilities = account10.Balance + account11.Balance + account12.Balance + account13.Balance + account14.Balance + account15.Balance + account16.Balance + account17.Balance + account18.Balance + account19.Balance
169 document.getElementById("b19b").innerHTML = "Total Liabilities" + tab20 + space + space + space + totalLiabilities.toFixed(2);
Line 168 creates a variable called totalLiabilities and then adds up all accounts that are liabilities.
Line 169 print the total of the liabilities on the balance sheet at b19b
All equations need to be placed where they have enough information to make calculations. For example, you can't ask for a total of the assets before you have all the balances for asset accounts.
Using the same html program enter the following information which represents the monthly transactions for our tuxedo rental shop.
Save and run.
Line number Balance Account name
207 119166.67 VE Sales Contract Sales
219 60000 Other Income
38 179166.67 Cash
231 119166.67 Salary Expense
237 3750 Rent Expense
285 1500 Alterations
298 18915 Dry Cleaning Expense
249 2000 Advertising Expense
255 150 Supplies
261 3268.12 Depreciation
273 100 Misc. Expense
292 2087.50 Uilities Expense
304 1508 Interest Expense
279 23556.67 Payroll Taxes Expense
267 812.50 Insurance Expense
39 176664.46 Cash Credit
The reports for a service business are very simple. The trial balance is a listing of all accounts and their balances. Assets, things that have value, have debit balances. Liabilties, money owed to creditors have credit balances. Stockholders' equity shows the investment by the owners and has a credit balance. Revenue, which is the money generated by sales has a credit balance. Expenses, which are moneys used to generate sales have debit balances.
The balance sheet has the assets, liabilities and stockholder's equity sections. The income statement has the revenue and expenses.
Here are some check figures. Compare your results to these numbers. Correct your program if needed.
Trial balance debit and credit totals: 414,966.67
Total assets on balance sheet: 238,302.21
Total Liabilities on balance sheet: 150,800
Total Revenue on income statement : 179,166.67
Total Expenses on income statement: 176,664.46
Net income on income statement: 2,502.21
Printing Reports
After report is displayed on the screen.
Go to top of report.
Hold down the left mouse button.
Drag the cursor down to the end of the report.
Press CRTL + C to copy the text to the clipboard.
Open Notepad or other text editor.
Press CTRL + V to paste the contents into your editor.
Key the date for the report just under the name of the report.
Center headings if you wish.
Save it if you want to.
You can now use the file as part of your business plan, loan applicaton, presentations.
Click on File and Print.
Answer Key for service business financial statement
Service businesss financial statement
Day 4: Closing the books
Most businesses need to see financial statements on a monthly basis. To see what the income, expenses and net profit are each month, the expense and revenue accounts must be zeroed out and the balance transferred to the retained earnings account.
Since revenue accounts have credit balances, in order to zero them out, we need to debit each of the two revenue accounts
Use the tables shown below to enter closing amounts into the program.
Save html program under a different name, so as to preserve the monthly file.
Closing amounts for Revenue accounts
Line number Debit Account name
203 119116.67 Sales
215 60000 Other Income
Closing Amounts for Expense Accounts
Line number Credit Account name
228 119116.67 Salary Expense
234 3750 Rent Expense
240 50 Repairs Expense
246 2000 Advertsing Expense
252 150 Supplies Expense
258 3260.12 Depreciation Expense
264 812.50 Insurance Expense
270 100 Misc. Expense
276 23356.67 Payroll Taxes Expense
282 1500 Alterations Expense
289 2087.50 Utilities Expense
294 18915 Dry Cleaning Expense
301 1508 Interest Expense
186 2502.21 Retained Earnings
The net income increases the retained earnings account and needs to show that as its balance.
A net loss will decrease the retained earnings.
Closed service business file key
You will use the closed file for next month's work. Before we start entering posted amounts for next month, we need to do a little clean up. Currently all revenue and expense accounts have a zero balance. Make sure that the debit and credit postings have a zero balance and that the account balance says zero.
Delete the debit and credit posting amounts for all revenue and expense accounts. Save the file under a name that reflefts the name of the file for next month.
We need to adjust the Cash account as well. Enter the cash balance from the trial balance into the balance place on the form. Delete the debit and credit postings. Save and check the trial balance and balance sheet for correct amounts. Now go ahead and process next month's work.
Day 5: Merchandising Business Financial Statements
The financial statements for a company that sells products is somewhat different than a service business.
There a few additional accounts: Merchandise Inventory, Purchases and Purchases returns and allowances. The inventory appears on the trial balance and income statement and balance sheet. The purchases and purchase returns and allowance accounts appear on the trial balance and the income statement.
There are a few calculations to make: cost of merchandise available for sale, cost of goods sold and gross profit.
All the adjustments to the accounts and the calculations for cost of merchandise available for sale, cost of goods sold, gross profit, total expenses and net profit can be found between lines 449 and 541.
Cost of merchandise available for sale (cmas) = beginning inventory + purchases
Cost of goods sold (cogs) = cmas-ending inventory
Gross Profit (gp) = Total Revenue - cogs
Net profit or net income = netIncome - total expenses
note:ending inventory can be found in a number of ways: by taking a physical inventory at cost, perpetual inventory, gross profit.
Here is where the two departments need to work together to determine the javaScript code for the application.
We will use the same cascading style sheet files as in the service business example, but there is a new template for the merchandisng business.
Please get a copy of this file (mdseTemplate.html).
General Ledger
Financial Reports
Financial Reports for a merchandising business.
How to run the program
Launch Notepad ++
File name
Run and select desired browser to launch
Click on Button Financial Reports for a merchandising business.
if the complete trial balance, income statement, balance sheet, and statement of retained earnings does not show up, you have made an error
Press F12 key and look in the upper right-hand corner for error and line number.
Changing Company Name
Load Notepad++
Click on File and open program.
Line 484 contains the name of the company for the trial balance without adjustments.
Line 476 contains the name of the company for the adjusted trial balance
Substitute desired company name on these lines.
Repeat for the additional forms: 40 for balance sheet, 180 Stockholders' Equity and 201 for the Income Statement.
Save Program.
Editing Accounts and Entering Balances
Load Notepad++
Get the file
The function displayAllMdse() is between lines 24 and 541.
Find the account name you want to change.
Replace your new account name with the old one and new balance.
Determine how many spaces the numbers need to be separated from the account names.
If you do not want to use a particular account type // before the line.
Save your program and run.
Adjustments for depreciation and ending inventory
Enter adjustments for accumuated depreciation for vehicles, furniture and equipment.
Add them up and enter the total under balance for depreciation expense.
Enter the ending inventory on line 458 after Balance:.
Posting to Accounts
Launch Notepad++
Get the program.
Locate the account to be posted var Debit = number(0); or var Credit = number(0);
Put your number inside the parentheses.
Save the program and test.
Closing the Books
Isolate the income or sales accounts.
Debit these accounts using the balance in the account.
Isolate each expense account.
Credit each with the amount in the expense account.
Debugging/Finding Errors
Execute the program
Press F12 key to activate javaScript debugger.
Errors and lines are reported in the console
Correct error, save and retry
Jerry Belch Copyright 2020
Use the Copy Text button to put the above javascript code on the clipboard.
Paste it into your Notebook ++.
Save it.
The employees of the company invested 85,000 in the company
A note was obtained in the amount of 150,144.46
Furniture, equipment and inventory were purchased in the amounts of 47,000, 3,800, and 100,000
Enter these into your template using the following lines and amounts.
Also enter sales transactions. Also enter the adjustment involving beginning and ending inventory amounts.
Line number Balance Account name
38 85000 Cash
188 85000 Capital Stock
34 150144.46 Cash
119 150144.46 Notes Payable
36 150800 Cash
68 47000 Furniture & Fixtures
110 100000 Merchandise Inventory
92 3800 Office Equipment
212 316270.01 Contract Sales
35 316270.01 Cash
226 17302.75 Open House trade shows
170 1384.22 Sales Tax Payable
47 18686.97 Accounts Receivable
Save your work and run it to see if your trial balance and balance sheets are in balance. Correct if necessary. Remeber use the F12 key to activate the javascript debugger if there is and error.
Day 6: Cash Payments
Now lets enter the cash payments made during the month and the adjustments for depreciation and ending inventory.
Line number Balance Account name
235 60858.42 Purchases
251 119166.67 Salary Expense
257 3750 Rent Expense
263 350 Repairs Expense
269 459.25 Alterations Expense
275 1000 Advertising Expense
281 135 Supplies Expense
295 812.50 Insurance Expense
302 200 Miscellaneous Expense
310 14121.25 Payroll Taxes Expense
322 2187.50 Utilities Expense
338 1508 Interest Expense
345 25 Delivery Expense
36 150,800 Cash
37 204573.59 Cash
Enter these adjustments to reflect the depreciation and ending inventory.
Line number Balance Account name
425 491.12 Depreciation Expense
378 375.00 Accumulated Depreciation Furniture & Fixtures
402 116.12 Accumulated Depreciation Equipment
458 50,502.92 Ending Inventory
Save and run.
Here some check numbers for you.
Trial balance totals 630,593.56
Total revenue 333,572.76
Cost of mdse available for sale 220,858.42
Gross profit 163,217.26
Total expenses 144,206.29
Net profit 19,010.97
Total assets 315,539.65
Total liabilities 211,528.68
Answer key for merchandising business
Key for Bromley's Mens' Wear merchandising business
Day 7 : Closing the books for a merchandising business
The reason for closing the books is important in that we need to zero out all revenue and expense accounts and transfer the net income or net loss to the retained earnings account, otherwise we would not know on a monthly basis how our company was doing financially. We will use the closed file for next month's work.
Now, for all revenue accounts debit them the amount of the balance in that account. For all expense accounts credit them for the balance amount.
Now we need to increase our retained earnings by the amount of our net income. Enter 19010.92 as the balance for line 195.
We need to remove the postings for the Cash account as well. Enter the cash balance from the trial balance, 196,040.89 into the balance field on the form. Delete the debit and credit postings. Save and check the trial balance and balance sheet for correct amounts.
Adjustments for inventory
We need the ending inventory to appear on the books instead of the original $100,000. Set up the balance of 50,502.92 on line 110 set to zero the ending inventory balance on line 458.
Save your file and you will be ready to use this file to process next month's work.
Day 8: Working on new project
If you are a Virtual Enterprise company, use the template for either a service of merchandising business to complete the first set of financial statements for one month.
If you are not a Virtual Enterprise company, click on the link below for information on how to create financial statements for a food truck business as part of a business plan.
Make sure that you use the mdseTemplate.html for your starting file.
Information for Food Truck financial statements
The Accounting Department needs to come up with a chart of accounts and the balances from the information above. Save it in a text format using Notepad++ or Notepad.
Example chart of accounts
Inside Slider Chart of Accounts
Remember to adjust the tabs based on the number of characters and spaces in the account name. Put the amounts next to Balance:
Accounting Department needs to produce the following documents to send to the Accounting Deparment:
Chart of accounts
Beginning Balances for Balance Sheet Accounts and Income Statement Accounts
Cash 10,000
Capital Stock 10,000
Note Payable 90,300
Food Truck 85,000
Uniforms 500
Paper Supplies 250
Permits and Uniforms 800
Office Equipment 500
Inventory 1,500
Other Assets 600
Balances for Income Statement Accounts
Cash 20,000 debit
Sales 20,000
Purchases 12,000
Salary Expense 11,783.00
Repairs Expenses 1,000
Advertising Expense 100.00
Fuel Expense 500.00
Depreciation Expense 762.49
Insurance Expense 300.00
Miscellaneous Expense 100.00
Payroll Taxes Expense 1396.33
Leagal and Accounting 0.00
Utilities Expense 100.00
Web Internet Expense 30.00
Interest Expense 526.75
Propane Expense 100.00
Cash 28,698.57 credit
Inside Slider Worksheet
Change account names, tabs and spaces where needed and then enter the numbers above to produce the financial statements for Inside Slider.
Change Trade Show Revenue account name to Catering Revenue.
Comment out Alterations Expense using // before the document.getElementById statement.
Inside Slider Key
Copyright © Jerry Belch 2020