Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:
    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>
  • Posted
    Updated 25-Aug-22 19:09pm
    v2
    Comments
    OriginalGriff 26-Aug-22 1:10am    
    And?
    What have you tried?
    Where are you stuck?
    What help do you need?

    Just dumping your homework question with a bunch of code doesn't tell us what you need help with. Use the "Improve question" widget to edit your question and provide better information.
    Member 15627495 26-Aug-22 1:22am    
    as help and reminder, nothing better than the official Jquery web site :
    https://api.jquery.com/

    read again about 'selectors',
    and the function 'append' / 'innerHtml' / 'prepend'


    I note you require jquery but you go deep with native JS.
    make a flow chart for the need you have to cover.
    A -> B -> C -> D -> goal

    This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



    CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900