tejveer Posts - Answer Overflow

tejveer

•Created by tejveer on 8/22/2024 in #front-end

Outline transition duration issues

https://gyazo.com/9989a2e09cee6d53cbac555ef24d155a I'm trying to apply a duration on the outline for the start button, for some reason, it has a weird delay, not sure if you can notice. It immediately loads the outline, a bit, then, immediately loads the rest after. It's not smooth. Here's the code:

function Start() {
  return (
    <>
      <button className="mt-2 cursor-pointer rounded-md border-none border-slate-200 bg-slate-200 px-2 text-[1rem] outline-2 outline-blue-400 duration-100 hover:outline">
        Start
      </button>
    </>
  );
}

function Start() {
  return (
    <>
      <button className="mt-2 cursor-pointer rounded-md border-none border-slate-200 bg-slate-200 px-2 text-[1rem] outline-2 outline-blue-400 duration-100 hover:outline">
        Start
      </button>
    </>
  );
}

Anyone know why?

6 replies

KPCKevin Powell - Community

•Created by tejveer on 8/12/2024 in #front-end

How to get flex item to remain fixed?

So I was trying to make an insult generator for fun and ran into the following issue: https://gyazo.com/29b1019b9220b9f1a8f25b242769735a The content div at the bottom has fixed with auto height. And so when content randomly changes on every submit, the height changes relative to that content. The height's changes then also end up changing its sibling's position. The sibling is just the input-button pair div. The pair div and the content div are items in a flex column container.

export default function Experiment() {
  const [name, setName] = useState("");
  const [insult, setInsult] = useState("");

  const onSubmit = () => {
    setInsult(generateInsult(name));
  };

  return (
    <>
      <div className="flex h-full flex-col items-center justify-center">
        <div className="flex flex-col gap-2">
          <input
            className="rounded-md border-solid border-orange-300 p-2 text-[1rem] outline-none"
            onChange={(e) => setName(e.target.value)}
          ></input>
          <button
            onClick={onSubmit}
            className="self-start rounded-md border-solid px-2 transition"
          >
            Submit
          </button>
        </div>
        <div className="mt-6 w-[210px]">{insult}</div>
      </div>
    </>
  );
}

export default function Experiment() {
  const [name, setName] = useState("");
  const [insult, setInsult] = useState("");

  const onSubmit = () => {
    setInsult(generateInsult(name));
  };

  return (
    <>
      <div className="flex h-full flex-col items-center justify-center">
        <div className="flex flex-col gap-2">
          <input
            className="rounded-md border-solid border-orange-300 p-2 text-[1rem] outline-none"
            onChange={(e) => setName(e.target.value)}
          ></input>
          <button
            onClick={onSubmit}
            className="self-start rounded-md border-solid px-2 transition"
          >
            Submit
          </button>
        </div>
        <div className="mt-6 w-[210px]">{insult}</div>
      </div>
    </>
  );
}

I don't want it to be this way. I want the sibling div to have a fixed position where it is regardless of the content of its sibling. How do I do this?

11 replies

KPCKevin Powell - Community

•Created by tejveer on 8/7/2024 in #front-end

Weird onMouseEnter behavior

Here's an abstraction of the React I have:

h4.name
{isNameHovered && div.message}

h4.name
{isNameHovered && div.message}

The h4 has an onMouseEnter and onMouseLeave event that sets the isNameHovered state which is responsible for rendering the message. It does what it's supposed to do but for some reason the message opacity changes relative to position within the h4. https://gyazo.com/bd8fad7560ee8d78f74edbdde4d80f59 This only happens if I try to enter the h4 from the bottom; the top is fine. I have no animation styles set on anything relating to this.

10 replies

KPCKevin Powell - Community

•Created by tejveer on 8/6/2024 in #front-end

Element not inheriting parent element's height

42 replies

KPCKevin Powell - Community

•Created by tejveer on 7/26/2024 in #front-end

Making transition to new screen smoother

I'm making a todo app and I've designed it so that when I press the add button a new screen appears. Like this (https://gyazo.com/cb7d487262c55342077216c52b830407). But the transition is too 'blunt'. How do I make it smoother? For reference, I'm using React + Tailwind; this is the relevant code that adds the screen.

2 replies

KPCKevin Powell - Community

•Created by tejveer on 7/26/2024 in #front-end

On focus border changing component size

https://gyazo.com/90ba846f18909e47d3112f2ff377c829 When I focus on the input, the border is added, but for some reason, the other components change their size accordingly. Is there a way to prevent this from happening? Here is the code for that particular element. Its parent is a flex container, for context.

5 replies

KPCKevin Powell - Community

•Created by tejveer on 7/23/2024 in #front-end

Replicating Android Clock

Hello everyone, would it be possible to have some pointers regarding how to begin making something like this in React? The bottom div containing the times for various locations appears to be moveable. And the content of the div at the top fades relative to the position of the bottom div. If the bottom div reaches a certain threshold height then it collapses either to the top or to the bottom. I'm new to frontend and having difficult time figuring out which concepts I should use to begin implementing this.

4 replies

Gaming

Programming