Desenvolvedor de Software e Especialista em Tecnologia da Informação

Desafio JavaScript: Sistema de pedidos para lanchonete — Aprenda na prática com funções, if/else e switch case

Depois de aprender os fundamentos de JavaScript, chegou a hora do teste real: um desafio prático baseado em um cenário de cliente de verdade. Neste guia completo, vamos construir do zero um sistema de pedidos para uma lanchonete usando JavaScript puro, aplicando tudo o que foi ensinado sobre lógica de programação. Este é o tipo de exercício que separa quem só entende a sintaxe de quem realmente sabe pensar como programador.

Desafio JavaScript: Sistema de Pedidos de Lanchonete do ZERO 🍔💻

Se você está aprendendo JavaScript do zero ou já tem base e quer testar seus conhecimentos, esse desafio é para você. Tente reproduzir o código antes de ver a solução, e depois me conta nos comentários se conseguiu resolver do seu jeito. É o tipo de desafio perfeito para colocar no portfólio e mostrar, na prática, que você sabe programar de verdade.

Desafio JavaScript Sistema de Pedidos JavaScript para Iniciantes Lógica de Programação Funções JavaScript If Else JavaScript Mini Projeto JavaScript Programação RogerioPontesTI

"O seu cliente precisa de um sistema que simule os pedidos de uma lanchonete. Você vai precisar calcular preço, aplicar taxas e mostrar na saída o status de cada pedido. Você deve utilizar tudo que você aprendeu. Também é importante você manter o seu código organizado."

🚀 O que você vai aprender neste artigo

  1. Como estruturar um projeto JavaScript em múltiplos arquivos
  2. Como criar funções para organizar a lógica de um sistema real
  3. Como calcular valores aplicando taxas
  4. Como usar if e else para validar regras de negócio
  5. Como usar switch case para tratar múltiplas opções
  6. Como declarar e usar const e let corretamente
  7. Como testar e exibir resultados formatados no console
  8. Como pensar como programador ao resolver um desafio real

📌 Conceitos abordados

  • Organização de projetos — index.html, lib.js, main.js
  • Funções — reutilização de código
  • Constantes — const para valores fixos
  • Variáveis — let para valores que mudam
  • Condicionais — if e else
  • Switch Case — múltiplas opções
  • Entrada, processamento e saída — fluxo lógico
  • Boas práticas — código limpo e organizado

📋 O desafio: Sistema de pedidos para lanchonete

🎯 Cenário

O cliente precisa de um sistema simples em JavaScript para simular pedidos de uma lanchonete.

📋 Requisitos
  • Calcular preço do pedido
  • Aplicar taxa de serviço
  • Mostrar status do pedido
📦 Tecnologias obrigatórias
  • const e let
  • Funções
  • if e else
  • switch case
  • console.log
🗂️ Organização obrigatória
/aula-10
    ├── index.html
    ├── lib.js
    └── main.js

🗂️ Estrutura do projeto

1. index.html — Ponto de entrada

INDEX.HTML 

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sistema de Pedidos - Lanchonete</title>
        <script type="text/javascript" src="./lib.js"></script>
        <script type="text/javascript" src="./main.js"></script>
    </head>
    <body>
        <h1>Sistema de Pedidos - Lanchonete</h1>
        <h3>Desafio JavaScript</h3>
        <p>Verifique o console para ver os resultados.</p>
    </body>
</html>

2. lib.js — Biblioteca de funções

LIB.JS 

// lib.js - Funções reutilizáveis

// Constante para a taxa de serviço
const TAXA = 0.10; // 10%

// Função 1: Calcular total com taxa
function calcularTotal(valor) {
    return valor + (valor * TAXA);
}

// Função 2: Verificar status do pedido (if/else)
function verificarStatus(valor) {
    if (valor > 50) {
        return "Pedido aprovado!";
    } else {
        return "Pedido mínimo não atingido!";
    }
}

// Função 3: Definir tipo de entrega (switch case)
function tipoEntrega(tipo) {
    switch (tipo) {
        case 1:
            return "Entrega normal.";
        case 2:
            return "Entrega expressa.";
        default:
            return "Pedido inválido!";
    }
}

3. main.js — Regras de negócio

MAIN.JS 

// main.js - Regras de negócio

// Entrada de dados
let valorPedido = 60;
let tipo = 2;

// Processamento
let total = calcularTotal(valorPedido);
let status = verificarStatus(valorPedido);
let entrega = tipoEntrega(tipo);

// Saída de dados
console.log("Total: " + total);
console.log("Status: " + status);
console.log("Entrega: " + entrega);

📖 Explicando o código passo a passo

1. A constante TAXA

🔒 const TAXA = 0.10

Declaramos a taxa como uma constante porque seu valor não muda. Usamos maiúsculas por convenção para indicar que é um valor fixo.

2. A função calcularTotal()

🧮 calcularTotal(valor)

Esta função recebe o valor do pedido e aplica a taxa de serviço, retornando o total a ser pago.

Fórmula: valor + (valor * TAXA)

3. A função verificarStatus()

✅ verificarStatus(valor)

Usa if e else para verificar se o pedido atingiu o valor mínimo de R$ 50,00.

  • Se valor > 50 → "Pedido aprovado!"
  • Senão → "Pedido mínimo não atingido!"

4. A função tipoEntrega()

🚚 tipoEntrega(tipo)

Usa switch case para definir o tipo de entrega com base no valor passado.

  • case 1 → "Entrega normal."
  • case 2 → "Entrega expressa."
  • default → "Pedido inválido!"

🧪 Testando o sistema

Com os valores do exemplo (valorPedido = 60 e tipo = 2), o sistema produz a seguinte saída:

SAÍDA
console — output
Total: 66 Status: Pedido aprovado! Entrega: Entrega expressa.
📖 Testando diferentes cenários
  • Cenário 1: valorPedido = 30, tipo = 1 → "Pedido mínimo não atingido!"
  • Cenário 2: valorPedido = 60, tipo = 2 → "Pedido aprovado! Entrega expressa."
  • Cenário 3: valorPedido = 60, tipo = 3 → "Pedido inválido!"

📋 Boas práticas aplicadas

1️⃣ Separação de responsabilidades

lib.js contém as funções reutilizáveis e main.js contém a lógica principal.

2️⃣ Nomes descritivos

calcularTotal, verificarStatus e tipoEntrega são nomes que explicam o que cada função faz.

3️⃣ Uso de const

A taxa é declarada como const porque seu valor não muda.

4️⃣ Fluxo lógico claro

O código segue a ordem: entrada → processamento → saída.

⏱️ Capítulos do vídeo

  • 00:00 — Apresentação do desafio: Sistema de pedidos de uma lanchonete
  • 00:22 — Organização do projeto: Criando os arquivos lib.js, main.js e configurando o HTML
  • 00:41 — Criando a primeira função: Cálculo de total com taxa de serviço
  • 00:56 — Aplicando lógica condicional: Usando if e else para validar valor mínimo do pedido
  • 01:11 — Estruturando o switch case para definir tipos de entrega
  • 01:37 — Desenvolvimento no main.js: Declarando variáveis e invocando as funções da biblioteca
  • 02:17 — Teste prático: Exibindo total, status e tipo de entrega formatados no console
  • 02:50 — Encerramento e convite para inscrição no canal

🎯 Conclusão

Este desafio mostra como todos os conceitos que você aprendeu até agora se conectam para resolver um problema real. Você usou const, let, funções, if/else, switch case e console.log em um projeto organizado.

Neste artigo, você aprendeu:

  • ✅ Como estruturar um projeto JavaScript em múltiplos arquivos
  • ✅ Como criar funções para organizar a lógica
  • ✅ Como calcular valores aplicando taxas
  • ✅ Como usar if e else para validar regras
  • ✅ Como usar switch case para tratar opções
  • ✅ Como testar e exibir resultados no console

💡 Lembre-se: Esse é o tipo de exercício que separa quem só entende a sintaxe de quem realmente sabe pensar como programador. Tente reproduzir o código antes de ver a solução completa.

🤔 O que você achou?

💬 Quer aprender JavaScript do ZERO? Comece agora a escrever seu primeiro código e seus fundamentos!

❓ FAQ: Perguntas Frequentes sobre o Desafio JavaScript

Um mini projeto que simula o pedido de uma lanchonete: calcula total, aplica taxa e define o tipo de entrega.

Const, let, funções, if/else e switch case.

Somando ao valor original o próprio valor multiplicado pela taxa, dentro de uma função dedicada.

Para validar se o valor mínimo foi atingido e retornar uma mensagem de status.

Quando há várias opções fixas, como diferentes tipos de entrega.

Para separar a lógica reutilizável da execução principal, mantendo o projeto organizado.

Sim, desde que já tenha noção de variáveis, funções e condicionais.

A organizar a lógica de um problema real e estruturar um projeto profissionalmente.

Sim, a mesma lógica serve para qualquer sistema de pedidos.

Resolvendo desafios práticos como esse antes de ver a solução — é isso que comprova o aprendizado.

É um bloco de código que executa uma tarefa específica e pode ser reutilizado.

const não permite reatribuição, enquanto let permite que o valor seja alterado.

🎬 Assista ao Vídeos completo sobre Refatoração

O vídeo foi feito em Javascript mais o conceito pode ser utilizado em qualquer outra linguagem de programação..

🔗 Conecte-se Comigo

YouTube Site LinkedIn GitHub Instagram

💬 Você conseguiria resolver esse desafio sem ver a solução antes? Conta a real aqui embaixo 👇

#JavaScript #DesafioJavaScript #ProgramacaoParaIniciantes #LogicaDeProgramacao #MiniProjetoJavaScript #AprenderProgramacao #JavaScriptNaPratica #JavaScriptBrasil #RogerioPontesTI