Avinash Posts - Answer Overflow

Avinash

Explore posts from servers

KPCKevin Powell - Community TTCTheo's Typesafe Cult

Posts Comments

KPCKevin Powell - Community

•Created by Avinash on 4/29/2024 in #front-end

How do i acheive this in flexbox without creating two rows of div

9 replies

KPCKevin Powell - Community

•Created by Avinash on 4/22/2024 in #front-end

How to remove whitespace when zoomed near scroll bar

5 replies

KPCKevin Powell - Community

•Created by Avinash on 4/17/2024 in #front-end

How do i achieve this? i experimented with has() property and im facing difficulties

3 replies

TTCTheo's Typesafe Cult

•Created by Avinash on 3/23/2024 in #questions

Uploadthing throws errors in nextjs 14 when withUt wrapped around tailwind configs.

3 replies

KPCKevin Powell - Community

•Created by Avinash on 12/8/2023 in #front-end

How to move Text-overflow:ellipsis dots when the parent and child ellipsis stacked on each other?

1 replies

KPCKevin Powell - Community

•Created by Avinash on 11/30/2023 in #front-end

is it possible to get the values from browser console and display the result in browser UI?

Let say i created a 3 different function , when user enters

 myFunc(5)

 myFunc(5)

in browser console, the output of it should be displayed in the UI. Is it possible?

6 replies

KPCKevin Powell - Community

•Created by Avinash on 11/21/2023 in #front-end

Unable to change SVG icons color in react

I have downloaded svg files and added fill = "currentColor" to each individual . THen i created a file to export these svg, so i can use it in other components. THis is where the issue happens, i cant change the color via CSS , i even added !important, still its showing default black color. ANyone knows how to fix it?

imageExport.jsx

export { default as email } from "./envelope-solid.svg";
export { default as lock } from "./lock-solid.svg";
export { default as eyeOpen } from "./eye-solid.svg";
export { default as eyeClose } from "./eye-slash-solid.svg";

imageExport.jsx

export { default as email } from "./envelope-solid.svg";
export { default as lock } from "./lock-solid.svg";
export { default as eyeOpen } from "./eye-solid.svg";
export { default as eyeClose } from "./eye-slash-solid.svg";

component.jsx


import {
  email as EmailIcon,
  eyeClose as PasswordHide,
  eyeOpen as PasswordShow,
  lock as LockIcon,
} from "../assets/imageExport";


<img
  src={EmailIcon}
  alt=""
  width={20}
  height={20}
  className="icons_mail"
/>

component.jsx


import {
  email as EmailIcon,
  eyeClose as PasswordHide,
  eyeOpen as PasswordShow,
  lock as LockIcon,
} from "../assets/imageExport";


<img
  src={EmailIcon}
  alt=""
  width={20}
  height={20}
  className="icons_mail"
/>

.icons_mail {
  color: rebeccapurple !important;
}

.icons_mail {
  color: rebeccapurple !important;
}

6 replies

KPCKevin Powell - Community

•Created by Avinash on 11/15/2023 in #front-end

Bootstrap forms not appending data in the url via get method

If i submit basic form via get method , data is appended to the URL , but when i used Bootstrap form, the dont see any data being appended. How to fix this?

html -> http://127.0.0.1:5500/day7.html when form is submitted http://127.0.0.1:5500/values.html?fname=as&lname=as

bootstrap form -> http://127.0.0.1:5500/day7.html when form is submitted  http://127.0.0.1:5500/values.html?

html -> http://127.0.0.1:5500/day7.html when form is submitted http://127.0.0.1:5500/values.html?fname=as&lname=as

bootstrap form -> http://127.0.0.1:5500/day7.html when form is submitted  http://127.0.0.1:5500/values.html?

i dont see fname=as&lname=as data being appeneded ivia url in bootstrap

7 replies

KPCKevin Powell - Community

•Created by Avinash on 7/13/2023 in #front-end

svg path is not at the specified location even thought the starting /end point is correct

2 replies

KPCKevin Powell - Community

•Created by Avinash on 6/26/2023 in #front-end

rerender is adding fetch results again and again.

issue occurs at setWatchListData. im trying to insert unique objects by comparing the ids. whenever it renders it adds same object inside an array

 const fetchWatchList = (list) => {
        fetch(`https://api.themoviedb.org/3/movie/${list[0]}?external_source=imdb_id&api_key=${API_KEY}`)
    .then(response => response.json())
    .then(response => {
      setWatchListData(prevlist => {
      const isMovieAdded = prevlist.filter(movie => movie.id !== response.id)

    if (isMovieAdded.length === 0) {
      return [...prevlist, response]
      } else {
          return prevlist;
      }
      })
      })
      .catch(err => console.error(err));
    }

    useEffect(() => {
        watchList?.map((list) => (
            fetchWatchList(list)))
    }, [watchList])

 const fetchWatchList = (list) => {
        fetch(`https://api.themoviedb.org/3/movie/${list[0]}?external_source=imdb_id&api_key=${API_KEY}`)
    .then(response => response.json())
    .then(response => {
      setWatchListData(prevlist => {
      const isMovieAdded = prevlist.filter(movie => movie.id !== response.id)

    if (isMovieAdded.length === 0) {
      return [...prevlist, response]
      } else {
          return prevlist;
      }
      })
      })
      .catch(err => console.error(err));
    }

    useEffect(() => {
        watchList?.map((list) => (
            fetchWatchList(list)))
    }, [watchList])

4 replies

KPCKevin Powell - Community

•Created by Avinash on 6/24/2023 in #front-end

Any ideas on how to fix this behaviour?

im using mouseEnter and mouseLeave to add few features such as changing background to landscape, scale etc. and now its having this weird effect. Anyone knows how to fix it? https://scrimba.com/scrim/co3614b79bcbdf6f01044f8ef

1 replies

KPCKevin Powell - Community

•Created by Avinash on 6/24/2023 in #front-end

Anyone knows what causing this issue?

4 replies

KPCKevin Powell - Community

•Created by Avinash on 6/22/2023 in #front-end

Font size is scaled when scale is applied on hover

4 replies

KPCKevin Powell - Community

•Created by Avinash on 6/17/2023 in #front-end

How to disable youtube cards,title and other controls in React Player

2 replies

KPCKevin Powell - Community

•Created by Avinash on 5/28/2023 in #front-end

Help with grid

6 replies

KPCKevin Powell - Community

•Created by Avinash on 5/28/2023 in #front-end

is there a way to make react App flex box without wrapping it inside a div?

const App = () => {
  return (
    <Router>
      <Aside1 />
      <Aside2/>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/movies' element={<Movies />} />
        <Route path='/tvshows' element={<TvShows />} />
      </Routes>
    </Router>
  )
}

const App = () => {
  return (
    <Router>
      <Aside1 />
      <Aside2/>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/movies' element={<Movies />} />
        <Route path='/tvshows' element={<TvShows />} />
      </Routes>
    </Router>
  )
}

how to make them flex ie aside1 and aside2 without wrapping inside div. is there a way or only option is using div?

2 replies

KPCKevin Powell - Community

•Created by Avinash on 5/24/2023 in #os-and-tools

which framework preset should i select in cloudflare pages?

5 replies

KPCKevin Powell - Community

•Created by Avinash on 5/23/2023 in #os-and-tools

Is there a guide on how to host vite+react after done coding?

i followed one tutorial to upload via github pages by installing gh pages etc and it ended up having issues. the host websites only has root div and no content inside.

4 replies

KPCKevin Powell - Community

•Created by Avinash on 5/21/2023 in #front-end

Anyone know how to fix this issue in react?

8 replies

KPCKevin Powell - Community

•Created by Avinash on 5/21/2023 in #front-end

How to make image start from top of the div and add border radius?

7 replies

Gaming

Programming