Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Mapa Nota - Html.

    Cargado por

    Eduardo Henrique
    4 vistas3 páginas

    Título original

    Mapa Nota.html.

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    TXT, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como TXT, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    4 vistas3 páginas

    Mapa Nota - Html.

    Cargado por

    Eduardo Henrique

    Copyright:

    © All Rights Reserved
    Descargue como TXT, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 3

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>Mapeamento de Notas</title>
    <style>
    body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    }

    h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    }

    form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    }

    .nota-musical {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: auto;
    opacity: 0.2;
    }

    label {
    display: block;
    margin-bottom: 5px;
    }

    input[type="text"] {
    width: 95%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    }

    button {
    display: block;
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    margin-top: 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s;
    }

    button:hover {
    background-color: #45a049;
    }

    #resultado {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    #notasEncontradas {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    #notasEncontradas p {
    margin: 0;
    font-weight: bold;
    }

    #notasEncontradas span {
    font-size: 1.2em;
    color: #4CAF50;
    }
    </style>
    </head>
    <body>
    <h1>Mapeamento de Notas</h1>
    <form onsubmit="mapearNotas(event)">
    <label for="notas">Digite as notas musicais (separadas por espaço ou / para
    notas separadas):</label><br>
    <input type="text" id="notas" name="notas" required><br>
    <button type="submit">Mapear Notas</button>
    </form>
    <div id="resultado"></div>
    <div id="notasEncontradas"></div>

    <script>
    const mapeamentoNotas = {
    "do": "la",
    "do#": "la#",
    "re": "si",
    "mib": "do",
    "mi": "do#",
    "fa": "re",
    "fa#": "re#",
    "sol": "mi",
    "sol#": "fa",
    "la": "fa#",
    "la#": "sol",
    "si": "sol#",
    };

    function mapearNota(nota) {
    const notaLowerCase = nota.toLowerCase();
    return mapeamentoNotas[notaLowerCase] || "Nota não encontrada.";
    }

    function mapearNotas(event) {
    event.preventDefault();
    const notasInput = document.getElementById("notas").value;
    const notasSeparadas = notasInput.split("/");
    const resultadoDiv = document.getElementById("resultado");
    const notasEncontradasDiv = document.getElementById("notasEncontradas");

    let resposta = "Notas Correspondentes:<br>";

    notasEncontradasDiv.innerHTML = ""; // Limpa o conteúdo anterior

    for (const notas of notasSeparadas) {


    const notasArray = notas.trim().split(" ");
    let notasEncontradas = "";
    for (const nota of notasArray) {
    const notaMapeada = mapearNota(nota);
    resposta += `${nota} -> ${notaMapeada}<br>`;
    notasEncontradas += notaMapeada + " ";
    }
    resposta += "<br>";
    notasEncontradasDiv.innerHTML += "<p>Notas encontradas:</p><span>" +
    notasEncontradas + "</span><br>";
    }

    resultadoDiv.innerHTML = resposta;
    }
    </script>
    </body>
    </html>

    También podría gustarte