Autor: felipebelloni

Se você já organizou um churrasco, sabe que calcular a quantidade certa de carne, carvão e bebidas pode ser um desafio. Recentemente, eu decidi resolver esse problema criando uma calculadora de churrasco personalizada com a ajuda do ChatGPT. Vou compartilhar todo o processo com vocês!

Primeiramente, veja como ela ficou CLICANDO AQUI.

Passo a Passo: Criando a Calculadora

1. Definindo os Itens a Serem Calculados

Primeiro, pensei nos principais elementos que seriam necessários para o churrasco. Cheguei à conclusão de que a calculadora deveria cobrir:

• Carne: Dependendo do número de pessoas e seu perfil (homens, mulheres, crianças).
• Carvão: Baseado na quantidade de carne utilizada.
• Bebidas: Cerveja, água, refrigerante e suco, levando em consideração o tipo de festa e sua duração.

Com essas informações em mente, fui ao ChatGPT para começar a montar o código.

2. Escolhendo o Design e as Funcionalidades

Eu queria que a calculadora fosse fácil de usar, com um layout simples e amigável. Além disso, os botões e as informações deveriam ser visualmente agradáveis e claros. Pedi ao ChatGPT para criar uma interface que incluísse:

• Contadores para homens, mulheres e crianças.
• Um seletor para o tipo de festa, como “Jovens, 8 horas de duração”, “Jovens e casais, 4 horas”, e outros.
• Botões estilizados para realizar o cálculo e outro para resetar os valores.

3. Criando os Cálculos de Carne e Carvão

Para calcular a carne, decidi utilizar uma regra prática:

• 400g de carne por mulher.
• 480g de carne por homem (um pouco mais, já que os homens tendem a consumir mais).
• 200g de carne por criança.

E para o carvão, estabeleci a seguinte fórmula:

• 1,3 kg de carvão para cada 1 kg de carne. O resultado final traria uma mensagem clara: “Essa é uma média apenas”, já que o consumo pode variar.

Com a lógica definida, pedi ao ChatGPT para gerar o código para esses cálculos.

4. Adicionando Cálculos de Bebidas

A parte de bebidas era um pouco mais complexa, já que o tipo de evento influencia diretamente na quantidade de consumo. Dividi os cálculos em:

• Cerveja: A quantidade de cerveja varia de acordo com a duração e o público do evento. Para festas de 8 horas com jovens, calculei entre 2 e 2,5 litros por pessoa. Já para eventos mais curtos e mistos (jovens e casais), utilizei 1 a 1,5 litros por pessoa.
• Água e refrigerante/suco: Para eventos de 4 horas, estipulei 400ml de água e 600ml de refrigerante ou suco por pessoa.

Com essas informações, montei o código para o cálculo de bebidas e finalizei essa etapa da calculadora.

5. Personalizando o Layout com Cores e Fonte

A calculadora precisava de um visual mais sofisticado. Com a ajuda do ChatGPT, escolhi a fonte Raleway, que tem um estilo moderno e elegante. Também ajustei as cores dos botões:

• O botão “CALCULAR” foi pintado de verde floresta.
• O botão “Fazer nova conta” foi personalizado com fundo branco, contorno e texto em verde.

Essas escolhas de design ajudaram a deixar a calculadora visualmente atraente e fácil de usar.

6. Forçando a Aplicação de Estilos com !important

Ao integrar o código no meu site, percebi que os estilos definidos para os botões não estavam sendo aplicados corretamente, pois outros estilos CSS estavam sobrescrevendo as definições. Pedi ao ChatGPT para corrigir isso, e a solução foi simples: usamos a regra !important no CSS para garantir que os estilos personalizados tivessem prioridade.

Código Final da Calculadora de Churrasco

Aqui está o código final que ChatGPT me ajudou a criar. Esse código pode ser facilmente implementado em um site WordPress usando o Elementor ou em um arquivo HTML:


<!-- HTML da Calculadora de Carne, Carvão e Bebidas -->
<div class="calculadora-churrasco">
    <h2>Quantas pessoas irão ao churrasco?</h2>

    <!-- Contador de Mulheres -->
    <div class="contador">
        <label for="mulheres">Mulheres</label>
        <div class="counter">
            <button type="button" class="minus" onclick="updateCounter('mulheres', -1)">-</button>
            <input id="mulheres" type="number" value="0" min="0" />
            <button type="button" class="plus" onclick="updateCounter('mulheres', 1)">+</button>
        </div>
    </div>

    <!-- Contador de Homens -->
    <div class="contador">
        <label for="homens">Homens</label>
        <div class="counter">
            <button type="button" class="minus" onclick="updateCounter('homens', -1)">-</button>
            <input id="homens" type="number" value="0" min="0" />
            <button type="button" class="plus" onclick="updateCounter('homens', 1)">+</button>
        </div>
    </div>

    <!-- Contador de Crianças -->
    <div class="contador">
        <label for="criancas">Crianças</label>
        <div class="counter">
            <button type="button" class="minus" onclick="updateCounter('criancas', -1)">-</button>
            <input id="criancas" type="number" value="0" min="0" />
            <button type="button" class="plus" onclick="updateCounter('criancas', 1)">+</button>
        </div>
    </div>

    <!-- Tipo de Festa -->
    <div class="contador">
        <label for="tipo-festa">Tipo de Festa</label>
        <select id="tipo-festa" style="width: 100%; padding: 10px; font-size: 16px; margin-top: 10px;">
            <option value="jovens-8h">Jovens, 8 horas de duração</option>
            <option value="jovens-casais-4h">Jovens e casais, 4 horas de duração</option>
            <option value="solteiros-casados-6h">Solteiros e casados, 6 horas de duração</option>
        </select>
    </div>

    <!-- Botão de cálculo -->
    <button type="button" class="calcular-btn" onclick="calcularChurrasco()">CALCULAR</button>

    <!-- Exibição dos resultados -->
    <p id="resultado-carne"></p>
    <p id="detalhes-carne" style="font-size: 14px; color: #666;"></p>

    <p id="resultado-carvao"></p>
    <p id="detalhes-carvao" style="font-size: 14px; color: #666;"></p>

    <p id="resultado-bebidas"></p>
    <p id="detalhes-bebidas" style="font-size: 14px; color: #666;"></p>

    <!-- Botão para refazer o cálculo -->
    <button type="button" class="nova-conta-btn" onclick="resetCalculadora()">Fazer nova conta</button>
</div>

<!-- CSS da Calculadora de Carne, Carvão e Bebidas -->
<style>
/* Fonte Raleway */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400&display=swap');

/* Estilos principais da calculadora */
body {
    font-family: 'Raleway', sans-serif;
}

.calculadora-churrasco {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    color: #000;
    text-align: center;
    max-width: 600px;
    margin: auto;
    font-family: 'Raleway', sans-serif;
    border: 1px solid #ccc;
}

.calculadora-churrasco h2 {
    margin-bottom: 20px;
    color: #000;
    font-family: 'Raleway', sans-serif;
}

.contador {
    margin-bottom: 20px;
}

.counter {
    display: flex;
    justify-content: center;
    align-items: center;
}

.counter input {
    width: 60px;
    text-align: center;
    margin: 0 10px;
    background-color: #fff;
    color: #000;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
}

.counter input::-webkit-outer-spin-button,
.counter input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

button.minus, button.plus {
    background-color: #a8232a !important;
    color: white !important;
    border: none;
    padding: 10px 20px !important;
    cursor: pointer !important;
    font-size: 18px !important;
    border-radius: 5px !important;
    transition: background-color 0.2s !important;
}

button.minus:hover, button.plus:hover {
    background-color: #8e1d25 !important;
}

.calcular-btn {
    background-color: #228B22 !important; /* Verde Floresta */
    color: white !important;
    border: none !important;
    padding: 15px 30px !important;
    font-size: 18px !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    transition: background-color 0.2s !important;
}

.calcular-btn:hover {
    background-color: #1d7a1d !important;
}

.nova-conta-btn {
    background-color: white !important;
    color: #228B22 !important; /* Verde Floresta */
    border: 2px solid #228B22 !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    margin-top: 20px !important;
    transition: background-color 0.2s !important;
}

.nova-conta-btn:hover {
    background-color: #228B22 !important;
    color: white !important;
}

#resultado-carne, #resultado-carvao, #resultado-bebidas {
    margin-top: 20px;
    font-size: 20px;
    color: #000;
}
</style>

<!-- JavaScript para a Calculadora de Carne, Carvão e Bebidas -->
<script>
function updateCounter(id, increment) {
    var input = document.getElementById(id);
    var currentValue = parseInt(input.value);
    if (!isNaN(currentValue)) {
        var newValue = currentValue + increment;
        if (newValue >= 0) {
            input.value = newValue;
        }
    }
}

function calcularChurrasco() {
    var mulheres = parseInt(document.getElementById('mulheres').value);
    var homens = parseInt(document.getElementById('homens').value);
    var criancas = parseInt(document.getElementById('criancas').value);
    var tipoFesta = document.getElementById('tipo-festa').value;

    if (isNaN(mulheres)) mulheres = 0;
    if (isNaN(homens)) homens = 0;
    if (isNaN(criancas)) criancas = 0;

    var totalPessoas = mulheres + homens + criancas;

    /* Cálculo de carne */
    var carnePorPessoa = 0.4; // 400g por pessoa
    var carneMulheres = mulheres * carnePorPessoa;
    var carneHomens = homens * carnePorPessoa * 1.2; // Homens comem mais
    var carneCriancas = criancas * carnePorPessoa * 0.5; // Crianças comem menos

    var totalCarne = carneMulheres + carneHomens + carneCriancas;

    /* Exibe o resultado da carne */
    document.getElementById('resultado-carne').textContent = "Quantidade total de carne necessária: " + totalCarne.toFixed(2) + " kg";
    document.getElementById('detalhes-carne').innerHTML = 
        "Mulheres: " + mulheres + " x 400g = " + carneMulheres.toFixed(2) + " kg<br>" +
        "Homens: " + homens + " x 480g = " + carneHomens.toFixed(2) + " kg<br>" +
        "Crianças: " + criancas + " x 200g = " + carneCriancas.toFixed(2) + " kg";

    /* Cálculo de carvão */
    var totalCarvao = (totalCarne * 1.3).toFixed(2); // 1,3kg de carvão para cada 1kg de carne

    /* Exibe o resultado do carvão */
    document.getElementById('resultado-carvao').textContent = "Quantidade total de carvão necessária: " + totalCarvao + " kg";
    document.getElementById('detalhes-carvao').innerHTML = 
        "Total de carvão necessário: " + totalCarvao + " kg (Média: 1,3 kg de carvão para cada 1 kg de carne)";

    /* Cálculo de bebidas */
    var cervejaPorPessoa = 0, aguaPorPessoa = 0.4, sucoRefrigerantePorPessoa = 0.6;

    if (tipoFesta === 'jovens-8h') {
        cervejaPorPessoa = 2.5;
    } else if (tipoFesta === 'jovens-casais-4h') {
        cervejaPorPessoa = 1.5;
    } else if (tipoFesta === 'solteiros-casados-6h') {
        cervejaPorPessoa = 1.5;
    }

    var totalCerveja = (cervejaPorPessoa * (mulheres + homens)).toFixed(2);
    var totalAgua = (aguaPorPessoa * totalPessoas).toFixed(2);
    var totalSucoRefrigerante = (sucoRefrigerantePorPessoa * totalPessoas).toFixed(2);

    /* Exibe o resultado das bebidas */
    document.getElementById('resultado-bebidas').textContent = "Quantidade total de bebidas necessária:";
    document.getElementById('detalhes-bebidas').innerHTML = 
        "Cerveja: " + totalCerveja + " L<br>" +
        "Água: " + totalAgua + " L<br>" +
        "Suco/Refrigerante: " + totalSucoRefrigerante + " L";
}

/* Função para zerar os campos */
function resetCalculadora() {
    document.getElementById('mulheres').value = 0;
    document.getElementById('homens').value = 0;
    document.getElementById('criancas').value = 0;
    document.getElementById('tipo-festa').value = 'jovens-8h';
    document.getElementById('resultado-carne').textContent = '';
    document.getElementById('detalhes-carne').textContent = '';
    document.getElementById('resultado-carvao').textContent = '';
    document.getElementById('detalhes-carvao').textContent = '';
    document.getElementById('resultado-bebidas').textContent = '';
    document.getElementById('detalhes-bebidas').textContent = '';
}
</script>

Como Usei o ChatGPT para Melhorar Minha Produtividade

O que mais me impressionou nesse processo foi a velocidade e precisão com que o ChatGPT me ajudou a resolver problemas e a gerar código funcional. Cada vez que surgia uma dúvida ou precisava de ajustes, o ChatGPT fornecia a solução rapidamente.

Por exemplo, quando os botões não estavam com as cores corretas, o ChatGPT sugeriu o uso de !important no CSS para resolver o problema. Além disso, a lógica de cálculo do churrasco foi adaptada facilmente com base nas sugestões que eu fiz, tornando a experiência de desenvolvimento mais simples e direta.

Conclusão

Com a ajuda do ChatGPT, consegui criar uma calculadora de churrasco completa que cobre as principais necessidades de qualquer anfitrião. Essa ferramenta agora está disponível no meu site, ajudando meus visitantes a organizar seus churrascos de forma prática e eficiente.

Se você também está pensando em criar ferramentas interativas ou implementar funcionalidades personalizadas no seu site, o ChatGPT pode ser um grande aliado no desenvolvimento e na resolução de problemas de forma ágil.

Agora é sua vez! Que tal criar sua própria calculadora de churrasco ou outra funcionalidade personalizada com a ajuda do ChatGPT?