vic Posts - Answer Overflow

Topics

vic

KPCKevin Powell - Community

•Created by vic on 11/15/2024 in #front-end

how to calculate border values based on height and width in css for loaders

https://codepen.io/Vicky-clowdy/pen/GRVeYqy In this code i set 50px for height and width and set 8px for border So currently I create basic loaders for my project in react as re usable so I can reuse Currently I use this formula like const loader size = size * 0.16 Here size will be same for both height and width , For eg if I set size as 50 , width will 50px and height will be 50px So what I need is , is there any better formula ?

4 replies

KPCKevin Powell - Community

•Created by vic on 11/13/2024 in #front-end

how to make this column as straight in flex

So I want all the contents in same direction https://codepen.io/Vicky-clowdy/pen/YzmBLgQ

30 replies

KPCKevin Powell - Community

•Created by vic on 11/13/2024 in #front-end

how to re render react re usabelcomponent

So I have an resusable component for Toaster notification with message , color property for now I only make with message So In that Toaster , it contains message and close icon button so whenever I click the toaster would go off (false) but whenever I get message propes I set useEffect with setShow true So the problem is if I get same message again It doesn't show the toaster Toaster.jsx

Function Toaster({message}){
const [show,setIsshow] = useState(true);

Function close(){
setIsshow(false);
} 

useEffect(()=>{
setIsshow (true) },[message] )

If(!show) { 
return null 
}
return ( 
<div>
<p> {message} </p>
<button onClick={close} > Click </button>
</div>
 )
}

Function Toaster({message}){
const [show,setIsshow] = useState(true);

Function close(){
setIsshow(false);
} 

useEffect(()=>{
setIsshow (true) },[message] )

If(!show) { 
return null 
}
return ( 
<div>
<p> {message} </p>
<button onClick={close} > Click </button>
</div>
 )
}

Home.jsx

const isErr, setError=(false)
Const errmsg,seterrms=useState ('')
try{ 

} Catch(e){ 
setError(true)
}

return 
( 
{ 
isErr && <Toaster message={errmsg} />

const isErr, setError=(false)
Const errmsg,seterrms=useState ('')
try{ 

} Catch(e){ 
setError(true)
}

return 
( 
{ 
isErr && <Toaster message={errmsg} />

2 replies

KPCKevin Powell - Community

•Created by vic on 11/5/2024 in #front-end

is reusable good for 200lines of code in reactjs

So I m going to have 3 different component with different Imgs for each component and texts too like ( different for each titles or names) So I was wondering i can do like Fetch from Mongodb and use useNavigate to pass with state value like this

js 
const navigation= useNavigate ();
navigation (`${val.name}` , { state : val })

js 
const navigation= useNavigate ();
navigation (`${val.name}` , { state : val })

Here val is the data fetch from backend , so I'm using val.name as routes so it will be different routes For ex , if I click two it will navigate to /two and if I click one , it will nav to /one and pass different values for different routes And I use useLocation to get the values from that So my Question is All the components have same design but different Imgs and texts Would u guys think having 200+ lines of code as reusable component Or should I try useContext or should I go with useNavigate and useLocation ??

1 replies

KPCKevin Powell - Community

•Created by vic on 11/4/2024 in #front-end

how to make a text p tag fills it from parent container

Code link : https://codepen.io/Vicky-clowdy/pen/OJKwzye So I want that p tag text to completely takes width and fills it

14 replies

KPCKevin Powell - Community

•Created by vic on 11/2/2024 in #front-end

how to make border bottom color transition

https://codepen.io/Vicky-clowdy/pen/MWNXmRN I want that border bottom transition coming from center and to fill rest of border

8 replies

KPCKevin Powell - Community

•Created by vic on 10/3/2024 in #front-end

how to performance of react

So I made an mern website and use page insights to check the analysis so it shows 55% performance on mobile and 73 on desktop So I reduced the quality compression of images and add lazy components with lazy componentimg using LazyComponentmg Library and Removed that unused dependcies , can anyone give me suggestions how can I improve it , I can send that website link , i was thinking about input fields onChange event to use useRef hook ? https://food-order-c58e.onrender.com/delivery

28 replies

KPCKevin Powell - Community

•Created by vic on 9/28/2024 in #front-end

how to make like this "..." when a text goes out of parents width

codepen link : https://codepen.io/Vicky-clowdy/pen/rNXVgyP it output as test test test but i want like test test test... that dots

3 replies

KPCKevin Powell - Community

•Created by vic on 9/26/2024 in #back-end

how to prevent logging out user from refreshing the page in express js

so i use express sessions and reactjs for frontend . when i log in the session is set username correctly and can access on other routes as well but once i hit refresh the user log outs , how to prevent this ?

app.use(sessions({
    secret: process.env.SECRET_KEY,
    resave: false,
    saveUninitialized: false,
    cookie: {
        secure: false,
        httpOnly: false,
        maxAge: 1000 * 60 * 60 * 24
    }
}))

routes.get('/login',LoginController)
routes.get('/orders',OrderPage)

app.use(sessions({
    secret: process.env.SECRET_KEY,
    resave: false,
    saveUninitialized: false,
    cookie: {
        secure: false,
        httpOnly: false,
        maxAge: 1000 * 60 * 60 * 24
    }
}))

routes.get('/login',LoginController)
routes.get('/orders',OrderPage)

LoginController.js

if(password===123){
req.session.name = username;
}

if(password===123){
req.session.name = username;
}

OrderPage.js

const name = req.session.name;
console.log(name) //Logs the name

const name = req.session.name;
console.log(name) //Logs the name

1 replies

KPCKevin Powell - Community

•Created by vic on 9/17/2024 in #back-end

need help with error handling in async functions in js

So i fetch some details from backend and get in frontend..so if i turn off my internet it shows error as "cannot read properties undefined" , so i add as if(!res) throw error and provide catch block in frontend but it shows error instead it catch and store on error variable heres the code: react code

async function fetchdata(){
            try{
            let res = await axios.get(`http://localhost:4040/delivery/food/${foodName}`)
            if(!res || !res.data ){
                throw new Error('Network response was not ok')
             }
           
            setFoodData(res.data)            
            }catch (err) {

                let errMsg = "Something error occur"
                if(err.response.data){
                     errMsg = err.response.data
                }
                else if(err.message){
                     errMsg = err.message;
                }
                setError(errMsg);
                console.log(err)
                
            } finally {
                setLoading(false);
            }
        }
        fetchdata()

async function fetchdata(){
            try{
            let res = await axios.get(`http://localhost:4040/delivery/food/${foodName}`)
            if(!res || !res.data ){
                throw new Error('Network response was not ok')
             }
           
            setFoodData(res.data)            
            }catch (err) {

                let errMsg = "Something error occur"
                if(err.response.data){
                     errMsg = err.response.data
                }
                else if(err.message){
                     errMsg = err.message;
                }
                setError(errMsg);
                console.log(err)
                
            } finally {
                setLoading(false);
            }
        }
        fetchdata()

express.js

routes.get('/delivery/food/:foodName', async(req, res) => {
    const foodName = req.params.foodName.toLocaleLowerCase();
    try {
        const FoodNameDb = await FoodDetailsModel.find({
            Foodname: foodName
        })
        if (FoodNameDb) {
            return res.status(200).json(FoodNameDb);
        } else {
            return res.status(400).send("Food not available for now")
        }
    } catch (e) {
        console.log(e)
    }
})

routes.get('/delivery/food/:foodName', async(req, res) => {
    const foodName = req.params.foodName.toLocaleLowerCase();
    try {
        const FoodNameDb = await FoodDetailsModel.find({
            Foodname: foodName
        })
        if (FoodNameDb) {
            return res.status(200).json(FoodNameDb);
        } else {
            return res.status(400).send("Food not available for now")
        }
    } catch (e) {
        console.log(e)
    }
})

1 replies

KPCKevin Powell - Community

•Created by vic on 9/16/2024 in #front-end

need help with grid in responsive

No description

12 replies

KPCKevin Powell - Community

•Created by vic on 9/14/2024 in #front-end

need help in grid and flex css in responsive

Codepen : https://codepen.io/Vicky-clowdy/pen/Bagejre

<div id='container'>  
        <div id='header'>
            <p>Tomato</p>
         </div>
        <div id='input'>
            <input type='text' />
         </div>
        <div id='buttons'>
            <button> button1 </button>
            <button> button2 </button>
         </div>
</div>

<div id='container'>  
        <div id='header'>
            <p>Tomato</p>
         </div>
        <div id='input'>
            <input type='text' />
         </div>
        <div id='buttons'>
            <button> button1 </button>
            <button> button2 </button>
         </div>
</div>

#container {
    background-color: white;
    min-height: 15dvh;
    max-height: 20dvh;
    height: auto;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}

#header {
    color: black;
    font-weight: bold;
    font-size: 30px;
    transform: skewX(-15deg);
}
#input input{

    width: 300px;
    height: 50px;
    padding-left: 50px;
    outline: none;
    border: 1px solid black;
    border-left: unset;
}
#buttons{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 20%;
}

#container {
    background-color: white;
    min-height: 15dvh;
    max-height: 20dvh;
    height: auto;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}

#header {
    color: black;
    font-weight: bold;
    font-size: 30px;
    transform: skewX(-15deg);
}
#input input{

    width: 300px;
    height: 50px;
    padding-left: 50px;
    outline: none;
    border: 1px solid black;
    border-left: unset;
}
#buttons{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 20%;
}

So it wil be like : Tomato input box button1 button2 But now in resposnive i want it to like this : Tomato button1 button2 input box

@media screen and (min-width:320px) and (max-width:480px) {
    #container {
        background-color: white;
        min-height: 15dvh;
        max-height: 20dvh;
        height: auto;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    #header {
        grid-column: 1;
        display: inline;
    }
    #buttons {
        grid-column: 2;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        background-color: green;
    }
    #input {
        grid-row: 2;
    }
}

@media screen and (min-width:320px) and (max-width:480px) {
    #container {
        background-color: white;
        min-height: 15dvh;
        max-height: 20dvh;
        height: auto;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    #header {
        grid-column: 1;
        display: inline;
    }
    #buttons {
        grid-column: 2;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        background-color: green;
    }
    #input {
        grid-row: 2;
    }
}

the buttons goes beyond that 100% width

6 replies

KPCKevin Powell - Community

•Created by vic on 9/13/2024 in #front-end

how to wrap these in elements within 50px of height in css

so i want that icon and two p tags text inside 50px of height . in that icon place there will be a mui icons , icon fits perfect but the text going outside , i tried justify-content:unset;

<div id='ios-icon-div'>
      <div>
        <p>Icon</p> // It is a placeholder and This fits well 
      </div>
    <div id='ios-download-text' >
        <p>Download on the </p> //this text going outside
         <p>Apple Store </p>  //this text going outside
      </div>
</div>

<div id='ios-icon-div'>
      <div>
        <p>Icon</p> // It is a placeholder and This fits well 
      </div>
    <div id='ios-download-text' >
        <p>Download on the </p> //this text going outside
         <p>Apple Store </p>  //this text going outside
      </div>
</div>

#ios-icon-div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: red;
    height: 50px;
    width: 140px;
}

#ios-download-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  justify-content:unset;
    overflow: hidden;
}

#ios-icon-div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: red;
    height: 50px;
    width: 140px;
}

#ios-download-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  justify-content:unset;
    overflow: hidden;
}

3 replies

KPCKevin Powell - Community

•Created by vic on 9/11/2024 in #back-end

img not displaying from Mongodb img address

So my Mongodb has values as name : "item1" , img : 'Assests/Icons/iconName' And In react folder , inside public folder public -> ---Assests/Icons/ "all icon images" But I gave the icon name in db values . For example For burger icon I gave img : 'Assests/Icons/burger' in db And I have burger.png have in public folder

38 replies

KPCKevin Powell - Community

•Created by vic on 9/10/2024 in #back-end

how to send post from data from react and capture the data in express

react code

const [formDetails,setFormDetails]=useState({
    name : '',
    mail:'',
    password:''
   });
    
async function HandleForm(e){
        e.preventDefault()
        console.log("inside fetch fn")
        try{
           let res=await fetch('http://localhost:4040/register',{
            method:'POST',
            body:formDetails,
            headers:{
                "Content-type":"application/json"
            }
           });
           console.log("inside try block")
        }
        catch(err){
            console.log(err)
        }

    }

<form onSubmit={HandleFrom}>
<input type="submit" />
</form>

const [formDetails,setFormDetails]=useState({
    name : '',
    mail:'',
    password:''
   });
    
async function HandleForm(e){
        e.preventDefault()
        console.log("inside fetch fn")
        try{
           let res=await fetch('http://localhost:4040/register',{
            method:'POST',
            body:formDetails,
            headers:{
                "Content-type":"application/json"
            }
           });
           console.log("inside try block")
        }
        catch(err){
            console.log(err)
        }

    }

<form onSubmit={HandleFrom}>
<input type="submit" />
</form>

express codE:

routes.post('/register',async(req,res)=>{
    const receivedData=req.body;
    console.log(receivedData)
}

routes.post('/register',async(req,res)=>{
    const receivedData=req.body;
    console.log(receivedData)
}

6 replies

KPCKevin Powell - Community

•Created by vic on 9/8/2024 in #front-end

Rendering components in reactjs

I have 4 component in app.jsx <Component 1 /> <Component 2 /> <Component 3/> <Component 4/> So I want to render component 1 all the time that is for ( component 2,3) So when I'm in component 4 , i don't want to render component 1

4 replies

KPCKevin Powell - Community

•Created by vic on 9/7/2024 in #back-end

need help with mongodb

My collection document look like this

{
_id : 1,
hotelName:"Burger King",
cost : 200
},
{ 
_id : 2,
hotelName:"misu",
cost : 200
}

{
_id : 1,
hotelName:"Burger King",
cost : 200
},
{ 
_id : 2,
hotelName:"misu",
cost : 200
}

Express code :

js 
Hotelname ="Misu" 
await Model.find({
hotelName : { 
   $regex : Hotelname , $options : 'i' } })

js 
Hotelname ="Misu" 
await Model.find({
hotelName : { 
   $regex : Hotelname , $options : 'i' } })

I use regEx to remove white spaces on hotelName variable and make it as lower case too before using on $regex query So the problem is if I search Misu it works but it won't work when Burger King because it has space between the words ! Is there any solution or should I change the values in document

1 replies

KPCKevin Powell - Community

•Created by vic on 9/6/2024 in #front-end

increment, decrement multiple elements of an elements in reactjs

So I have 10 divs rendered through map function but I want to increment/decrement the respective element value and display on a element Code :

let arr= ["item1","item2","item3"...,"item10"]
const [quantity, setQuantity]=useState(0)

function Increment (){ 
setQuantity (quantity+1)
}

function Decrement (){ 
setQuantity (quantity-1)
}

{
arr.map((key,val)=>{
return  <div key={key} 
<p> {val} </p> 
<button onClick={Increament}> Increment </button>
<p> {quantity} </p>
<buttononClick={Decreament}> Decrement </button>

</div> 
}
)}

let arr= ["item1","item2","item3"...,"item10"]
const [quantity, setQuantity]=useState(0)

function Increment (){ 
setQuantity (quantity+1)
}

function Decrement (){ 
setQuantity (quantity-1)
}

{
arr.map((key,val)=>{
return  <div key={key} 
<p> {val} </p> 
<button onClick={Increament}> Increment </button>
<p> {quantity} </p>
<buttononClick={Decreament}> Decrement </button>

</div> 
}
)}

4 replies

KPCKevin Powell - Community

•Created by vic on 9/6/2024 in #back-end

how to add params in useEffect axios get request

Backend code :

routes.get('/delivery/hotel/:hotelname',(req,res)=>{
const hotelName = req.params.hotelname;
res.json({'name': hotelName}) 
} )

routes.get('/delivery/hotel/:hotelname',(req,res)=>{
const hotelName = req.params.hotelname;
res.json({'name': hotelName}) 
} )

In reactjs , i don't know how to make that url cuz the hotelname could be different I tried like this

useEffect(()=> { 
async function fetchData(){ 
let res= await axios.get('http://localhost:1010/delivery/hotel/:hotelName')
console.log(res)
}
fetchData()
},[])

useEffect(()=> { 
async function fetchData(){ 
let res= await axios.get('http://localhost:1010/delivery/hotel/:hotelName')
console.log(res)
}
fetchData()
},[])

So idk how to set params in react axios ```

56 replies

KPCKevin Powell - Community

•Created by vic on 9/5/2024 in #front-end

need help with framer motion on reactjs

Code :

import { motion } from 'framer-motion';

    <motion.img
      initial={{ opacity: 1 }}
      whileHover={{ opacity: 0.8 }}
       src="your-image-url.jpg"
      alt="Description"
    />

import { motion } from 'framer-motion';

    <motion.img
      initial={{ opacity: 1 }}
      whileHover={{ opacity: 0.8 }}
       src="your-image-url.jpg"
      alt="Description"
    />

So the error is "failed to execute 'animate' on 'element' duration must be non-negative or auto" Typeerror I don't even include Duration but the error is keep showing whenever I hover that img

1 replies