Four By Four Box

March 16, 2007

In this bit of JavaScript code I had to create a four by four box in which I randomly placed numbers 1 to 16 in each box. When the user clicks on the box I have the number revealed and when the user releases the mouse button it hides the number again. When the user finds the correct number I display a message informing them. (This example will only work properly in Internet Explorer as of right now due to features only available in that browser.)

Here is an example of this code in action.

Here is the JavaScript code that I used:

function setup()
{
cells = new Array();
cells = [
[ cell00, cell01, cell02, cell03 ],
[ cell10, cell11, cell12, cell13 ],
[ cell20, cell21, cell22, cell23 ],
[ cell30, cell31, cell32, cell33 ]
];
placeNumbers();
//document.onclick = showCell(randomNum,this);
}

function placeNumbers()
{

var randomLoc,
temp;

for ( var i = 1; i <= 16; i++ )
numbers[ i ] = i;

for ( i = 1; i <= 16; ++i )
{
randomLoc = Math.floor( Math.random() * 16 + 1 );
temp = numbers[ i ];
numbers[ i ] = numbers[ randomLoc ];
numbers[ randomLoc ] = temp;
}

i = 1;
for ( var rows = 0; rows < 4; ++rows )
{
for ( var cols = 0; cols < 4; ++cols )
{
cells[rows][cols].innerText=numbers[i];
++i;
}
}

randomGuess();
tries=0;
/*
for ( var rows = 0; rows < 4; ++rows )
{
for ( var cols = 0; cols < 4; ++cols )
{
document.getElementById(‘cell’+rows+”+cols).style.color=”white”;
}
} */
}

function showCell(button)
{
++tries;

if (button.innerText == randomNum)
{
button.style.color=”green”;
alert(‘You Found the number ‘+randomNum+’ ! It took you ‘+tries+’ tries. Please click “Shuffle Numbers” to play again.’);
button.style.color=”white”;
}
else
{
button.style.color=”blue”;
}

}

function hideCell(button)
{
button.style.color=”white”;
}

function randomGuess()
{
randomNum = Math.floor( Math.random() * 16 + 1 );
document.getElementById(‘ranNumSpan’).innerHTML=randomNum;
}

/*function processClick()
{
var top, bottom, left, right;

for ( var rows = 0; rows < 4; ++rows )
{
for ( var cols = 0; cols < 4; ++cols )
{

if ( cells[ rows ][ cols ].id == window.event.srcElement.id )
{
top = rows – 1;
bottom = rows + 1;
left = cols – 1;
right = cols + 1;

swapped = false;

// test cell above
if ( top != -1 && cells[ top ] [ cols ].innerText == ” ” )
swap( cells[ rows ][ cols ], cells[ top ][ cols ] );

// test cell right
else if ( right != 4 && cells[ rows ] [ right ].innerText == ” ” )
swap( cells[ rows ][ cols ], cells[ rows ][ right ] );

// test cell below
else if ( bottom != 4 && cells[ bottom ] [ cols ].innerText == ” ” )
swap( cells[ rows ][ cols ], cells[ bottom ][ cols ] );

// test cell left
else if ( left != -1 && cells[ rows ] [ left ].innerText == ” ” )
swap( cells[ rows ][ cols ], cells[ rows ][ left ] );

if ( swapped == false )
alert( “This move is not allowed” );
}
}
}
}

function swap( firstCell, secondCell )
{
swapped = true;
secondCell.innerText = firstCell.innerText;
firstCell.innerText = ” “;
}
*/
// –>
</script>

<h2>The random number to find is <span id=”ranNumSpan” style=”color: red; font-size: 1.5em;”></span> !</h2>
<p>To play, double click each box to reveal a number. Continue until you find the number.</p>

Posted by ParrishCo | Filed Under Webdesign | Leave a Comment

JavaScript Parking Lot

March 3, 2007

In this bit of JavaScript I had to make a parking lot tracking program that does the following things:

Has a clockin and clockout button which keeps the user from using the lot unless they have clocked in.
Keeps track of each time the button is clicked to take the space and records that time.
Calculates the total time and charges the correct amount for time in the spot.
Works with a 25 space rectangular grid.
Give the spaces names instead of numbers. I suggest a series of names like able, baker, charlie, delta; or amber, blue, cyan, dusk, emerald; but you use whatever works for you.
Use a two-dimensional array to store parking space names, and to read the names into the buttons on a form.
Place the name of each space in its proper location, above an “open/taken” button.
When you click to admit a car, prompt for a driver’s last name. Store the name in an array, and list the drivers’ names in alphabetical order on your form. Don’t sort the array permanently.
Add a search function: when a driver goes to check out, find the name of the space where the car is parked.

Here is an example of this JavaScript in action.

Here is the JavaScript code I used:

function init()
{
document.forms[0].tCol.value=dollars(tCol);

document.forms[0].clockOut.disabled = true;
document.forms[0].clockIn.disabled = false;
document.forms[0].alpha.disabled = true;
document.forms[0].bravo.disabled = true;
document.forms[0].charlie.disabled = true;
document.forms[0].delta.disabled = true;
document.forms[0].echo.disabled = true;
document.forms[0].foxtrot.disabled = true;
document.forms[0].golf.disabled = true;
document.forms[0].hotel.disabled = true;
document.forms[0].india.disabled = true;
document.forms[0].juliet.disabled = true;
document.forms[0].kilo.disabled = true;
document.forms[0].lima.disabled = true;
document.forms[0].mike.disabled = true;
document.forms[0].november.disabled = true;
document.forms[0].oscar.disabled = true;
document.forms[0].papa.disabled = true;
document.forms[0].quebec.disabled = true;
document.forms[0].romeo.disabled = true;
document.forms[0].sierra.disabled = true;
document.forms[0].tango.disabled = true;
document.forms[0].uniform.disabled = true;
document.forms[0].victor.disabled = true;
document.forms[0].whiskey.disabled = true;
document.forms[0].xray.disabled = true;
document.forms[0].yankee.disabled = true;

document.forms[0].lotStatus.value = “Closed”;
document.forms[0].lotStatus.style.color = “red”;

document.forms[0].sName.value=”";
document.forms[0].eTime.value=”";
document.forms[0].aOwed.value=”";
document.forms[0].dName.value=”";
}

function clockingIn()
{
document.forms[0].clockOut.disabled = false;
document.forms[0].clockIn.disabled = true;

document.forms[0].alpha.disabled = false;
document.forms[0].bravo.disabled = false;
document.forms[0].charlie.disabled = false;
document.forms[0].delta.disabled = false;
document.forms[0].echo.disabled = false;
document.forms[0].foxtrot.disabled = false;
document.forms[0].golf.disabled = false;
document.forms[0].hotel.disabled = false;
document.forms[0].india.disabled = false;
document.forms[0].juliet.disabled = false;
document.forms[0].kilo.disabled = false;
document.forms[0].lima.disabled = false;
document.forms[0].mike.disabled = false;
document.forms[0].november.disabled = false;
document.forms[0].oscar.disabled = false;
document.forms[0].papa.disabled = false;
document.forms[0].quebec.disabled = false;
document.forms[0].romeo.disabled = false;
document.forms[0].sierra.disabled = false;
document.forms[0].tango.disabled = false;
document.forms[0].uniform.disabled = false;
document.forms[0].victor.disabled = false;
document.forms[0].whiskey.disabled = false;
document.forms[0].xray.disabled = false;
document.forms[0].yankee.disabled = false;

document.forms[0].lotStatus.value = “Open”;
document.forms[0].lotStatus.style.color = “green”;

clockInTime=new Date();
}

function clockingOut()
{
document.forms[0].clockOut.disabled = true;
document.forms[0].clockIn.disabled = false;
document.forms[0].alpha.disabled = true;
document.forms[0].bravo.disabled = true;
document.forms[0].charlie.disabled = true;
document.forms[0].delta.disabled = true;
document.forms[0].echo.disabled = true;
document.forms[0].foxtrot.disabled = true;
document.forms[0].golf.disabled = true;
document.forms[0].hotel.disabled = true;
document.forms[0].india.disabled = true;
document.forms[0].juliet.disabled = true;
document.forms[0].kilo.disabled = true;
document.forms[0].lima.disabled = true;
document.forms[0].mike.disabled = true;
document.forms[0].november.disabled = true;
document.forms[0].oscar.disabled = true;
document.forms[0].papa.disabled = true;
document.forms[0].quebec.disabled = true;
document.forms[0].romeo.disabled = true;
document.forms[0].sierra.disabled = true;
document.forms[0].tango.disabled = true;
document.forms[0].uniform.disabled = true;
document.forms[0].victor.disabled = true;
document.forms[0].whiskey.disabled = true;
document.forms[0].xray.disabled = true;
document.forms[0].yankee.disabled = true;

document.forms[0].lotStatus.value = “Closed”;
document.forms[0].lotStatus.style.color = “red”;
}

function buttonSearch (x,button)
{
var driversName=occupants[x];

for (i in rows)
{
for (j in rows)
{
if (driversName==tenants[i][j] && driversName!=”)
{
alert(‘”‘+tenants[i][j]+’” is parked in space “‘+spaceNames[i][j]+’”.’);
}
}
}
}

function readSpace(i,j,button)
{
if (spaceStatus[i][j]==”open”)
{
document.getElementById(‘spaceStatus’+i+”+j).value=”taken”;
document.getElementById(‘spaceStatus’+i+”+j).style.color=”red”;
tenants[i][j]=prompt(“What is your Last Name?”, “Last Name”);
timesIn[i][j]=new Date();
spaceStatus[i][j]=”taken”;
arrangeNames(tenants,occupants);
}

else if (spaceStatus[i][j]==”taken”)
{
var totalTime=0;
timesOut[i][j]=new Date();
var totalTime=parseInt(timesOut[i][j] – timesIn[i][j]);
sumCol += owedAmount(totalTime);

document.getElementById(‘spaceStatus’+i+”+j).value=”open”;
document.getElementById(‘spaceStatus’+i+”+j).style.color=”green”;
document.forms[0].sName.value=spaceNames[i][j];
document.forms[0].dName.value=tenants[i][j];
document.forms[0].eTime.value=changeTime(totalTime);
document.forms[0].aOwed.value=dollars(owedAmount(totalTime));
document.forms[0].tCol.value=dollars(sumCol);
spaceStatus[i][j]=”open”;

for (var x=0; x<25; x++)
{
if (occupants[x]==tenants[i][j])
{
tenants[i][j]=”;
occupants[x]=”;
document.getElementById(‘searchButton’+x).value=”;
arrangeNames(tenants,occupants);
}
}
}
}

function arrangeNames(tenants,occupants)
{
var counter=0, z=0;
var sortingNames=new Array();

for (var x=0; x<25; x++)
{
sortingNames[x]=new Array();
sortingNames[x]=”;
}

for (i in rows)
{
for (j in rows)
{
sortingNames[z]=tenants[i][j];
counter++;
z=counter;
}
}

sortingNames.sort();

for (var x=0; x<25; x++)
{
occupants[x]=sortingNames[x];
sortingNames[x]=”;
document.getElementById(‘searchButton’+x).value=occupants[x];
}
}

function dollars(n)
{
n=eval(n);
n=Math.round(n*100)/100;
return (n == Math.round(n)) ? n += “.00″ : (n*10 == Math.round(n*10)) ? n +=”0″ : n;
}

function changeTime(totalTime)
{
var secs=0, mins=0, carry=0;
secs=Math.round(totalTime/1000);

if (secs < 10) { secs=”0″+secs; }

else if (secs >= 10 && secs <= 60) { mins=”0″; }

else if (secs > 60 && secs < 120) {
secs=Math.abs(secs – 60);
mins=(Math.round((totalTime/1000)/60));

if (mins < 10) { mins=”0″+mins; }
}

else if (secs >= 120) {
mins=(Math.round((totalTime/1000)/60));
secs=Math.abs(secs – (mins*60));

if (secs < 10) { secs=”0″+secs; }
}

var timeString = mins + “:” + secs ;
return timeString;
}

function owedAmount(totalTime)
{
var cTime=0, owed=0;
cTime=Math.ceil(totalTime/1000);
owed=((Math.floor(cTime/15)+1)*0.25);
return owed;
}

var spaceNames=
[
['alpha', 'bravo', 'charlie', 'delta', 'echo'],
['foxtrot', 'golf', 'hotel', 'india', 'juliet'],
['kilo', 'lima', 'mike', 'november', 'oscar'],
['papa', 'quebec', 'romeo', 'sierra', 'tango'],
['uniform', 'victor', 'whiskey', 'xray', 'yankee']
];
var rows= [0,1,2,3,4];

var spaceStatus=new Array();
var timesIn=new Array();
var timesOut=new Array();
var tenants=new Array();
var occupants=new Array();

for (var x=0; x<25; x++)
{
occupants[x]=”;
}

for (i in rows)
{
spaceStatus[i]=new Array();
timesIn[i]=new Array();
timesOut[i]=new Array();
tenants[i]=new Array();
}
for (i in rows)
{
for (j in rows)
{
spaceStatus[i][j]=’open’;
timesIn[i][j]=0;
timesOut[i][j]=0;
tenants[i][j]=”;
}
}
document.writeln(‘<table border=”1″>’);
document.writeln(‘<tr>’);
document.writeln(‘<td style=”text-align:right;”>’);

//Clock In and Clock Out buttons and the display of lot status
document.writeln(‘<input type=”button” id=”clockIn” name=”clockIn” value=”Clock In”‘+
‘ style=”width:21mm;” onclick=”clockingIn()” />’);
document.writeln(‘<input type=”button” id=”clockOut” name=”clockOut” value=”Clock Out”‘+
‘ style=”width:21mm;” onclick=”clockingOut()” disabled=”disabled” />’);
document.writeln(‘  Parking Lot:’);
document.write(‘<input size=”10″ name=”lotStatus” value=”Closed” style=”text-align: ‘+
‘center; color: red;” />’);

//Still need to fix ***********************************************************************
//Present tenants list of buttons
document.writeln(‘<td rowspan=”3″ style=”vertical-align:top; ‘+
‘text-align:center; background-color: lightsteelblue;”>’);
document.writeln(‘<div style=”text-align:center; margin-top:0; font-weight: bold; “>’+
‘Present Tenants:</div>’);

//Create buttons with names of each driver present
for (var x=0; x<25; x++)
{
document.write(‘<input style=”width:45mm; text-align:center;” ‘+
‘type=”button” id=”searchButton’+x+’” name=”searchButton’+x+’”‘+
‘value=”‘+occupants[x]+’” onclick=”buttonSearch(‘+x+’,this)” />’);

document.write(‘<br />’);
}
document.writeln(‘</td>’);
//End of Present tenants buttons
document.writeln(‘</tr>’);

//Beginning of creating space name buttons and status areas
document.writeln(‘<tr style=”background-color: beige;”>’);
document.writeln(‘<td>’);
document.writeln(‘<table border=”1″ cellpadding=”4″>’);
//Space buttons and names of each space
for (i in rows)
{
document.writeln(‘<tr>’);
for (j in rows)
{
document.write(‘<td>’);
document.write(‘<input style=”width:25mm; height:10mm; text-align:center;” ‘+
‘type=”button” disabled=”disabled” id=”‘+spaceNames[i][j]+’” ‘+
‘name=”‘+spaceNames[i][j]+’” value=”‘+spaceNames[i][j]+’” ‘+
‘onclick=”readSpace(‘+i+’,'+j+’,this)” />’);
//’onclick=”readSpace(spaceNames,spaceStatus,tenants,timesIn,timesOut,’+
//i+’,'+j+’,this)” />’);

document.write(‘<br />’);

//Status of each space
document.write(‘<input style=”width:24mm; text-align:center; color:green;” ‘+
‘id=”spaceStatus’+i+”+j+’” name=”spaceStatus’+i+”+j+’” ‘+
‘value=”‘+spaceStatus[i][j]+’” ‘+
‘ />’);

document.write(‘</td>’);
}
document.writeln(‘</tr>’);
}
document.writeln(‘</table>’);
document.writeln(‘</td>’);
document.writeln(‘</tr>’);
//End of creating all the space buttons and status areas

//Feed back output areas
document.writeln(‘<tr>’);
document.writeln(‘<td style=”text-align:right;”>’);
document.writeln(‘Parking Space Name: <input name=”sName” id=”sName” size=”20″ value=”"‘+
‘style=”background-color: #ffff88; text-align: right; ” /><br />’+
‘Driver\’s Last Name: <input name=”dName” id=”dName” size=”20″ value=”"‘+
‘style=”background-color: #ffff88; text-align: right; ” /><br />’+
‘Elapsed Time (hh:mm): <input name=”eTime” id=”eTime” size=”20″ value=”"‘+
‘style=”background-color: #ffff88; text-align: right; ” /><br />’+
‘Amount Owed ($): <input name=”aOwed” id=”aOwed” size=”20″ value=”"‘+
‘style=”background-color: #ffff88; text-align: right; ” /><br />’+
‘Total Collected ($): <input name=”tCol” id=”tCol” size=”20″ value=”"‘+
‘style=”background-color: #ffff88; text-align: right; ” />’);
document.writeln(‘</td>’);
document.writeln(‘</tr>’);
document.writeln(‘</table>’);
// –>
</script>

Posted by ParrishCo | Filed Under Webdesign | 2 Comments

Four By Four Box

JavaScript Parking Lot

Recent Posts

Categories

Archives

Meta