Perguntas[javascript](coding)

O código a seguir respeita a documentação do MDN , mas resulta em um silenciamento abrupto em vez de um fadeout de 2 segundos:

const audioContext = new window.AudioContext();
let oscillator;
let gainNode;
document.getElementById("playSweep").addEventListener("click", () => {
    oscillator = audioContext.createOscillator();
    oscillator.type = "sine"; // Sine wave
    oscillator.frequency = 200;
    gainNode = audioContext.createGain();
    gainNode.gain.setValueAtTime(1, audioContext.currentTime);
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);
    oscillator.start();
});
document.getElementById("fadeOut").addEventListener("click", () => {
    gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 2);
});
document.getElementById("fadeOut2").addEventListener("click", () => {
    gainNode.gain.linearRampToValueAtTime(0.001, audioContext.currentTime + 2);
});

<button id="playSweep">Play Frequency Sweep</button>
<button id="fadeOut">Exp Fade Out</button>
<button id="fadeOut2">Lin Fade Out</button>

Mesmo com a versão linear, podemos ouvir um clique, não é um fadeout limpo.

Como fazer um fadeout adequado na JS Web Audio API?

Meu bot do Discord para de implantar comandos para a guilda específica. Ele funcionou com o mesmo código, no mesmo lugar, na mesma guilda, no mesmo terminal há 3 minutos, e travou na implantação agora. Tive esse problema hoje de manhã uma vez, e ele se consertou sozinho depois de muitas horas, meu Mac estava desabilitado. Alguém tem alguma ideia de qual é o problema?

Meu deploy.js:

const { REST, Routes } = require('discord.js');
const { GlobalModules } = require('../config/modules');
const Guild = require('../models/Guild');
require('dotenv').config();

let clientCommands = null;

function setClientCommands(commands) {
    clientCommands = commands;
}

async function clearCommands(guildId) {
    const rest = new REST().setToken(process.env.TOKEN);

    try {
        console.log(`Lösche Commands für Guild ${guildId}...`);

        // Prüfe globale Commands
        console.log('Prüfe globale Commands...');
        const globalCommands = await rest.get(
            Routes.applicationCommands(process.env.CLIENT_ID)
        );
        console.log(
            `Gefundene globale Commands: ${JSON.stringify(globalCommands, null, 2)}`
        );

        // Lösche globale Commands
        for (const command of globalCommands) {
            console.log(`Lösche globalen Command ${command.name} (${command.id})...`);
            await rest.delete(
                Routes.applicationCommand(process.env.CLIENT_ID, command.id)
            );
        }

        // Prüfe guild-spezifische Commands
        console.log('Prüfe guild-spezifische Commands...');
        const guildCommands = await rest.get(
            Routes.applicationGuildCommands(process.env.CLIENT_ID, guildId)
        );
        console.log(
            `Gefundene Guild Commands: ${JSON.stringify(guildCommands, null, 2)}`
        );

        // Lösche guild-spezifische Commands
        for (const command of guildCommands) {
            console.log(`Lösche Guild Command ${command.name} (${command.id})...`);
            await rest.delete(
                Routes.applicationGuildCommand(
                    process.env.CLIENT_ID,
                    guildId,
                    command.id
                )
            );
        }

        console.log('Erfolgreich alle Commands gelöscht.');
    } catch (error) {
        console.error('Fehler beim Löschen der Commands:', error);
        throw error;
    }
}

async function deployCommandsForGuild(guildId) {
    if (!clientCommands) {
        console.error('Client commands wurden nicht initialisiert');
        return;
    }

    const rest = new REST().setToken(process.env.TOKEN);
    let guild = await Guild.findOne({ guildId });

    // Wenn keine Konfiguration existiert, erstelle eine neue
    if (!guild) {
        try {
            // Hole Guild-Informationen von Discord
            const discordGuild = await rest.get(Routes.guild(guildId));
            console.log(
                `Erstelle neue Guild-Konfiguration für ${guildId} (${discordGuild.name})...`
            );

            guild = new Guild({
                guildId,
                name: discordGuild.name,
                enabledModules: [],
                availableModules: [],
            });
            await guild.save();
        } catch (error) {
            console.error(`Fehler beim Erstellen der Guild-Konfiguration: ${error}`);
            return;
        }
    }

    try {
        // Erst alle Commands löschen
        await clearCommands(guildId);

        // Sammle alle Commands die deployed werden sollen
        const commandsToRegister = [];

        for (const [name, command] of clientCommands) {
            // Wenn es ein globales Modul ist oder wenn das Modul aktiviert ist
            if (
                !command.module ||
                GlobalModules.includes(command.module) ||
                guild.enabledModules.includes(command.module)
            ) {
                commandsToRegister.push(command.data.toJSON());
            }
        }

        console.log(
            `Starte Deployment von ${commandsToRegister.length} Commands für Guild ${guildId}...`
        );

        // Registriere die neuen Commands
        await rest.put(
            Routes.applicationGuildCommands(process.env.CLIENT_ID, guildId),
            { body: commandsToRegister }
        );

        console.log(
            `Erfolgreich ${commandsToRegister.length} Commands für Guild ${guildId} deployed.`
        );
    } catch (error) {
        console.error('Fehler beim Deployen der Commands:', error);
    }
}

module.exports = {
    setClientCommands,
    deployCommandsForGuild,
    clearCommands,
};

E a saída:

✅ Erfolgreich mit MongoDB verbunden
🎉 Giveaway-System wird gestartet...
✅ Giveaway-System erfolgreich gestartet
Bereit! Eingeloggt als BayMax Dev#7945
Lösche Commands für Guild 1325228698642681928...
Prüfe globale Commands...
🕒 Reminder-System gestartet
Gefundene globale Commands: []
Prüfe guild-spezifische Commands...
Gefundene Guild Commands: []
Erfolgreich alle Commands gelöscht.
Lösche Commands für Guild 1325228698642681928...
Prüfe globale Commands...
Gefundene globale Commands: []
Prüfe guild-spezifische Commands...
Gefundene Guild Commands: []
Erfolgreich alle Commands gelöscht.
Starte Deployment von 2 Commands für Guild 1325228698642681928...

O açúcar sintático como async/await é convertido antes da compilação/interpretação? Atenção. Quero dizer a situação em que o mecanismo suporta a sintaxe do nosso código e não precisamos transpilá-lo. Considero o problema isoladamente da transpilação.

O neurônio fornece informações de que antes do processo de compilação/interpretação ocorre uma transformação que converte o açúcar sintático em estruturas mais simples.

Exemplo:

const testFunction = async () => {
  let testPromise = new Promise((resolve, reject) =>
    setTimeout(() => {
      resolve('testResolve');
    }, 1110)
  );

  let result = await testPromise;
  console.log('Проверка');
  console.log('result', result);
};

testFunction();

Ele será convertido em algo semelhante antes da compilação?

const testFunction = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('testResolve');
        }, 1110);
    })
    .then(result => {
        console.log('Проверка');
        console.log('result', result);
    })
};

Tentei usar o Google em muitas variantes de consultas, mas nenhuma informação sobre transformação de açúcar sintático

Estou trabalhando com um elemento SVG onde tenho um efeito de letreiro com texto curvo usando o <textpath>elemento. Atualmente, estou usando o emoji 🌟 como parte do texto de letreiro, mas gostaria de substituir esse emoji por uma imagem SVG personalizada e girar a imagem em torno de seu eixo.

O problema que estou encontrando é que quando substituo o emoji por uma imagem personalizada (por meio de uma <img>tag ou SVG inline), a imagem não aparece, e o texto simplesmente aparece. Além disso, quero aplicar uma classe personalizada a esta imagem para estilização (por exemplo, para girá-la). No entanto, sempre que tento adicionar a classe ao emoji, ela desaparece.

O que eu tentei:

Substituir o emoji por uma <img>tag inline que faça referência à imagem SVG personalizada ou a um elemento SVG inline.

Aplicando classes CSS personalizadas, como .rotate-imagegirar a imagem.

Resultado esperado:

A imagem SVG personalizada deve aparecer no caminho do letreiro em vez do emoji 🌟.

A imagem deve ser estilizada usando uma classe personalizada (por exemplo, .rotate-image) para rotação.

A imagem deve girar suavemente usando a animação CSS definida.

Emitir:

A imagem personalizada não aparece quando substituo o emoji. Só aparece o texto, não a imagem.

Se eu tentar inserir a imagem personalizada ou usar elementos HTML embutidos, a imagem desaparece, deixando apenas o texto para trás.

Alguém pode sugerir uma solução ou fornecer orientação sobre como substituir com sucesso o emoji por uma imagem SVG personalizada <textpath>e aplicar uma classe CSS personalizada para rotação e estilo?

Aqui está o código com o qual estou trabalhando atualmente:

function startMarquee(id, pathId, content, speed) {
  const textPath   = document.getElementById(id);
  const path       = document.getElementById(pathId);
  const pathLength = path.getTotalLength();

  textPath.innerHTML = content;

  let offset = 0;

  function animateText() {
    offset = (offset + speed) % pathLength;
    textPath.setAttribute('startOffset', `${offset}px`);
    requestAnimationFrame(animateText);
  }

  requestAnimationFrame(animateText);
}

document.addEventListener('DOMContentLoaded', () => {
  const textContent = "Web Design   🌟   Web Development   🌟   UI/UX Design   🌟   Front-end Development   🌟   HTML & CSS   🌟   JavaScript   🌟   Responsive Design   🌟   E-Commerce Solutions   🌟   SEO Optimization   🌟   Digital Marketing   🌟   Web Hosting   🌟   Content Management   🌟   Website Performance   🌟   Website Maintenance   🌟   Branding   🌟   User-Centered Design   🌟   Cross-Browser Compatibility   🌟   Website Security   🌟   Mobile Optimization   🌟   Conversion Rate Optimization   🌟   Site Speed Optimization";
  startMarquee('marquee-text-curved', 'text-path-curved', textContent, 2);
});

body {
  background-color: #0d0d0d;
  padding: 0;
  margin: 0;
}

.elementor-svg-marquee {
  width: 100% !important;
  height: 100vh !important;
  display: block;
  margin: 0 auto;
  padding: 0 !important;
  overflow: hidden;
}

.uppercase-text-curved {

  fill: #FFFFFF;
  font-size: 2rem !important;
}

text {
  font-size: 2rem !important;
}

/* Outer border for the stroke */
.curved-path-border {
  stroke-width: 6.1rem;
  /* Simulates the border */
  stroke: #2fb7d9;
  /* Border color */
  fill: none;
  filter: drop-shadow(0px 0px 5px #2fb7d9);
}

/* Actual stroke */
.curved-path {
  stroke-width: 6rem;
  /* Slightly smaller than the border */
  stroke: black;
  /* Stroke color */
  fill: none;
}

@media (max-width: 768px) {
  text {
    font-size: 4rem !important;
  }

  .curved-path-border {
    stroke-width: 8.1rem;
  }

  .curved-path {
    stroke-width: 8rem;
  }
}

@media (max-width: 480px) {
  text {
    font-size: 2rem !important;
  }

  .curved-path-border {
    stroke-width: 6.1rem;
  }

  .curved-path {
    stroke-width: 6rem;
  }
}

<div>
  <svg class="elementor-svg-marquee" viewbox="-50 0 1300 300" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <path 
          id="text-path-curved" 
          d="M -100 150 Q 200 -50, 400 150 Q 600 350, 800 150 Q 1000 -50, 1300 150" 
      />
    </defs>
    
    <!-- Simulated border --> 
    <path 
        class="curved-path-border" 
        d="M -100 150 Q 200 -50, 400 150 Q 600 350, 800 150 Q 1000 -50, 1300 150" 
    />
    <!-- Actual stroke -->
    <path 
        class="curved-path" 
        d="M -100 150 Q 200 -50, 400 150 Q 600 350, 800 150 Q 1000 -50, 1300 150" 
    />
    
    <!-- Scrolling text -->
    <text
        font-family="Rubik, sans-serif"
        class="uppercase-text-curved"
        text-anchor="middle"
        dominant-baseline="middle"
    >
      <textpath id="marquee-text-curved" href="#text-path-curved"></textpath>
    </text>
  </svg>
</div>

Estou construindo um jogo baseado em localização no Unity como uma construção WebGL. O arquivo estava sendo construído antes de eu adicionar minhas alterações de script, mas a entrada de localização não estava funcionando no site (hospedado no itch.io). Então adicionei um arquivo javascript e algumas alterações nos serviços de localização (o script de entrada de localização foi importado da API do Mapbox) usando chatgpt. Agora o arquivo em si não está sendo construído.

arquivo javascript:

var EXPORTED_FUNCTIONS = ['_requestWebGLLocation'];
mergeInto(LibraryManager.library, {
    requestWebGLLocation: function() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                function(position) {
                    unityInstance.SendMessage('LocationProviderFactory', 
                    'OnLocationReceived',
                        position.coords.latitude + ',' +  
                     position.coords.longitude);
                },
                function(error) {
                    console.error('Error obtaining location: ', error);
                }
            );
        } else {
            console.error('Geolocation is not supported by this browser.');
        }
    }
})

Código de entrada de localização:

#if !UNITY_EDITOR
#define NOT_UNITY_EDITOR
#endif

namespace Mapbox.Unity.Location
{
    using UnityEngine;
    using Mapbox.Unity.Map;
    using System.Text.RegularExpressions;
    using System.Runtime.InteropServices;


    /// <summary>
    /// Singleton factory to allow easy access to various LocationProviders.
    /// This is meant to be attached to a game object.
    /// </summary>
    public class LocationProviderFactory : MonoBehaviour
    {
        [SerializeField]
        public AbstractMap mapManager;

        [SerializeField]
        [Tooltip("Provider using Unity's builtin 'Input.Location' service")]
        AbstractLocationProvider _deviceLocationProviderUnity;

        [SerializeField]
        [Tooltip("Custom native Android location provider. If this is not set above 
        provider is used")]
        DeviceLocationProviderAndroidNative _deviceLocationProviderAndroid;

        [SerializeField]
        AbstractLocationProvider _editorLocationProvider;

        [SerializeField]
        AbstractLocationProvider _transformLocationProvider;

        [SerializeField]
        bool _dontDestroyOnLoad;

        [DllImport("__Internal")]
        private static extern void requestWebGLLocation();



        /// <summary>
        /// The singleton instance of this factory.
        /// </summary>
        private static LocationProviderFactory _instance;
        public static LocationProviderFactory Instance
        {
            get
            {
                return _instance;
            }

            private set
            {
                _instance = value;
            }
        }

        ILocationProvider _defaultLocationProvider;

        /// <summary>
        /// The default location provider. 
        /// Outside of the editor, this will be a <see 
        cref="T:Mapbox.Unity.Location.DeviceLocationProvider"/>.
        /// In the Unity editor, this will be an <see 
        cref="T:Mapbox.Unity.Location.EditorLocationProvider"/>
        /// </summary>
        /// <example>
        /// Fetch location to set a transform's position:
        /// <code>
        /// void Update()
        /// {
        ///     var locationProvider = 
        LocationProviderFactory.Instance.DefaultLocationProvider;
        ///     transform.position = 
        Conversions.GeoToWorldPosition(locationProvider.Location,
        ///                                                         
        MapController.ReferenceTileRect.Center,
        ///                                                         
        MapController.WorldScaleFactor).ToVector3xz();
        /// }
        /// </code>
        /// </example>
        public ILocationProvider DefaultLocationProvider
        {
            get
            {
                return _defaultLocationProvider;
            }
            set
            {
                _defaultLocationProvider = value;
            }
        }

        /// <summary>
        /// Returns the serialized <see 
        cref="T:Mapbox.Unity.Location.TransformLocationProvider"/>.
        /// </summary>
        public ILocationProvider TransformLocationProvider
        {
            get
            {
                return _transformLocationProvider;
            }
        }

        /// <summary>
        /// Returns the serialized <see 
        cref="T:Mapbox.Unity.Location.EditorLocationProvider"/>.
        /// </summary>
        public ILocationProvider EditorLocationProvider
        {
            get
            {
                return _editorLocationProvider;
            }
        }

        /// <summary>
        /// Returns the serialized <see 
        cref="T:Mapbox.Unity.Location.DeviceLocationProvider"/>
        /// </summary>
        public ILocationProvider DeviceLocationProvider
        {
            get
            {
                return _deviceLocationProviderUnity;
            }
        }

        /// <summary>
        /// Create singleton instance and inject the DefaultLocationProvider upon 
        Initialization of this component. 
        /// </summary>
        protected virtual void Awake()
        {
            if (Instance != null)
            {
                DestroyImmediate(gameObject);
                return;
            }
            Instance = this;

            if (_dontDestroyOnLoad)
            {
                DontDestroyOnLoad(gameObject);
            }

            InjectEditorLocationProvider();
            InjectDeviceLocationProvider();
        }

        /// <summary>
        /// Injects the editor location provider.
        /// Depending on the platform, this method and calls to it will be stripped 
        during compile.
        /// </summary>
        [System.Diagnostics.Conditional("UNITY_EDITOR")]
        void InjectEditorLocationProvider()
        {
            Debug.LogFormat("LocationProviderFactory: Injected EDITOR Location Provider 
        - {0}", _editorLocationProvider.GetType());
            DefaultLocationProvider = _editorLocationProvider;
        }

        /// <summary>
        /// Injects the device location provider.
        /// Depending on the platform, this method and calls to it will be stripped 
        during compile.
        /// </summary>
        [System.Diagnostics.Conditional("NOT_UNITY_EDITOR")]
        void InjectDeviceLocationProvider()
        {
            if (Application.platform == RuntimePlatform.WebGLPlayer)
            {
                Debug.Log("Using WebGL Geolocation.");
                requestWebGLLocation();
            }
            else
            {
                int AndroidApiVersion = 0;
                var regex = new Regex(@"(?<=API-)-?\d+");
                Match match = regex.Match(SystemInfo.operatingSystem);
                if (match.Success) { int.TryParse(match.Groups[0].Value, out 
                AndroidApiVersion); }
                Debug.LogFormat("{0} => API version: {1}", SystemInfo.operatingSystem, 
                AndroidApiVersion);

                if (Application.platform == RuntimePlatform.Android && 
                AndroidApiVersion >= 24)
                {
                    DefaultLocationProvider = _deviceLocationProviderAndroid;
                }
                else
                {
                    DefaultLocationProvider = _deviceLocationProviderUnity;
                }
            }
        }

        public void OnLocationReceived(string locationData)
        {
            string[] coordinates = locationData.Split(',');
            if (coordinates.Length == 2)
            {
                float latitude = float.Parse(coordinates[0]);
                float longitude = float.Parse(coordinates[1]);
                Debug.Log($"WebGL Location Received: Latitude: {latitude}, Longitude: 
                {longitude}");
                // You can further process this location data as required
            }
        }

    }
}

Erros de compilação:

1. Library\Bee\artifacts\WebGL\build\debug_WebGL_wasm\build.js: símbolo indefinido: requestWebGLLocation (referenciado pelo código C/C++ compilado de nível superior) UnityEngine.GUIUtility:ProcessEvent (int,intptr,bool&)

2. Library\Bee\artifacts\WebGL\build\debug_WebGL_wasm\build.js: Abortando a compilação devido a erros anteriores UnityEngine.GUIUtility:ProcessEvent (int,intptr,bool&)

3. Falha na criação de Library\Bee\artifacts\WebGL\build\debug_WebGL_wasm\build.js com saída: erro: símbolo indefinido: requestWebGLLocation (referenciado pelo código C/C++ compilado de nível superior) aviso: Link -s LLD_REPORT_UNDEFINEDpara obter mais informações sobre símbolos indefinidos aviso: Para desabilitar erros para símbolos indefinidos, use -s ERROR_ON_UNDEFINED_SYMBOLS=0 aviso: _requestWebGLLocation pode precisar ser adicionado a EXPORTED_FUNCTIONS se chegar de uma biblioteca do sistema Erro: Abortando a compilação devido a erros anteriores emcc: erro: '"C:/Program Files/Unity/Hub/Editor/2022.3.46f1/Editor/Data/PlaybackEngines/WebGLSupport/BuildTools/Emscripten/node/node.exe" "C:\Program Arquivos\Unity\Hub\Editor\2022.3.46f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emscripten\src\compiler.js" C:\Users\Nifty\AppData\Local\Temp\tmpmbvsgucj.json' falhou (retornou 1) UnityEngine.GUIUtility:ProcessEvent (int,intptr,bool&)

Tentei implementar um botão delete na minha calculadora que apaga o último dígito que o usuário digitou. Quando testei o botão, ele apenas adicionou undefinedao final da equação.

Este é meu código:

deleteButton.addEventListener("click", () => {
    if (calcString.length > 0) {
        calcString = calcString.slice(0, -1);
        resultText.textContent = calcString || "0";
        display.textContent = calcString.slice(-1) || "0";
    } else {
        calcString = "";
        resultText.textContent = "0";
        display.textContent = "0";
    }
});

Meu código completo:

const display = document.getElementById("display");
const buttons = document.querySelectorAll(".btn");
const copyButton = document.getElementById("copy");
const resultText = document.getElementById("result");

const rootModal = document.getElementById("rootModal");
const closeModal = document.getElementById("closeModal");
const rootInput = document.getElementById("rootInput");
const submitRoot = document.getElementById("submitRoot");

const deleteButton = document.getElementById("delete");

let calcString = "";
let result = null;
let rootDegree = null;

buttons.forEach((button) => {
    button.addEventListener("click", () => {
        const value = button.dataset.value;

        if (button.classList.contains("clear")) {
            calcString = "";
            rootDegree = null;
            display.textContent = "0";
            resultText.textContent = "0";
            result = null;
        } else if (button.classList.contains("equals")) {
            try {
                if (rootDegree !== null) {
                    const base = parseFloat(calcString.replace('√', ''));
                    result = Math.pow(base, 1 / rootDegree); 
                } else {
                    result = eval(calcString.replace(/\^/g, "**")); 
                }

                display.textContent = result;
                resultText.textContent = `${calcString} =`;
                calcString = result.toString();
                rootDegree = null; 
            } catch (error) {
                display.textContent = "Error";
                resultText.textContent = "Invalid Input";
                calcString = "";
                result = null;
            }
        } else if (button.dataset.value === "nth-root") {
            rootModal.style.display = "block";
        } else {
            calcString += value;
            resultText.textContent = calcString;
            display.textContent = value; 
        }
    });
});

deleteButton.addEventListener("click", () => {
    if (calcString.length > 0) {
        calcString = calcString.slice(-1);
        resultText.textContent = calcString || "0";
        display.textContent = calcString.slice(-1) || "0";
    } else {
        calcString = "";
        resultText.textContent = "0";
        display.textContent = "0";
    }
});

closeModal.addEventListener("click", () => {
    rootModal.style.display = "none";
});

submitRoot.addEventListener("click", () => {
    const enteredValue = parseFloat(rootInput.value);
    if (isNaN(enteredValue) || enteredValue <= 0) {
        alert("Please enter a valid root degree!");
    } else {
        rootDegree = enteredValue;
        rootModal.style.display = "none";
        rootInput.value = ""; 
        calcString = `√${calcString}`;
        resultText.textContent = calcString;
    }
});

window.addEventListener("click", (event) => {
    if (event.target === rootModal) {
        rootModal.style.display = "none";
    }
});

copyButton.addEventListener("click", () => {
    if (result !== null && result !== "Error") {
        navigator.clipboard.writeText(result)
            .then(() => {
                alert("Result copied to clipboard!");
            })
            .catch((err) => {
                console.error("Error copying to clipboard: ", err);
            });
    } else {
        alert("Nothing to copy!");
    }
});

body {
    font-family: Montserrat, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #7C8483;
}

.container {
    text-align: center;
}

.header {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 15px;
}

.calculator {
    width: 300px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 3);
    overflow: hidden;
}

.calculation {
    font-size: 1.2rem;
    padding: 10px;
    text-align: right;
    color: #666;
    background-color: #f4f4f4;
    border-bottom: 1px solid #e0e0e0;
    font-style: italic;
}
.calculation text {
    display: inline-block;
}

.display {
    font-size: 2rem;
    padding: 15px;
    text-align: right;
    background-color: #28262C;
    color: #F1FFFA;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.btn {
    padding: 20px;
    font-size: 1.2rem;
    border: 0.1px solid #222;
    background-color: #28262C;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    color: #F1FFFA;
}

.btn:hover {
    background-color: #28263c;
}

.operator {
    border: 0.1px solid #345;
    background-color: #364156;
    color: #F1FFFA;
}

.operator:hover {
    background-color: #364166;
}

.clear {
    background-color: #364156;
    color: #F1FFFA;
}

.clear:hover {
    background-color: firebrick;
}

.equals {
    grid-column: span 2;
    background-color: #28262C;
    color: #F1FFFA;
}

.equals:hover {
    background-color: #28263C;
}

.copy-result {
    margin-top: 10px;
}

.copy {
    text-decoration: none;
    background-color: #f4f4f4;
    border: none;
    opacity: 50;
    transition: 0.5s ease-in-out;
    border-radius: 10px;
    height: 30px;
    width: 30px;
    float: left;
}

.copy:hover {
    cursor: pointer;
    background-color: gainsboro;

}
/* modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 8px;
    width: 300px;
    text-align: center;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
}

.close:hover {
    color: black;
}

#rootInput {
    width: 90%;
    padding: 10px;
    margin-bottom: 10px;
}

#submitRoot {
    padding: 10px 20px;
    background-image: linear-gradient(to bottom right, #4CAF50, #4CEF50);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.filler:hover {
    cursor: default;
    color:white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css">
    <script src="main.js"></script>
</head>
<body>
<div id="rootModal" class="modal">
    <div class="modal-content">
        <span id="closeModal" class="close">&times;</span>
        <h3>Enter the Root Degree</h3>
        <input type="number" id="rootInput" placeholder="Enter root degree">
        <button id="submitRoot">Submit</button>
    </div>
</div>
<div class="calculator">
    <div class="calculation" id="calculation">
        <h1 class="calculation text" id="result">0</h1>
        <button class="copy" id="copy"><i class="fa-regular fa-copy fa-xl"></i></button>
    </div>
    <div class="display" id="display">0</div>
    <div class="buttons">
        <button class="btn" data-value="7">7</button>
        <button class="btn" data-value="8">8</button>
        <button class="btn" data-value="9">9</button>
        <button class="btn operator" data-value="/">÷</button>

        <button class="btn" data-value="4">4</button>
        <button class="btn" data-value="5">5</button>
        <button class="btn" data-value="6">6</button>
        <button class="btn operator" data-value="*">×</button>

        <button class="btn" data-value="1">1</button>
        <button class="btn" data-value="2">2</button>
        <button class="btn" data-value="3">3</button>
        <button class="btn operator" data-value="-">−</button>

        <button class="btn" data-value="0">0</button>
        <button class="btn" data-value=".">.</button>
        <button class="btn clear" id="clear">AC</button>
        <button class="btn operator" data-value="+">+</button>

        <button class="btn equals" id="equals">=</button>
        <button class="btn operator" data-value="^">^</button>
        <button class="btn operator" data-value="nth-root">√</button>
        <button class="btn delete operator" id="delete">DEL</button>
        <button class="filler"></button>
        <button class="btn operator" data-value="(">(</button>
        <button class="btn operator" data-value=")">)</button>
    </div>
</div>
</body>
</html>

Isto é o que ele produz:

Pensei que poderia estar cortando, calcStringentão tentei:

calcString = calcString.slice(-1);

No entanto, isso apenas produziu d:

Como posso consertar isso?

Achei esse código na net:

const keys=Object.keys(localStorage).filter(key=>key.includes('doinclude'));
const todos=keys.map(key=>JSON.parse(localStorage.getItem(key)));

O 'todo' resultante é um objeto que contém os valores do localstorage.

O que mudar no código acima para incluir o nome e o valor de cada entrada localStorage?

Existe uma maneira no método array.map() de acessar/iterar as chaves para cada par chave/valor em cada índice?

Observe que estou ciente do parâmetro Index, que, no entanto, retorna apenas o índice/chave da linha inteira, não das respectivas chaves dos pares nas linhas.

No NodeJS Express recebo os seguintes dados em req.body de uma solicitação POST:

[
   { ptiid: '2', ptiname: 'PTI26-Profile-1', order: '1', size: 25 },
   { ptiid: '5', ptiname: 'PTI29-Profile-1', order: '2', size: 25 },
   { ptiid: '3', ptiname: 'PTI27-Profile-1', order: '3', size: 25 },
   { ptiid: '4', ptiname: 'PTI28-Profile-1', order: '4', size: 25 }
]

O objetivo é descobrir se eu poderia usar .map() para encurtar meus arquivos de rota em geral. Até este ponto, tenho usado loops FOR OF (para solicitações de várias linhas por causa de await) e declarações manuais de variáveis, a fim de preparar a Consulta MYSQL:

let ptiId = req.body.ptiid
let ptiName = req.body.ptiname
// and so on...

O visual limpo e conciso de .map() me agrada aqui. Gostaria de preparar minhas MYSQL-Query-Variables adequadamente e gostaria de saber se consigo acessar as chaves:

let elements = req.body //possibly just chaining .map() to req.body directly later

let sqlVars = elements.map(element => {
   console.log(`The value ${element.ptiid} is easy to get if I know the key`)
   console.log(`If only I could get a key like ${element.key}, then I could call all values by their keys`)    
})

Por favor, me avise se isso não for possível - então eu simplesmente abandono a ideia. Se o código sugerido for muito longo, eu provavelmente não o usaria - mas ainda seria bom aprender.

Estou fazendo um projeto em React que preciso preencher um formulário e então enviar o que foi respondido para meu BD, para fazer isso eu queria usar o hook useDebounce para enviar o envio depois que o usuário parasse a interação. Mas quando eu tentei fazer isso, resultou em um loop infinito e eu não sei como implementar isso.

Esta é minha revisão de código:

Primeiro, tenho meu gancho que contém todas as operações dessa entidade usando GraphQL:

// useRecommendation.js
  ...
// other operations

export const useUpdate = () => {
  const [updateCriteria, { loading, error }] = useMutation(UPDATE_CRITERIA);
  const update = { handle: updateCriteria, loading, error };

  return update;
};

Então importo todas as operações para um objeto como um modelo:

// Recommendation.js
const Recommendation = {
  all: useGetAll,
  byCategory: useGetByCategory,
  create: useCreate,
  update: useUpdate
}

export default Recommendation

E então estou importando esta entidade no meu manipulador de componentes:

export const useRecommendationFormHandler = ({ form }) => {
  const updateRecommendation = Criteria.update();

  const submitRecommendation = async () => {
    try {
      const { data } = await updateRecommendation.handle({
        variables: {
          input: {
            conformity: form.conformity,
            importance: form.importance,
            comment: form.comment,
            conclusion: form.conformity === 0 && form.importance !== null,
          },
          criteria_id: form.id
        }
      });

      return data;
    } catch (error) {
      console.error("Erro ao atualizar a criteria", error);
    }
  };

  return {
    isLoading: updateRecommendation.loading
  }
};

Acho importante dizer que o componente que estou tentando usar, o useDebounce, está sendo renderizado dentro de um loop:

      <Grid sx={{ paddingX: 3 }}>
        {forms.length !== 0 && criterias.data.map((data, i) => (
            <RecommendationForm 
              key={data.id} 
              recommendation={data.recommendation.description}
              form={forms.find(f => f.id === data.id)}
              onChange={handleChange}
              index={i}
              onRefetch={onRefetch} 
            />
          ))
        }
      </Grid>

O que posso fazer para enviar as respostas para meu banco de dados usando esse hook?

Editar: Eu estava usando o useDebounce assim:

  const debouncedForm = useDebounce(form, 1000);
  const updateRecommendation = Criteria.update();

  const submitRecommendation = useCallback(async () => {
    try {
      const { data } = await updateRecommendation.handle({
        variables: {
          input: {
            conformity: debouncedForm.conformity,
            importance: debouncedForm.importance,
            comment: debouncedForm.comment,
            conclusion: debouncedForm.conformity === 0 && debouncedForm.importance !== null,
          },
          criteria_id: debouncedForm.id
        }
      });

      return data;
    } catch (error) {
      console.error("Erro ao atualizar a criteria", error);
    }
  }, [debouncedForm, updateRecommendation]);

  useEffect(() => {
    if (debouncedForm) {
      submitRecommendation()
    }
  }, [debouncedForm, submitRecommendation])

Tenho um aplicativo ReactJS com Redux e alguns createSelector, mas gostaria de alterar alguns deles.

Aqui estão alguns exemplos dos seletores atuais:

export const getAppData = createSelector(
  (state: RootState): AppDataState => state[`appData-${getUniquishModuleId()}`],
  (appData: AppDataState): AppDataState => appData,
);

export const getNextPageToRender = createSelector(
  [
    (state: RootState): PageSlug[] =>
      state[`appData-${getUniquishModuleId()}`].pagesToRender,
    (_: RootState, currentPageSlug: PageSlug): PageSlug => currentPageSlug,
  ],
  (pagesToRender: PageSlug[], currentPageSlug: PageSlug): PageSlug => {
    const currentPageIndex: number = pagesToRender.findIndex(
      (page: PageSlug) => page === currentPageSlug
    );
    return pagesToRender[currentPageIndex + 1];
  },
);

Agora o que eu gostaria de fazer é getNextPageToRenderusar também o getAppDataseletor.

Eu tentei:

export const getNextPageToRender = createSelector(
  getAppData,
  [
    (appData: AppDataState): PageSlug[] =>
      getContextRelatedAppData(appData).pagesToRender,
    (_: AppDataState, currentPageSlug: PageSlug): PageSlug => currentPageSlug,
  ],
  (pagesToRender: PageSlug[], currentPageSlug: PageSlug): PageSlug => {
    const currentPageIndex: number = pagesToRender.findIndex(
      (page: PageSlug) => page === currentPageSlug
    );
    return pagesToRender[currentPageIndex + 1];
  },
);

E eu também tentei:

export const getNextPageToRender = createSelector(
  [
    getAppData,
    (appData: AppDataState): PageSlug[] =>
      getContextRelatedAppData(appData).pagesToRender,
    (_: AppDataState, currentPageSlug: PageSlug): PageSlug => currentPageSlug,
  ],
  (pagesToRender: PageSlug[], currentPageSlug: PageSlug): PageSlug => {
    const currentPageIndex: number = pagesToRender.findIndex(
      (page: PageSlug) => page === currentPageSlug
    );
    return pagesToRender[currentPageIndex + 1];
  },
);

Mas essa sintaxe parece não funcionar.

Alguém pode ajudar? O que estou fazendo errado?