Vending

<html>
<head>
<style>
.managebut
{
visibility:hidden;
width: 100;
}
.mareq
{
visibility: hidden;
}
.door
{
position: absolute;
left: 625;
height: 100px;
width: 350;
background-color: black;
z-index: 0;
top: 670;
}
.doot
{
position:relative;
left:10%;
width:180px;
height:60px;
z-index:-1;
}
.dropthing
{
position: center;
top: 110;
left: 1260;
height: 100px;
width: 35px;
background-color: grey;
}
table, th, td
{
border: 3px solid black;
background-color: slategrey;
}
button{
background-color:white;
border: 2px solid black;
width: 45px;
height: 45px;
position: center;
font:
}
.coin_display{
font-size: 25;
}
.gg{
Position: absolute;
Width:100px;
visibility: hidden;
left: 110px;
}
.gg2{
Position: Absolute;
Width:100px ;
}
.gg3{
Position: absolute;
Width:100px;
visibility: hidden;
left: 210px;
}
.gg4{
text-align: center;
}
}
</style>
<script>
//OBJECT FUNCTIONS
function vending_object(ID,NAME,IMGSRC,COST)
{
this.ID_NUMD = ID,
this.DIS_NAME = NAME,
this.IMGG = IMGSRC,
this.PRICE = COST
this.STORED = 3
}
//4 candy, 4 drink, 4 crisps, 4 Savoury Items
var COLA = 12,CHOCOLATE = 0,CANDY = 1,SOUR = 2,WATER = 13,REESES = 3,PEA
NUTS = 4,BUBBLE = 14,JERKY = 5,CRISPS = 8,HONEYSOYCRISPS = 9,SALTANDVINEGAR_CRIS
PS = 10,SOUR_CREAM_CRISPS = 11,MILK = 15,PORK = 6,RATIONS = 7
var vending_array = new Array()
//DECLARATION OF ALL VENDING OBJECTS. FILE NAMES SHOULD MATCH UP WITH TH
ESE
vending_array[COLA] = new vending_object("D1","Cola","cola.jpg",250)
vending_array[CHOCOLATE] = new vending_object("A1","Chocolate","chocolat
e.jpg",200)
vending_array[CANDY] = new vending_object("A2","Candy","candy.jpg", 150)
vending_array[SOUR] = new vending_object("A3","Sour Candy","sour.jpg",20
0)
vending_array[WATER] = new vending_object("D2","Water","water.jpg",500)
vending_array[REESES] = new vending_object("A4","Reeses Pieces","reese.j
pg",250)
vending_array[PEANUTS] = new vending_object("B1","Peanuts","peanuts.jpg"
,200)
vending_array[BUBBLE] = new vending_object("D3","Bubble Drink", "bubble.
jpg",250)
vending_array[JERKY] = new vending_object("B2","Beef Jerky","jerky.jpg",
300)
vending_array[CRISPS] = new vending_object("C1","Crisps","crisps.jpg",20
0)
vending_array[HONEYSOYCRISPS] = new vending_object("C2","Honey Soy Crisp
s","honeysoy.jpg",250)
vending_array[SALTANDVINEGAR_CRISPS] = new vending_object("C3","Salt and
Vinegar Crisps","saltvinegar.jpg",250)
vending_array[SOUR_CREAM_CRISPS] = new vending_object("C4","Sour Cream C
risps","sourcream.jpg", 250)
vending_array[MILK] = new vending_object("D4","Milk","milk.jpg",300)
vending_array[PORK] = new vending_object("B3","Pork Crackling","pork.jpg
",300)
vending_array[RATIONS] = new vending_object("B4","Trail Rations","ration
s.jpg",300)
//END OBJECT FUNCTIONS
var cents = 0
var dollars = 0
var coin_type = new Array()
coin_type[0] = 20;
coin_type[1] = 50;
coin_type[2] = 100;
coin_type[3] = 200000;
var active_coin = 0
//Used for the console
function beep(message)
{
document.getElementById("key_display").innerHTML = message
}
//
/*
VEND FUNCTIONS
*/
function vend(obj) //Checks coins, sets the display as well.
{
var coins = dollars * 100 + cents
dollars = 0
if(obj.PRICE < coins + 1)
{
obj.STORED-coins -= obj.PRICE
cents = coins
sort_coins()
display_coins()
make()
document.getElementById("key_display").innerHTML = ""
document.getElementById("display_item").src = obj.IMGG
return
}
cents = coins
sort_coins()
beep("go ask your mum for more money kid!")
}
/*
END VEND FUNCTIONS
*/
//KEYPAD FUNCTIONS
var pad_value = "" //The pad value
function pad_enter() //Calls a bunch of the vending functions and alters
the console if necessary.
{
for(index = 0;index < vending_array.length;index++)
{
if(pad_value == vending_array[index].ID_NUMD)
{
//document.getElementById("key_display").innerHTML = "Valid"
if(vending_array[index].STORED < 1)
{
document.getElementById("key_display").innerHTML = vendi
ng_array[index].DIS_NAME + " is out of stock!"
return
}
vend(vending_array[index])
pad_value = ""
return;
}
}
document.getElementById("marq").style.visibility = "visible"
document.getElementById("marq").innerHTML = pad_value + " is Invalid I
D"
document.getElementById("key_display").style.visiblity = "hidden"
}
function pad_clear() //Clears the pad value and the console
{
pad_value = ""
document.getElementById("marq").style.visibility = "hidden"
document.getElementById("key_display").innerHTML = pad_value
}
function pad_press(key) //Adds a key to the current pad value
{
pad_value += key
document.getElementById("key_display").innerHTML = pad_value
}
//END KEYPAD FUNCTIONS
/*
COINS FUNCTIONS
*/
function sort_coins() //Sorts the coins from cents to dollars
{
while(cents > 99)
{
dollars++
cents -= 100
}
}
function display_coins() //Displays the coins. Has a cheap fix for cents
appearing wrong.
{
if(cents < 10)

{
document.getElementById("coin_display").innerHTML = "$"
+ dollars + ".0" + cents
return
}
document.getElementById("coin_display").innerHTML = "$" + dollar
s + "." + cents
}
function insert()//Adds the active coin and sorts it
{
cents += coin_type[active_coin]
sort_coins()
}
function changecoin(coinid) //Changes the current active coin
{
active_coin = coinid
insert()
display_coins()
}
/*
END COIN FUNCTIONS
*/
/*
Management functions
*/
function activate_management()//Displays the management buttons or hides
them if already visible
{
if(document.getElementById("management_button").style.visibility
!= "visible")
{
document.getElementById("management_button").style.visib
ility = "visible"
document.getElementById("stocklist").style.visibility =
"visible"
}
else
{
document.getElementById("management_button").style.visib
ility = "hidden"
document.getElementById("stocklist").style.visibility =
"hidden"
document.getElementById("itemlist").style.visiblity = "h
idden"
document.getElementById("itemlist").innerHTML = ""
}
}
function add_stock() //Adds an item to stock according to what is select
ed from the keypad
{
{
if(pad_value == vending_array[index].ID_NUMD)
{
vending_array[index].STORED++
list_stock()
}
}
}
function list_stock() //Shows the stock currently contained inside the m
achine
{
document.getElementById("itemlist").innerHTML = ""
{
document.getElementById("itemlist").innerHTML += vending
_array[index].DIS_NAME + ": " + vending_array[index].STORED + "<br>"
}
}
/*
END MANAGEMENT CODE
*/
/*
Animation code
*/
var height = 100 //Used to determine the height of the door
var id //Variable for timed functions
function make() //Set the frame functions to begin
{
document.getElementById("myAudio2").play()
id = setInterval(frame,5)
}
function frame() //Alter the relevant object, animate it
{
height-if(height < 1)
{
clearInterval(id)
id = setTimeout(closed,400) //Plays once after 400 milli
seconds. The door will open, and then shortly afterwards close
}
document.getElementById("door").style.height = height
}
function closed() //Clears id of the previous animation and begins the c
lose animation
{
clearInterval(id)
id = setInterval(close,5)
}
function close() //Begins the closing animation, same as frame
{
height++
if(height == 100)
{
clearInterval(id)
}
document.getElementById("door").style.height = height
}
//DRAG AND DROP FUNCTIONS, USED MAINLY FOR INSERTING COINS INTO THE SLOT
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev, type, itid) {
currID = itid
active_coin = type
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
cents += coin_type[active_coin]
sort_coins()
display_coins()
currID = 0
document.getElementById("myAudio").play()
// vid.play()
}
/*
END DRAG AND DROP
*/
</script>
<style>
#div1 {padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<audio id="myAudio">
<source id="myAudio" src="Audio.mp4" type="video/mp4">
</audio>
<audio id="myAudio2">
<source id="myAudio2" src="Audio2.mp4" type="video/mp4">
</audio>

<table align="left" valign="top" width="25%" height="100%">
<tr>
<td valign="top" >
<button onclick="activate_management()" clas
s="gg2" valign="top">Activate Management</button>
<button onclick="add_stock()" id="management
_button" class="gg3" align="right" >Add Stock</button>
<button onclick="list_stock()" id="stocklist
" class="gg">List Stock</button>
<br><br>
<font size="6"> <p id="itemli
st"> </p> </font>
</tr>
</td>
</table>
<tr>
<td>
</td>
<td>
<table border="0" width="50%" height="765px" align="left" valign="bottom
" class="gg4">
<tr><td colspan="6" align="center"> <font face="Arial Black" size="20"> Ulti
mate Vending Machine </font> </td> </tr>
<tr> <td></td><td id="0" width="22.5%"> </td> <td id="1" width="22.5%">
</td> <td id="2" width="22.5%"> </td> <td id="3" width="22.5%"> </td> <td></td
> </tr>
<tr> <td></td><td id="4"> </td> <td id="5"></td> <td id="6"> </td> <td
id="7"></td><td></td> </tr>
<tr> <td></td><td id="8"> </td> <td id="9"> </td> <td id="10"></td> <t
d id="11"></td> <td></td> </tr>
<tr><td></td> <td id="12"> </td> <td id="13"> </td> <td id="14"></td>
<td id="15"></td> <td></td></tr>
<tr height="100px"><td></td> <td> </td> <td colspan="2" id="item_display
"><img class="doot" id="display_item" src="chocolate.jpg"> </td> <td> </td><td>
</td> </tr>
</table>
</td>
<td align="right">
<table border="0" width="12.5%" height="100%" valign="top"
align="r
ight">
utton> </td>
</td> </tr>
<tr> <td align="center"> <button onclick="pad_press('A')"> A </b

<td align="center"> <button onclick="pad_press('1')"> 1 </button>
<tr> <td align="center"> <button onclick="pad_press('B')"> B </

button> </td> <td align="center"> <button onclick="pad_press('2')"> 2 </button>
</td> </tr>
<tr> <td align="center"> <button onclick="pad_press('C')"> C <
/button> </td> <td align="center"><button onclick="pad_press('3')"> 3 </button>
</td> </tr>
<tr> <td align="center"> <button onclick="pad_press('D')"> D </
button> </td> <td align="center"><button onclick="pad_press('4')"> 4 </button>
</td> </tr>
<tr> <td width="100px" height="100px" align="center"> <button on
Click="pad_clear()"> Clear </button> </td> <td width="100px" height="100px" ali
gn="center"> <button onClick="pad_enter()"> Enter </button> </td> </tr>
<tr> <td colspan="2" height="100PX" class="td1"><p id="key_dis
play"></p><font color="red"><marquee id="marq" class="mareq" color="red"></marqu
ee> </font></td>
</tr>
</table>
</tr>
</td>
</tr>
</table>
<table border="0" width="12.5%" height="100%" align="right">
<tr > <td rowspan="1" align="center">
<img id="drag1" src="coin200.p
ng" draggable="true" ondragstart="drag(event,3,'drag1')" width="75" height="75">
<td align="center"> <img id="drag1" src="coin20.png" draggable="true" ondragst
art="drag(event,0,'drag1')" width="75" height="75"> </td></td> <tr>
<tr ><td rowspan="0.25" align="center"> <img id="drag1" src="coin100.png" drag
gable="true" ondragstart="drag(event,2,'drag1')" width="75" height="75"> <td al
ign="center"> <img id="drag1" src="coin50.png" draggable="true" ondragstart="dr
ag(event,1,'drag1')" width="75" height="75"> </td></tr>
<tr > <td height="200"> <div id="div1" class="dropthing" ondrop="drop(ev
ent)" ondrop="playAudio" ondragover="allowDrop(event)" width="500"> </div></td>
<td height="200" id="coin_display" align="center" face="Times" size="25" > <fo
nt face="Times" size="25"> </font> </td> </tr>
<tr> </tr>
</table>
<br>
<br>
<div class="door" id="door"></div>

<script>
for(counter = 0;counter < vending_array.length;counter++)
{
document.getElementById(counter).innerHTML = vending_array[count
er].DIS_NAME + " (" + "$" + vending_array[counter].PRICE / 100+ ")<br>" + vend
ing_array[counter].ID_NUMD
}
</script>
<br>
</body>
</html>
</html>

Vending

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Vending

Uploaded by

Copyright:

Available Formats

<html>

if(cents < 10)

<table border="0" width="12.5%" height="100%" valign="top"

<tr> <td align="center"> <button onclick="pad_press('A')"> A </b

<tr> <td align="center"> <button onclick="pad_press('B')"> B </

<div class="door" id="door"></div>

You might also like