i need help with a school project on how to achieve the qn above in jquery with some guidelines given.
1)Using Inspect, note that the draggable Client div, which is the first Client only, must be dropped in the
element containing the car image, before it is able to drop at Cashier.
2) When Client is dropped at either Exit or Cashier, add class "car_selected" to the direct parent element where the Client was dropped at. This is to indicate that the Car, where the Client was, has been selected. Add the following code in dropclient2():ui.draggable.parent().addClass("car_selected");
3) When Yes button is clicked to purchase
- Select the image element whose parent element has class "car_selected”, and apply attr() to replace the image source from car image to sold image.
- Select element with class "car_selected", and…
Add class "car_sold"
Remove class "car_selected”
This is to change status of car as sold. You may apply chaining of methods
4) In dropclient(), write an if statement to return false if $this has class "car_sold". This is to stop
users from selecting already selected cars
5. When No and Exit button is clicked
- Select element with class "car_selected", and…
Remove class "car_selected"
6. When Client is dropped in Exit
- Select element with class "car_selected", and…
Remove class "car_selected"
I'm sorry because i tried digging for any tips or hints for this but i couldn't really find the solution
What I have tried:
HTML:
<title>Car Dealer
<div id="salon">
<div id="clients_queue">
<h4>clients queue</h4>
</div>
<div id="cars_place">
<div id="porsche" class="place">
<h4>Porsche</h4>
<ul>
<li></li> <li></li> <li></li> <li></li> </ul>
</div>
<div id="volkswagen" class="place">
<h4>Volkswagen</h4>
<ul>
<li></li> <li></li> <li></li> <li></li> <li></li> </ul>
</div>
<div id="audi" class="place">
<h4>Audi</h4>
<ul>
<li></li> <li></li> <li></li> <li></li> <li></li> </ul>
</div>
<div id="bmw" class="place">
<h4>BMW</h4>
<ul>
<li></li> <li></li> <li></li> </ul>
</div>
</div>
<div id="cashier">
<h4>cashier</h4>
<div></div>
</div>
<div id="exit">
<h4>exit</h4>
<div></div>
</div>
<div id="display">
<ul>
<li id="clients_served">10 clients</li> <li id="cars_sold">10 cars</li> <li id="amount">€ 120.000,00</li> </ul>
</div>
</div>
<div id="dialog">
<p>Do you want to make payment?</p>
</div>
Jquery:
var brandlist = new Array("Porsche","Volkswagen","Audi","BMW");
// Counter to limit 10 customer at one time
var count = 0;
// Update the numbers
var clients_served = 0;
var cars_sold = 0;
var amount = 0;
var brandcost = new Array(72500, 23930, 31260, 43990); // Cost of the car
function newClient(){
var preference = Math.floor((Math.random()*4));
var time = Math.floor((Math.random()*10000)+1);
// Limit client to max 10
if(count < 10) { // if there are less than 10 clients
var client = Math.floor((Math.random()*10)+1); // Generate a number between 1 to 10
$("#clients_queue").append('<div class="client client_' +client + ' choice_' + brandlist[preference] +'">Client for ' + brandlist[preference] +'</div>'); // To append new client with brand name to the queue div
// Add one to the count for each newly created customer
count += 1;
// Make the first client draggable and revert if not dropped
$("#clients_queue > .client:first").draggable({revert: true, zIndex:100});
}
setTimeout(function(){newClient();},time);
}
function dropclient($this, ui)
{
$this.not(':has(".client")').each(function(){
$this.append(ui.draggable.css({float:'left'}));
ui.draggable.position({of:$(this), my:'left top', at:'left top'});
// Additional processing
count -= 1;
// Insert code here to call/invoke a function to generate new client
newClient();
ui.draggable.addClass('selected');
});
} // End of drop client
function dropclient2($this, ui)
{
$this.not(':has(".client")').each(function(){
ui.draggable.parent(".ui-droppable").addClass("car_selected");
$this.append(ui.draggable.css({float:'left'}));
ui.draggable.position({of:$(this), my:'left top', at:'left top'});
// Additional processing
count -= 1;
// Insert code here to call/invoke a function to generate new client
newClient();
if (!ui.draggable.hasClass("selected")) {
count -= 1;
newClient();
}
});
} // End of drop client 2
function removeclient(ui, where)
{
ui.draggable.animate({top: where}
).fadeOut(function()
{
ui.draggable.remove();
}
); // End of fadeOut
}// End of removeclient()
// Update the numbers
function calcost(ui)
{
if (ui.draggable.hasClass('choice_Porsche'))
{
return brandcost[0];
}
else if (ui.draggable.hasClass('choice_Volkswagen'))
{
return brandcost[1];
}
else if (ui.draggable.hasClass('choice_Audi'))
{
return brandcost[2];
}
else if (ui.draggable.hasClass('choice_BMW'))
{
return brandcost[3];
}
} // End of calcost
function update()
{
$('#clients_served').text(clients_served + ' clients');
$('#cars_sold').text(cars_sold + ' cars');
$('#amount').text('$ ' + amount); // To do: format not the same
} // End of update
$("document").ready(function(e) {
newClient();
update();
// Make droppable
$('#porsche li').droppable(
{
accept: '.choice_Porsche',
drop: function(e, ui)
{
dropclient($(this), ui);
}
}
); // End of droppable for porsche
$('#volkswagen li').droppable(
{
accept: '.choice_Volkswagen',
drop: function(e, ui)
{
dropclient($(this), ui);
}
}
); // End of droppable for volkswagen
$('#audi li').droppable(
{
accept: '.choice_Audi',
drop: function(e,ui)
{
dropclient($(this), ui);
}
}); // End of droppable for audi
$('#bmw li').droppable(
{
accept: '.choice_BMW',
drop: function(e, ui)
{
dropclient($(this), ui);
}
}); // End of droppable for bmw
$('#exit div').droppable(
{
accept: '.client',
drop: function(e, ui)
{
dropclient2($(this), ui);
removeclient(ui, '1px');
}
}
); // End of droppable for exit
$('#cashier div').droppable(
{
accept: '.client',
drop: function(e, ui)
{
dropclient2($(this), ui);
$('#dialog').dialog({
buttons: {
"Yes": function() {
clients_served += 1;
cars_sold += 1;
amount += calcost(ui);
update();
removeclient(ui, -150);
$(this).dialog("close");
$('li img.car_selected').attr('src', 'file:///D:/MWD/03_Bernice_MWD_Project/images/Sold.jpg');
},
"No and Exit": function(){
removeclient(ui, -350);
$(this).dialog("close");
}
},
close: function() {
removeclient(ui, -350);
}
});
}
}
); // End of droppable for cashier
});// End of document ready</li>