Sougata Mukherjee's questions

Aqui eu criei um programa para compactação de strings, então para input chars = ["a","a","b","b","c","c","c"] estamos obtendo uma saída como 6 caracteres ["a","2","b","2","c","3"]. Então criei um programa usando a abordagem de array, que também é muito demorada e complexa. Existe alguma solução usando a abordagem de dois ponteiros ou recursão para resolver esse programa com muito pouco código e eficiência? Você pode fornecer isso com um código muito curto? O código é fornecido abaixo.

var compress = function(chars) {
 if (!chars.length) {
    return 0;
  }
   let j = 0;                 
  let cur = chars[0];        
  let counter = 0;         
   for (let i = 0; i <= chars.length; i++) {
  
    if (chars[i] === cur) {
      counter++;              
    } else {
      // Otherwise, add the current character and count to the compressed array
      chars[j] = cur;        
      if (counter > 1) {
        const s = counter.toString();
        for (let k = 0; k < s.length; k++) {
          chars[++j] = s[k];  
        }
      }
      j++;                  
      cur = chars[i];      
      counter = 1;           
    }
   }
   return j
};
console.log(compress ('aaaabbc'))//a4b2c

Aqui eu escrevi um programa que encontrará todos os arrays de subconjuntos, como se o array fosse [1, 2, 3], e quero uma saída como[[], 2],, 2, , [2, 1], 3, , [3, 1], [3, 2], [3

Eu escrevi um programa que representa a representação lógica binária. A saída não está vindo como esperado.

Você pode retificar e modificar esse programa?

const getAllSubsets = arr => {
    let n = arr.length
    let add = []
    for (let i = 0; i < (1 << n); i++) {
        for (let j = 0; j < n; j++) {
            if ((1 << j) & i) {
                add.push([arr[j]])
            }
        }
    }

    return add
}
      
console.log(getAllSubsets([1,2,3]))

Aqui, escrevi um programa que percorre e inverte a última parte dos elementos do array, como se o array fosse [5, 17, 11, 10, 12, 6], e quero uma saída como [5, 17, 11, 6, 12, 10], então escrevi um programa, mas a saída não está saindo conforme o esperado. Você pode verificar e modificar isso para que eu obtenha o resultado desejado?

let a = [5, 17, 11, 10, 12, 6];
let n = a.length;
for (let i = 0, j = (n / 2) - 1; i < n / 4; i++, j--) {
  let temp = a[n / 2 + i];
  a[n / 2 + i] = a[j];
  a[j] = temp;

}

for (i = 0; i < n; i++) {
  console.log(a[i])
}

Eu queria reverter uma frase usando Stack em JavaScript, então aqui se eu der uma entrada, Ei, como você está? e quer fazer a saída? Você está, ei, então eu percorro o loop e verifico até que o espaço seja encontrado, em seguida, empurro essa palavra e, em seguida, retiro todas as palavras da pilha, mas não está mostrando o indefinido, então como você pode corrigir esse código?

function reverseSentence(S){
    let stack = [];
    let word="";
    for(let i=0;i<S.length;i++){
        while(S[i]!=' '&&i<S.length){ 
            word+=S[i]
            i++
        }
       return stack.push(word)
    }
    while(!stack.length){
       return stack.pop()
    }
}
console.log(reverseSentence("Hey, how are you doing?"))

Aqui eu criei uma re-renderização do botão de alternância nos componentes pai e um botão de adição nos componentes filhos, e o requisito do contador é que a re-renderização do botão de alternância seja um botão de alternância que ocultará e mostrará os componentes, mas se houver, o último contador é adicionado, por exemplo, de 0 a 2, depois de ocultar e mostrar deve permanecer o mesmo, tipo 2 e não 0, mas o problema é que não estou conseguindo ocultar os componentes filhos, então como faço para ocultar e mostrar o componentes filhos e manter o estado filho? Basicamente, ao renderizar o pai, quero continuar mantendo o valor do estado filho. código pai é

import React, { useRef, useState, useMemo } from 'react';
import DropDown from './DropDown';

function App() {
  const shouldRenderChild = useRef(true);
  const [hide, setHide] = useState(false);

  const toggleChildRendering = () => {
    shouldRenderChild.current = !shouldRenderChild.current;
    setHide(!hide);
  };

  const MemoizedDropDown = useMemo(() => {
    return shouldRenderChild.current ? <DropDown /> : null;
  }, []);

  return (
    <div>
      <button onClick={toggleChildRendering}>
        Toggle Child Rendering
      </button>
      {MemoizedDropDown}
    </div>
  );
}

export default App;

código filho é

import React, { useState } from "react";
export default function DropDown() {
  const [number, setNumber] = useState(0);
  return (
    <>
      <button onClick={() => setNumber(number + 1)}>+</button>
      <div>Child Component{number}</div>
    </>
  );
}

Aqui, quero criar um botão deslizante de alternância. Eu o criei, mas quando clico nele, "seu plano de fundo será azul e, quando eu clicar", seu plano de fundo será azul, mas aqui o texto está ficando oculto e desativado e é mostrado. Eu quero como nesta foto:

Toda vez que alterno apenas a cor de fundo para azul, quero mostrar os botões liga e desliga em sequência, como nesta imagem:

Então, quando clico para alternar a cor de fundo, de uma cor para outra com alguma transição, como fazer isso usando o código é fornecido abaixo.

import React, { useState } from 'react';
import './styles.css'; 

const App = () => {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };

  return (<>
    <div className="toggle-container">
      <button
        className={`toggle-button ${isOn ? 'on' : 'off'}`}
        onClick={toggleSwitch}
        style={{color:isOn?'blue':'white',textAlign:isOn?'left':'right'}}
      >
        {isOn ? 'On' : 'Off'}
      </button>
    </div>
    
    </>
  );
};

export default App;

e o css está abaixo

.toggle-button {
  border:2px solid blue;
  outline: none;
  cursor: pointer;
  width: 100px;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: bold;
  font-size: 16px;
  transition: background-color 0.3s;
  position: relative;
  overflow: hidden;
}

.toggle-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: blue;
  transition: left 0.3s, background-color 0.3s;
}

.toggle-button.on:before {
  left: 50%;
  background-color: white;
}

.toggle-button.off {
  background-color: blue;
}

.toggle-button.on {
  background-color: white;
}

.toggle-button.on.off:before {
  background-color: blue;
}

.toggle-button.off.on:before {
  background-color: white;
}

Eu criei uma guia e em cada guia ela contém cada componente. O tamanho da guia parece uma forma retangular, mas quero obter uma guia como esta neste formato, como uma forma de seta. Aqui, adicionei cada link de guia com um componente, mas não consigo fazer uma seta projeto. então, como fazer esta forma como guia usando o trecho de código css é fornecido abaixo

import React, { useState } from 'react';
import './styles.css';
const TabContent = ({ children }) => {
  return (
    <div style={{ width: '100vw', height: '100vh', backgroundColor: 'gray' }}>
      {children}
    </div>
  );
};

const Tab = ({ label, active, onClick }) => {
  const tabClass = active ? 'tab active' : 'tab';

  return (
    <div className={tabClass} onClick={onClick}>
      {label}
    </div>
  );
};

const App = () => {
  const [activeTab, setActiveTab] = useState(1);

  const handleTabClick = (tabIndex) => {
    setActiveTab(tabIndex);
  };

  return (
    <div className="tab-container">
      <div style={{ display: 'flex' ,gap:'20px'}}>
        <div style={{ flex: '0 0 180px', marginRight: '10px' }}>
          <Tab label="Tab 1" active={activeTab === 1} onClick={() => handleTabClick(1)} />
          <Tab label="Tab 2" active={activeTab === 2} onClick={() => handleTabClick(2)} />
          <Tab label="Tab 3" active={activeTab === 3} onClick={() => handleTabClick(3)} />
        </div>
        <div style={{ flex: '1 1 auto' }}>
          {activeTab === 1 && <TabContent>Component1</TabContent>}
          {activeTab === 2 && <TabContent>Component2</TabContent>}
          {activeTab === 3 && <TabContent>Component3</TabContent>}
        </div>
      </div>
    </div>
  );
};

export default App;

e css é

  .tab-container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 25vh;
}

.tab {
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: #f0f0f0;
  border: 1px solid #434DB8;
  color:#434DB8;
  cursor: pointer;
  border-top-right-radius:100%;
  border-bottom-right-radius:100%;
}

.tab::after{
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  left: 30%;
  border-bottom: 2px solid #434DB8;
  border-right: 3px solid #434DB8;
  border-left: 5px solid transparent;
  transform: rotate(-45deg);
  
}
.tab.active {
  background-color: #434DB8;
  color:#FFFFFF;
  font-weight: bold;
}