https://webzoneware.com:443/web-academy/html/?busca=cores&ordem=desc#modulo-2
└─┬─┘  └──────┬──────┘ └─┬─┘ └──────┬───────┘ └──────────┬─────────┘ └───┬────┘
  │           │          │          │                    │               │
Esquema     Domínio    Porta     Caminho           Query String       Âncora
(Scheme)    (Host)     (Port)     (Path)            (Parâmetros)      (Hash)

// 1. encodeURI: Para a URL completa (preserva : / ? & =)
const urlCompleta = "https://webzoneware.com/busca?termo=programação web";
console.log(encodeURI(urlCompleta));
// Resultado: https://webzoneware.com/busca?termo=programa%C3%A7%C3%A3o%20web
 
// 2. encodeURIComponent: Para um único parâmetro (codifica inclusive & e =)
const busca = "HTML & CSS Completo";
const urlFinal = "https://webzoneware.com/busca?q=" + encodeURIComponent(busca);
console.log(urlFinal);
// Resultado: https://webzoneware.com/busca?q=HTML%20%26%20CSS%20Completo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Analisador de URLs Web Academy</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #0f172a;
            color: #f8fafc;
            padding: 30px;
        }
 
        .card-url {
            max-width: 760px;
            margin: 0 auto;
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 16px;
            padding: 28px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
 
        .campo-grupo {
            margin-bottom: 18px;
        }
 
        .campo-grupo label {
            display: block;
            font-size: 13px;
            font-weight: 700;
            color: #94a3b8;
            margin-bottom: 6px;
        }
 
        .campo-grupo input {
            width: 100%;
            padding: 10px 14px;
            background: #0b1120;
            border: 1px solid #334155;
            border-radius: 8px;
            color: #f8fafc;
            font-size: 14px;
            box-sizing: border-box;
        }
 
        .resultado-box {
            background: #0284c7;
            padding: 16px 20px;
            border-radius: 10px;
            margin-top: 24px;
            word-break: break-all;
        }
 
        .resultado-box strong {
            display: block;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #e0f2fe;
            margin-bottom: 4px;
        }
 
        .resultado-box code {
            font-size: 14px;
            font-family: Consolas, monospace;
            color: #ffffff;
        }
    </style>
</head>
<body>
 
    <div class="card-url">
        <h3 style="margin-top:0; color:#38bdf8;">Laboratório de URL Encoding</h3>
        <p style="color:#94a3b8; font-size:14px;">Digite termos com acentos, espaços e caracteres especiais para ver a URL codificada gerada instantaneamente:</p>
 
        <div class="campo-grupo">
            <label for="termo-busca">Termo de Pesquisa (com acentos e símbolos):</label>
            <input type="text" id="termo-busca" value="Desenvolvimento Web & Design Moderno">
        </div>
 
        <div class="campo-grupo">
            <label for="categoria">Categoria:</label>
            <input type="text" id="categoria" value="Tutoriais de Programação">
        </div>
 
        <div class="resultado-box">
            <strong>URL Canônica Codificada Resultante:</strong>
            <code id="url-resultado"></code>
        </div>
    </div>
 
    <script>
        const inputTermo = document.getElementById("termo-busca");
        const inputCategoria = document.getElementById("categoria");
        const displayResultado = document.getElementById("url-resultado");
 
        function atualizarUrl() {
            const base = "https://webzoneware.com/web-academy/busca/";
            const q = encodeURIComponent(inputTermo.value);
            const cat = encodeURIComponent(inputCategoria.value);
            displayResultado.textContent = `${base}?q=${q}&categoria=${cat}`;
        }
 
        inputTermo.addEventListener("input", atualizarUrl);
        inputCategoria.addEventListener("input", atualizarUrl);
 
        // Inicializa na carga da página
        atualizarUrl();
    </script>
</body>
</html>