Perguntas[javascript](coding)

Estou exibindo os resultados em uma tabela HTML para respostas certas e erradas.

Cada pergunta tem um "Explain Link" como a última coluna da tabela. Se clicado, quero um novo DIV ou SPAN aberto adjacente a ele no lado direito (expanda conforme necessário). Ele mostrará a explicação detalhada para aquela pergunta em particular. Ele incluirá texto que pode ser formatado em HTML com tags h2, h3, p e também pode incluir imagens (tipo "<img src"). Clicar novamente na mesma pergunta ou em uma pergunta diferente "Explain Link" deve fechar aquele DIV ou SPAN aberto.

Foi isso que eu tentei:

Javascript:

<script>
    $(function () {
        $('#button-1').click(function(){
            $('#popup-1').animate({height:'500px'}, 500);
        });
    });
</script>

HTML:

<tr><td>Q.2<td>C<td>C<td>&#9989;<td><a href='#' id="button-1">Explain</a><span id='popup-1'>Explanation of answer<br>Goes<br>here<br>including images: <img src='img-explain-q2.jpg'></img></span>

CSS:

#popup-1{
    height: 0px;
    width: 100%;
    float: right;
    overflow: hidden;
    background: #efefef;
}

Alguma informação sobre o que está errado e como corrigi-lo?

Vou implementar uma mudança de tema semelhante para meu site como parte do meu estudo. Consegui implementar uma mudança suave de tema na forma de um círculo. Mas não entendo como fazer a mudança de tema na forma de uma faixa caótica, se você tiver as habilidades ou conhecimento, por favor me diga. Anexei um código compactado para um lançamento compacto da mudança que obtive.

    const container = document.querySelector(".cards");

    for (let i = 1; i <= 6; i++) {
        const card = document.createElement("div");
        card.className = "card";

        const title = document.createElement("h2");
        title.textContent = `Title${i}`;

        const paragraph = document.createElement("p");
        paragraph.textContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

        card.appendChild(title);
        card.appendChild(paragraph);
        container.appendChild(card);
    }

    document.addEventListener("DOMContentLoaded", () => {
        const btn = document.querySelector(".toggle-button");

        const isDarkMode = () => document.documentElement.getAttribute("data-theme") === "dark";
        const setDarkMode = (enabled) => {
            document.documentElement.setAttribute("data-theme", enabled ? "dark" : "light");
        };

        btn.addEventListener("click", async () => {
            if (!document.startViewTransition || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
                return setDarkMode(!isDarkMode());
            }

            await document.startViewTransition(() => {
                setDarkMode(!isDarkMode());
            }).ready;

            const {top, left, width, height} = btn.getBoundingClientRect();
            const right = window.innerWidth - left;
            const bottom = window.innerHeight - top;
            const maxRadius = Math.hypot(Math.max(left, right), Math.max(top, bottom));

            document.documentElement.animate(
                {
                    clipPath: [
                        `circle(0px at ${left + width / 2}px ${top + height / 2}px)`,
                        `circle(${maxRadius}px at ${left + width / 2}px ${top + height / 2}px)`,
                    ],
                },
                {
                    duration: 1500,
                    easing: "ease-in",
                    pseudoElement: "::view-transition-new(root)",
                }
            );
        });

        setDarkMode(isDarkMode());
    });

      :root {
          color-scheme: dark;
          --theme-text: white;
          --theme-bg: black;

          --bg-card: #29292d;
          --border-card: #3b3b41;
      }

      [data-theme="light"] {
          color-scheme: light;
          --theme-text: black;
          --theme-bg: white;

          --bg-card: #dedfe1;
          --border-card: #cacbcc;
      }

      ::view-transition-old(root),
      ::view-transition-new(root) {
          animation: none;
          mix-blend-mode: normal;
      }

      body {
          background: var(--theme-bg);
      }

      .header {
          display: flex;
          justify-content: end;
          margin-bottom: 10px;
      }

      .cards {
          display: grid;
          gap: 16px;
          grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .card {
          border: 1px solid var(--border-card);
          color: var(--theme-text);
          background: var(--bg-card);
          border-radius: 14px;
          padding: 6px 10px;
      }

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div class="header">
  <button class="toggle-button">Change theme</button>
</div>

<div class="cards"></div>

</body>
</html>

Existe alguma maneira de ter tipos para argumentos de retorno de chamada, em vez de any's?

type Listener = {
  callback: (...data: any[]) => void,
  once: boolean;
}

class EventEmitter{

  eventMap: Map<string, Listener[]> = new Map();


  on(event: string, callback: Listener["callback"], once: boolean = false) {
    const listeners = this.eventMap.get(event) ?? [];
    listeners.push({ callback, once });
    this.eventMap.set(event, listeners);
    return this;
  }

  once(event: string, callback: Listener['callback']): this {
    this.on(event, callback, true);
    return this;
  }

  emit(event: string, ...data: any[]) {
    const listeners = this.eventMap.get(event) ?? [];

    for (let i = 0; i < listeners.length; i++) {
      const { callback, once } = listeners[i];

      callback(...data);
      if (once) {
        listeners.splice(i, 1);
        this.eventMap.set(event, listeners);
      }
    }
  }
}

Emit tem que aceitar qualquer, porque é o ponto de entrada. Digamos que eu chamo isso de:

events.emit("x", 1, true); 
events.emit("y", "test"); 

Quero que os retornos de chamada sejam conectados xpara ver os tipos reais, como:

events.on("x", (arg1, arg2) => { // <= args should have types number and bool

e

events.on("y", (arg1) => { // <= args should have type string

Tenho duas entradas de alcance. A primeira nunca deve ser maior que a segunda, e a segunda nunca deve ser menor que a primeira.

O problema com meu script é que os controles deslizantes pulam ou se encaixam no mínimo ou máximo. Funciona perfeitamente se eu alterar o limite para um número fixo, mas não com o valor de entrada...

Aqui está um exemplo do que tentei:

function minRange(input) {
    let limit = document.getElementById('max').value;           
    if(input.value >= limit) {
        input.value = limit;
    };
};

function maxRange(input) {
    let limit = document.getElementById('min').value;   
    if(input.value <= limit) {
        input.value = limit;
    };
};

<div><input id="min" type="range" min="0" max="100" value="0" step="1" onInput="minRange(this)" /></div>
<div><input id="max" type="range" min="0" max="100" value="100" step="1" onInput="maxRange(this)" /></div>

Estou usando a API Fetch do JavaScript assim: fetch(URL)

Meu navegador (Chrome) parece adicionar automaticamente cabeçalhos If-None-Matche If-Modified-Sinceà solicitação. Embora esses cabeçalhos devam disparar solicitações de preflight de acordo com a especificação fetch (eu acho), nenhuma solicitação de preflight está sendo enviada. Isso é esperado quando o navegador adiciona automaticamente esses cabeçalhos em vez de eu adicioná-los à fetchfunção?

Notei que, quando adiciono If-None-Matchcabeçalhos If-Modified-Sincemanualmente à fetchfunção, o navegador envia uma solicitação de pré-voo:

fetch(cdnUrl, {
  "headers": {
    "If-None-Match": "blah"
  }
})

Tenho um site com modais que funcionam via React Portals e eles funcionam muito bem, alimentados por uma biblioteca popular. No entanto, em um lugar, devido a várias razões sensatas, temos um modal personalizado que não está dentro de um portal e não é alimentado pela biblioteca.

Para acessibilidade, tentei definir o próprio modal como role="modal" e aria-modal="true" para dar uma dica aos leitores de tela de que eles devem ignorar o plano de fundo. No entanto, o plano de fundo não é ignorado. Este site menciona que às vezes você precisa de aria-hidden no plano de fundo. Ao verificar como o React Portal e a biblioteca fazem isso, ele adiciona um atributo aria-hidden ao corpo. Então, pensei em tentar.

No entanto, quando eu crio um useEffect para fazer isso e chamo document.body.setAttribute('aria-hidden', 'true'), ele simplesmente me ignora. Eu sei que o código funciona, eu posso definir outros atributos, mas não este. Alguém de vocês sabe por que isso está acontecendo?

Edição: Para esclarecer o motivo pelo qual estou tentando fazer isso, esta é a árvore HTML do react-modal, a biblioteca que usamos e que mencionei acima, com 1,7 milhão de downloads semanais:

Eu adoraria entender por que eles estão fazendo isso, especialmente quando o modal é um filho do corpo que está sendo escondido. Como um dos comentários aponta, isso é contra as diretrizes do Aria, parece que não deveria funcionar, é estranho, mas realmente funciona.

Estou tentando criar um aplicativo de bate-papo e, ao pressionar um botão, você pode ver os registros de data e hora das mensagens.

Meu timestamp sempre ocupa 200px de tamanho e o outro ocupa o restante.

Vamos chamar div1 para o registro de data e hora (200px) e div2 para as mensagens (ocupa o resto do espaço).

Tentei usar o translate no primeiro div1 e movê-lo e rapidamente percebi que o div2 não seria redimensionado automaticamente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .chat-container {
            display: flex;
            height: 50vh;
            width: 50vw;
            background-color: #f0f0f0;
        }
        #div1 {
            background-color: #0004ff;
            height: 100%;
            width: 200px;
            text-align: center;
            
            position: relative;
            left:-200px;
            transition: left 1s;
        }
        #div2 {
            background-color: #ff0000;
            height: 100%;
            text-align: center;
            width: calc(100% - 200px); /* 100% - 200px or auto would work*/
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div id="div1">
            <p>div1</p>
        </div>
        <div id="div2">
            <p>div2</p>
        </div>
    </div>
    <button id="button">animation</button>
    <script>
        let actived = false;
        document.getElementById("button").addEventListener("click", function() {
            const div1 = document.getElementById("div1");
            const div2 = document.getElementById("div2");
            div1.style.left = actived ? "-200px" : "0px";
            actived = !actived;
        });
    </script>
</body>
</html>

Então tentei redimensionar o tamanho do div2, mas quando fiz isso, calc(100% - 200px)não ficou do mesmo tamanho!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .chat-container {
            display: flex;
            height: 50vh;
            width: 50vw;
            background-color: #f0f0f0;
            overflow: hidden;
        }
        #div1 {
            background-color: #0004ff;
            height: 100%;
            width: 200px;
            text-align: center;
            
            position: relative;
            left:-200px;
            transition: left 1s;
        }
        #div2 {
            background-color: #ff0000;
            height: 100%;
            text-align: center;
            width: calc(100% - 200px); /* 100% - 200px or auto would work*/

            position: relative;
            transition: width 1s;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div id="div1">
            <p>div1</p>
        </div>
        <div id="div2">
            <p>div2</p>
        </div>
    </div>
    <button id="button">animation</button>
    <script>
        let actived = false;
        document.getElementById("button").addEventListener("click", function() {
            const div1 = document.getElementById("div1");
            const div2 = document.getElementById("div2");
            div1.style.left = actived ? "-200px" : "0px";
            div2.style.width = actived ? "100%" : "calc(100% - 200px)";
            actived = !actived;
        });
    </script>
</body>
</html>

Como pode 100%o pai menos o tamanho do div1 não ser o resto? Estou tão confuso.

Por favor, diga-me qual método devo usar e por que 100% - 200pxnão funciona.

Tenho três arquivos:

App.svelte:

<script>
    import Component from "./Component.svelte"
    import { items } from "./store.js"
    
    $items.set("a", { name: "John", index: "a" })
    $items.set("b", { name: "Jack", index: "b" })
</script>

<h1>DIV each:</h1>
{#if $items && $items.size > 0}
    {#each $items.values() as item}
        <div>Name: {item.name}</div>
    {/each}
{/if}

<h1>Component each:</h1>
{#if $items && $items.size > 0}
    {#each $items.values() as item}
        <div><Component index={item.index} /></div>
    {/each}
{/if}

Component.svelte:

<script>
    import { items } from "./store.js"
    let { index = null } = $props()
    
    let data = $state($items.get(index))
</script>

<div><input bind:value={data.name} /></div>

store.js:

import { writable } from "svelte/store";
import { SvelteMap } from "svelte/reactivity";

export let items = writable(new SvelteMap([]))

Gostaria de saber como manter a reatividade no SvelteMap items. Quando o valor de entrada é alterado, ele deve ser atualizado no SvelteMap (pois está vinculado). Não sei como trabalhar com esse tipo de reatividade.

Parque infantil aqui .

Este é o AppContext.jsxconteúdo do arquivo:

import { createContext } from "react";

export const AppContext = createContext()

export const AppContextProvider = (props) => {

    const value = {

    }
    
    return (
        <AppContext.Provider value={value}>
            {props.childern}
        </AppContext.Provider>
    )
}

Este é o app.jsxconteúdo do arquivo:

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Home from './pages/student/Home'
import CoursesList from './pages/student/CoursesList'

function App() {

  return (
    <>
      <div>
      <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
    <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/course-list' element={<CoursesList />} />
      </Routes>
    
      </div>
      
    
    </>
  )
}

export default App

Este é o main.jsxarquivo:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { AppContextProvider } from './context/AppContext.jsx'
import { BrowserRouter } from 'react-router-dom'

createRoot(document.getElementById('root')).render(

 <BrowserRouter>
    <AppContextProvider>
      <App />
    </AppContextProvider>
  </BrowserRouter>,
  
)

Quando eu removo <AppContextProvider>o componente o conteúdo da página da web aparece novamente. O que está acontecendo? Não há erros no meu console

Tenho um script que cria uma tabela dinâmica, mas não quero exibir subtotais, apenas totais finais.

function main(workbook: ExcelScript.Workbook) {
    let sheet = workbook.getActiveWorksheet(); // Downloading the active sheet

    // Finding the range with the data (I assume it starts with A1)
    let dataRange = sheet.getRange("A1").getSurroundingRegion();

    // Checking that the scope is correct
    if (!dataRange) {
        console.log("No data found.");
        return;
    }

    // Creating a pivot table on the same sheet
    let pivotTable = sheet.addPivotTable("February", dataRange, sheet.getRange("H1"));
    
    let rowHierarchy = pivotTable.addRowHierarchy(pivotTable.getHierarchy("Posting date"));

    // Pivot table configuration
    pivotTable.addColumnHierarchy(pivotTable.getHierarchy("Project no."));
    pivotTable.addColumnHierarchy(pivotTable.getHierarchy("Name"));
    pivotTable.addColumnHierarchy(pivotTable.getHierarchy("Task No."));


    // Dodanie wartości (Ilość)
    let qtyHierarchy = pivotTable.getHierarchy("Time");
    let dataField = pivotTable.addDataHierarchy(qtyHierarchy);
    dataField.setSummarizeBy(ExcelScript.AggregationFunction.sum);
    // Hiding subtotals for "Project No." and "Name"

    // Alternate formatting (lines)
    let pivotRange = pivotTable.getLayout().getRange();
    let rowCount = pivotRange.getRowCount();

    for (let i = 1; i < rowCount; i += 2) { // Every second line
        let row = pivotRange.getCell(i, 0).getEntireRow();
        row.getFormat().getFill(); 
    }

    console.log("The pivot table has been created.");
}

Gostaria que o total geral não fosse exibido e gostaria que as linhas e colunas fossem exibidas.