anonn
anonn
PostsComments
RReactiflux
Created by anonn on 10/14/2022 in #help-threads-react
anonn – 16-33 Oct 14
Yeah im trying to implement it myself to learn
13 replies
RReactiflux
Created by anonn on 10/14/2022 in #help-threads-react
anonn – 16-33 Oct 14
Ooh that's an interesting idea, so just absolutely position the circle to the edge of the rectangle bar thingo, then when you change the width of the rectangle bar, you change the circle location also!
13 replies
RReactiflux
Created by anonn on 10/14/2022 in #help-threads-react
anonn – 16-33 Oct 14
thank you!!
13 replies
RReactiflux
Created by anonn on 10/14/2022 in #help-threads-react
anonn – 16-33 Oct 14
Was trying to implement my own progress slider to learn...and judging from how ugly the code is seems like ive got a lot to learn haha
13 replies
RReactiflux
Created by anonn on 10/14/2022 in #help-threads-react
anonn – 16-33 Oct 14
Yeah exactly, I wanna access the initial width immediately...but Im not able to access the initial width until after it renders, so kinda unsure how to solve this issue
13 replies
RReactiflux
Created by anonn on 10/14/2022 in #help-threads-react
anonn – 16-33 Oct 14
type Props = {};

const SliderComponent = (props: Props) => {
  const context = useNotUndefinedContext(AppContext);
  const slider = useRef(null) as any;
  const circle = useRef(null) as any;
  let initialMouseX: number;
  // How to dynamically access slider width?
  const initialSliderWidth = 400;
  let sliderWidth: number;
  let offset: number = -1;

  const handleMouseMove = (mouseMoveEvent: any) => {
    const movedMouseX: number = mouseMoveEvent.clientX;

    let distanceMouseMovedX: number = -(movedMouseX - initialMouseX);

    const numifiedSliderWidth: number = sliderWidth;

    console.log(numifiedSliderWidth);

    const newWidth: number = numifiedSliderWidth - distanceMouseMovedX;

    if (newWidth > initialSliderWidth) {
      return;
    } else if (newWidth < 10) {
      return;
    }

    const newLength = Math.round((newWidth / initialSliderWidth) * 10);

    context.setPasswordLength(newLength !== 0 ? newLength : 1);

    slider.current.style.width = `${String(newWidth)}px`;
    circle.current.style.right = `${String(distanceMouseMovedX + offset)}px`;
  };
  const handleMouseDown = (mouseDownEvent: React.MouseEvent) => {
    mouseDownEvent.preventDefault();
    initialMouseX = mouseDownEvent.clientX;
    sliderWidth = numifyStyles(window.getComputedStyle(slider.current).width);
    offset = numifyStyles(circle.current.style.right);
    circle.current.classList.remove("bg-grey-light");
    circle.current.classList.add(
      "bg-grey-dark",
      "border-solid",
      "border-coral",
      "border-2"
    );
  };
  return (
    <div className="block h-[10px] bg-black mt-[32px] relative">
      <div ref={slider} className="block h-[10px] bg-coral w-full h-full absolute"></div>
      <div ref={circle} onMouseDown={handleMouseDown} className="absolute appearance-none bg-grey-light rounded-full w-[28px] h-[28px] inline-block align-middle -right-1 -translate-y-[9px]"></div>
    </div>
  );
};
type Props = {};

const SliderComponent = (props: Props) => {
  const context = useNotUndefinedContext(AppContext);
  const slider = useRef(null) as any;
  const circle = useRef(null) as any;
  let initialMouseX: number;
  // How to dynamically access slider width?
  const initialSliderWidth = 400;
  let sliderWidth: number;
  let offset: number = -1;

  const handleMouseMove = (mouseMoveEvent: any) => {
    const movedMouseX: number = mouseMoveEvent.clientX;

    let distanceMouseMovedX: number = -(movedMouseX - initialMouseX);

    const numifiedSliderWidth: number = sliderWidth;

    console.log(numifiedSliderWidth);

    const newWidth: number = numifiedSliderWidth - distanceMouseMovedX;

    if (newWidth > initialSliderWidth) {
      return;
    } else if (newWidth < 10) {
      return;
    }

    const newLength = Math.round((newWidth / initialSliderWidth) * 10);

    context.setPasswordLength(newLength !== 0 ? newLength : 1);

    slider.current.style.width = `${String(newWidth)}px`;
    circle.current.style.right = `${String(distanceMouseMovedX + offset)}px`;
  };
  const handleMouseDown = (mouseDownEvent: React.MouseEvent) => {
    mouseDownEvent.preventDefault();
    initialMouseX = mouseDownEvent.clientX;
    sliderWidth = numifyStyles(window.getComputedStyle(slider.current).width);
    offset = numifyStyles(circle.current.style.right);
    circle.current.classList.remove("bg-grey-light");
    circle.current.classList.add(
      "bg-grey-dark",
      "border-solid",
      "border-coral",
      "border-2"
    );
  };
  return (
    <div className="block h-[10px] bg-black mt-[32px] relative">
      <div ref={slider} className="block h-[10px] bg-coral w-full h-full absolute"></div>
      <div ref={circle} onMouseDown={handleMouseDown} className="absolute appearance-none bg-grey-light rounded-full w-[28px] h-[28px] inline-block align-middle -right-1 -translate-y-[9px]"></div>
    </div>
  );
};
13 replies
RReactiflux
Created by anonn on 10/12/2022 in #help-threads-react
anonn – 10-05 Oct 12
!close
5 replies
RReactiflux
Created by anonn on 10/12/2022 in #help-threads-react
anonn – 10-05 Oct 12
nvm it works
5 replies
RReactiflux
Created by anonn on 10/12/2022 in #help-threads-react
anonn – 10-05 Oct 12
Sorry I will rephrase, I meant the purpose of the meta tag is the prevent the zoom out when the viewport is a phone. I know the meta tag will work for all viewports. My problem is that the meta tag does not take effect in removing the zoom out when the viewport is a phone, I must have some sort of error in my code. When I tried using the meta tag in a purely html file it worked, but with next.js it doesnt.
5 replies
RReactiflux
Created by anonn on 10/10/2022 in #help-js
anonn – 15-18 Oct 10
I am confused by 
Promise.resolve()
.then(() => console.log('hi'));
Promise.resolve()
.then(() => console.log('hi'));
So the javascript engine sees Promise.resolve() and returns a fulfilled promise. We go to the next line, .then(() => console.log('hi'));. What is the step by step process that happens now? e.g does the javascript engine see that the attached promise is resolved then throw the arrow function to the microtask queue?
8 replies
RReactiflux
Created by anonn on 10/10/2022 in #help-js
anonn – 15-18 Oct 10
That is actually where I got the example, but I am still confused. So step 1, b gets put into the microtask queue. How does it get there? What does Promise.resolve() do in terms of the event loop? What does .then() do in terms of the event loop? Who puts b into the microtask queue? Is it the Web API?
8 replies