Calculadora de Frete

<!DOCTYPE html>
<html>
<head>
<title>Calculadora de Estimativa de Entrega</title>
<style>
    #estimator-container {
        margin-top: 10px;
        padding: 15px;
        border: 1px solid #dadada; /* Corrigido: adicionado 'solid' */
        border-radius: 5px;
        background-color: #dadada;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-direction: row;
        font-family: Arial, sans-serif; /* Adicionado para melhor visualização */
    }
    @media screen and (max-width: 600px) {
        #estimator-container {
            flex-direction: column;
        }
    }
    .cep-input {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 3px;
        background-color: #fff;
        width: 45%;
    }
    @media screen and (max-width: 600px) {
        .cep-input {
            width: 100%;
        }
    }
    .calcular-button {
        background-color: #00A341;
        color: #fff;
        border: 1px solid #00A341;
        padding: 8px 15px;
        border-radius: 3px;
        cursor: pointer;
        width: 45%;
        text-align: center;
        display: inline-block;
        transition: background-color 0.3s, transform 0.2s;
    }
    @media screen and (max-width: 600px) {
        .calcular-button {
            width: 100%;
        }
    }
    .calcular-button:hover {
        background-color: #007f2d;
        transform: scale(1.05);
    }
    .estimativa-result {
        margin-top: 10px;
        font-weight: bold;
        color: #333;
    }
    /* Estilo para o container do resultado */
    #result-container {
        margin-top: 10px;
        padding: 15px;
        border: 1px solid #dadada; /* Corrigido: adicionado 'solid' */
        border-radius: 5px;
        background-color: #f9f9f9;
        display: none; /* Oculta até que o cálculo seja feito */
    }
</style>
</head>
<body>

<div id="estimator-container">
    <label for="cep">CEP:</label>
    <input type="text" id="cep" placeholder="12345-678" class="cep-input">
    <button onclick="calcularEstimativa()" class="calcular-button">Calcular Entrega</button>
</div>

<div id="result-container">
    <p id="result" class="estimativa-result"></p>
</div>

<script>
    function calcularEstimativa() {
        // Aspas corrigidas de ‘ ’ para ' '
        var cep = document.getElementById('cep').value;

        // Validação simples para ver se digitou algo
        if(cep === "") {
            alert("Por favor, digite um CEP.");
            return;
        }

        // Lógica de estimativa
        var prazoMinimo = 7; 
        var prazoMaximo = 12;

        var dataEntregaMinima = new Date();
        var dataEntregaMaxima = new Date();

        // Adiciona os dias
        dataEntregaMinima.setDate(dataEntregaMinima.getDate() + prazoMinimo);
        dataEntregaMaxima.setDate(dataEntregaMaxima.getDate() + prazoMaximo);

        // Aspas corrigidas na string
        var resultado = "Entrega estimada entre " + formatDate(dataEntregaMinima) + " e " + formatDate(dataEntregaMaxima) + ".";
        
        var resultContainer = document.getElementById('result-container');
        var resultText = document.getElementById('result');
        
        resultText.innerText = resultado;
        resultContainer.style.display = 'block'; // Mostra o container
    }

    function formatDate(date) {
        // Aspas corrigidas no objeto options
        var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        // Aspas corrigidas no locale
        return date.toLocaleDateString('pt-BR', options);
    }
</script>

</body>
</html>
Calculadora de Frete

Entre na lista
