Web Based Cocktail Maker

[miss.noir]

Hi there,

For University, I have to do a reassessment project whereas by I create a web-based cocktail maker. My issue is I really do not know where to start with it. I was wondering if anyone would be able to kick me off and point me in the right direction with this project. We have to work with basic HTML and mainly Javascript. Here is the specification for the project. I hope someone will be able to help me.

Build a web-based cocktail maker. Your web page should show a set of 4-8 named bottles, a cocktail shaker and a cocktail glass. If the user clicks on a bottle, a dash of its contents is added to the shaker. The total contents of the shaker should be listed beside the shaker, for example:

• 1 Ouzo
• 2 Gin
• 1 Creme De Menthe

When the user clicks on the shaker, you should show the shaker being shaken for a moment or two (using a simple animation) and then the glass should appear filled and the shaker should become empty.

When the user clicks on the glass, the webpage should display the message "Cheers!" and the glass should become empty. However, if the glass contains a Vodka Martini, shaken not stirred (5 Vodka, 1 Vermouth), then the webpage should display the message "Welcome back, Mr. Bond!"

You should include sound effects in response to various events. You should begin by using algorithms and class diagrams to design your software.

Please, please, please, can anyone help me? I need to pass this!

This looks like a fun project, I wish I had more time today to help you out with this...but you don't want me to do your project for you anyway :-)

It looks like you have several parts to get organized around.
1. images
2. drink counting
3. testing for "bond"

You will need to find images of your alcohols of choice -- and they'd better include the ones to make 007's dry martini -- and cleanly slice them into unique images with an image editor.

Next, are you going to use an image map (define the outlines of the images as hot-spot links), in which case you can reassemble some of the images into a static layout state; or are you going to layer the images over one another using CSS and make each a link or grab it's click event with javascript?

You will need a composite image with and without the shaker, you will need images of the glass full and empty, etc

Now you need to make your animations (I assume you're not using Flash for this project, which would make life much easier), the animated gif of the "shaking" shaker.

If you want to get ambitious and use javascript to shake your shaker, you can borrow and modify the animation script used on this page (mouse-over the contact email link ) to see effect: http://freshgrok.com/contact.php Since I made that, you can learn from it if you'd like. I'm including the core javascript function for this at the end of this post.

Now in your javascript you will want to create counters that get updated for each image-click of each alcohol

var ouzo = 0;
var gin = 0;
var creme_de_menthe = 0;

// call this on image or hot-spot click event ...
function update_counter ( alcohol ) {
  // alcohol passed in as the string name
  switch ( alcohol ) {
    case 'ouzo': ouzo ++; break;
    case // etc 
  }
}

You might add the html display functionality to the above switch ... you can always use form text input fields (easy access to value) and style-out the text field borders with CSS

Now all you need to do is test each event and perform the appropriate actions ...

I hope something here helps you get your mind wrapped around this project -- good luck and

Cheers!

Flight animation script

function butterfly () {
  
  // only fly once per page load //
  document.getElementById('mailto').onmouseover = '';

  var logo = document.getElementById('logo');
  var img = logo.getElementsByTagName('img').item(0);
  img.src = images_directory + 'flight.gif';
  img.style.top = 0;
  img.style.left = 0;
  img.style.position = 'absolute';
  coordinates = new Array ();

  coordinates[0] = 'x: -6, y: 6';
  coordinates[1] = 'x: -12, y: 12';
  coordinates[2] = 'x: -18, y: 18';
  coordinates[3] = 'x: -24, y: 24';
  coordinates[4] = 'x: -30, y: 30';
  coordinates[5] = 'x: -36, y: 36';
  coordinates[6] = 'x: -42, y: 42';
  coordinates[7] = 'x: -58, y: 48';
  coordinates[8] = 'x: -64, y: 54';
  coordinates[9] = 'x: -70, y: 60';
  coordinates[10] = 'x: -76, y: 54';
  coordinates[11] = 'x: -82, y: 48';
  coordinates[12] = 'x: -88, y: 42';
  coordinates[13] = 'x: -94, y: 36';
  coordinates[14] = 'x: -100, y: 30';
  coordinates[15] = 'x: -106, y: 24';
  coordinates[16] = 'x: -112, y: 18';
  coordinates[17] = 'x: -118, y: 12';
  coordinates[18] = 'x: -124, y: 6';
  coordinates[19] = 'x: -130, y: 0';
  coordinates[20] = 'x: -136, y: -6';
  coordinates[21] = 'x: -142, y: -12';
  coordinates[22] = 'x: -148, y: -18';
  coordinates[23] = 'x: -154, y: -24';
  coordinates[24] = 'x: -160, y: -30';
  coordinates[25] = 'x: -166, y: -36';
  coordinates[26] = 'x: -172, y: -42';
  coordinates[27] = 'x: -178, y: -50';
  coordinates[28] = 'x: -184, y: -56';
  coordinates[29] = 'x: -190, y: -62';
  coordinates[30] = 'x: -196, y: -68';
  coordinates[31] = 'x: -202, y: -62';
  coordinates[32] = 'x: -208, y: -56';
  coordinates[33] = 'x: -214, y: -50';
  coordinates[34] = 'x: -220, y: -42';
  coordinates[35] = 'x: -226, y: -36';
  coordinates[36] = 'x: -232, y: -30';
  coordinates[37] = 'x: -238, y: -24';
  coordinates[38] = 'x: -242, y: -18';
  coordinates[39] = 'x: -248, y: -12';
  coordinates[40] = 'x: -254, y: -6';
  coordinates[41] = 'x: -260, y: 1';
  coordinates[42] = 'x: -266, y: 7';

  var fly = window.setInterval( function () {
    if ( coordinates.length > 1 ) {
      var path = coordinates.shift();
      var pathX = path.match( /x:\s*(-?\w+)/ )[1];
      var pathY = path.match( /y:\s*(-?\w+)/ )[1]
      img.style.left = pathX + 'px';
      img.style.top = pathY + 'px';
      if ( coordinates.length == '1' ) {
        clearInterval( fly );
        var swap = window.setTimeout( function () {
          img.src = images_directory + 'butterfly.gif';
        }, 4100 );
      }
    }
  }, 40 );
}

[miss.noir]

Thanks for the help, but even after that, I still don't know what I'm doing. It's very basic, so it should be easy, but it's bothering me more than anything. My sister, who is not even 16 yet and not big on coding etc, saw there were fatal flaws in what we were being asked to do, that there was no point.

I will try and get something down, then I might need someone to look it over for me. I have all the images and sounds that I'm allowed to use. It's all very basic. I'm not sure how the shaking thing works. Could I just get the image of my shaker to move around a little? I think we did that one time...

[Moe87]

Thanks for the help, but even after that, I still don't know what I'm doing. It's very basic, so it should be easy, but it's bothering me more than anything. My sister, who is not even 16 yet and not big on coding etc, saw there were fatal flaws in what we were being asked to do, that there was no point.

I will try and get something down, then I might need someone to look it over for me. I have all the images and sounds that I'm allowed to use. It's all very basic. I'm not sure how the shaking thing works. Could I just get the image of my shaker to move around a little? I think we did that one time...

Hi there not usualy one ta register too forums ah well, since i av the exact same assigment how are you doing on yours? the assignment is simple: if you recall we did somert like this when we were doing the james bond thing with text if you look at the lecture notes etc he has for that most the example only need to be tweeked slightly and you should be able to use them, the animation was one of the last lectures i went ta if ya remeber paul showed us that lil g*y box which was flyin around places all u av to do is decrease the screan ratio for that so it only moves ever the slitest and it only moves when on click is preformed. anyway message me and let me know how its going dont worry about it, if ya need any help i will be doing mine tomoro in the afternoon ya shud be fine :) as long as u attempt the code u could get marks for it :icon_idea: :) let me knw if ya av any problems i aint an expert coder or anything but should be able ta tell you what lecture notes ta look at etc, (just look at his notes and examples and ur half way there) then if u did the old thing for him (that casino royal one u can use the code out of that remeber it dont av ta look fancy jus as ta do the job)

[miss.noir]

I'm as stuck as can be with this. Although, I've got the HTML all sorted I think. I shall have a look at those user notes. How's yours going?

[Moe87]

I'm as stuck as can be with this. Although, I've got the HTML all sorted I think. I shall have a look at those user notes. How's yours going?

just about ta strat it lol nothing like leaving it ta last minue :P , did u do the dice thing and did that go alrite for you ? you can use quite a bit of code out of that tbh, and the remainder is somert along the lines of the bond thing where the speech appeared

[miss.noir]

Well, I've been doing mine since 1pm. I'm still not done. I can't get it to work. I never got the dice or Bond things to work either for some reason. HELP!

[Moe87]

Well, I've been doing mine since 1pm. I'm still not done. I can't get it to work. I never got the dice or Bond things to work either for some reason. HELP!

you got msn ???

[miss.noir]

yep I certainly do I'll PM you my add =]

[richy90]

Did you manage to solve the cocktail shaker as, i have a similar project; but i am unable to get mine to work correctly as the php will not search through the xml sheets to compare the shots which allows the user to input as many as they like. I would be grateful for any help on this matter.