How do menus or classes appear gradually?

Asked

Viewed 93 times

0

I would like a help, it’s a project that would be a pizza site, where when the person entered the site did not appear all "menus" or "classes" at a time, when only the menu would appear, as soon as he chose which pizzas the person would want to appear the delivery part and so on. He also needed to calculate the value of each pizza automatically when the quantity was selected and the subtotal appeared in the footer. Thank you very much to anyone who can help.

    $('.irEntrega').click(function(){
    
    	$('.entrega').show();
    	$('.cardapio').hide();
    });
    
    
    
    $('.qtd').change(function () {
    	var total = 0;
        var clicado = $(this);
    	
    	
    	$('.qtd').each(function () {
    	var $cada_um = $(this);
    	var valor = Number($cada_um.parent().find('.valor').html());
    	var qtd = $cada_um.val();
    	total += valor * qtd;
    });
    
    	$('.final').html(total);
    
    });
    .etapa {
    	display: none;
    	}
    	
    .ativa {
    	display: block;
    }
    
    .pizza {
    	width: 25%;
    	float: left;
    	padding: 1%;
    }
    
    .qtd{
    	width: 30px;
    	height: 30px;
    }
    
    .pizza img{
    	width: 100%;
    }
    
    .painel_nav{
    	clear: both;
    }
    
    header{
    	background-image: url("../imgs/back.jpg");
    	height: 110px;
    }
    
    footer{
    	width: 100%;
    	position: fixed;
    	bottom: 0;
    	background-color: lightcoral;
    	font-size: 3em;
    	
    }
<!DOCTYPE html>
    <html lang ="pt-br">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<link href="css/geral.css" type="text/css" rel="stylesheet">
    	
    </head>
    <body>
    <div class="conteudo">
    	<div class="etapas cardapio">
    		<h3>Cardapio</h3>
    		
    		<div class="pizza">
    			<h4>nome pizza</h4>
    			<img src="http://placehold.it/350x150">
    			Quantidade: <input class="qtd" type ="number" value="0" max="5" min="0"> nome pizza</input>
    		</div>
    			<div class="pizza">
    			<h4>nome pizza</h4>
    			<img src="http://placehold.it/350x150">
    			Quantidade: <input class="qtd" type ="number" value="0" max="5" min="0"> nome pizza</input>
    		</div>
    		<! -- itens -->
    		<div class="painel_nav">
    			<button class="irEntrega">Avançar</button>
    		</div>
    	</div>
    	<div class="etapas entrega">
    		<h3>Entrega</h3>
    		<! -- formulario de entrega -->
    		     <form id="Endereco">
                  <label for="nome">Nome do Cliente:</label>
                      <input name="nome" id="nome" type="text"><br />
                  <label for="cpf">Rua:</label>
                      <input name="rua" id="rua" type="text"><br />
                  <label for="email">Complemento:</label>
                      <input name="complemento" id="complemento" type="text"><br />
                  <label for="senha">Bairro:</label>
                      <input name="bairro" id="bairro" type="text" /><br />
                  <label for="senha">CEP:</label>
                      <input name="cep" id="cep" type="number" max="10" min="0" /><br />
                      <br />
                      
    </form>
    		<div class="painel_nav">
    			<button class="irPagamento">Informação de Pagamento</button>
    		</div>
    	</div>
    	<div class="etapas pagamento">
    		<h3>Pagamento</h3>
    		<p>asdasdsadsasadsadsadsasasadsasasasasadsaa</p>
    		<! -- formulario de pagamento -->
    	</div>
    	<div class="etapas stiuacao">
    		<h3>Situação</h3>
    		<! -- mensagens bonitas de agradecimentos e CONTATO -->
    	</div>
    	<footer>
            valor: <span class="final">0,00</span>	    
    
    	</footer>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/geral.js"></script>
    
    </body>
</html>

javascript jquery html css

  • Look guy to do all this you’ll still need a database connection, so you could log every pizza and get your valuables. About the front end part I didn’t really understand how you want the site, there would be some site that you are getting inspired?

  • It’s a college project, wouldn’t need a database, it’s hard to do those things that were asked for. When the person entered the site should appear only the part of the "Cardapio" and as the person chose the pizza would go to the part of the delivery that would be the address, then the cardapio would disappear and the delivery and would go to the payment part, etc...

1 answer

0

Sorry for the delay, well for what I saw it is only to let the elements that should not appear with display:One and by that the person goes clicking on their links will exchange the same for display:block. 

<html>
<head>
    <title>quadrados</title> 
    <style>
        div{
            width:100px;
            height: 100px;
        }
        .div1{
            background: #FF0000;    
        }
        .div2{
            background: #000000;
            display:none;
        }
    </style>
</head> 
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
    $('.div1').click(function aparece() {
        $('.div2').css('display', 'block');
    });
</script>

Or you can also choose to create a class and keep taking it and putting

<html>
<head>
    <title>quadrados</title> 
    <style>
        div{
            width:100px;
            height: 100px;
        }
        .div1{
            background: #FF0000;    
        }
        .div2{
            background: #000000;
            display:none;
        }
        .show{
            display: block !important;
        }
    </style>
</head> 
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
    $('.div1').click(function aparece() {
        $('.div2').toggleClass('show');
    });
</script>

I hope I helped you, thanks for your attention, Ítalo Drago.

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.