vic Posts - Answer Overflow

Topics

vic

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

KPCKevin Powell - Community

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

sticky position is not working in reactjs

So I make like this

css 
position:sticky;
top:5%;

css 
position:sticky;
top:5%;

It stops at 5% but when I scroll it goes away
Code : https://codepen.io/Vicky-clowdy/pen/NWZEOvE

27 replies

KPCKevin Powell - Community

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

need help with height units in css

<div> 
<img src='img.file' alt='img' />
</div>

<div> 
<img src='img.file' alt='img' />
</div>

div{ 
height:50vh;
width:100%;
background-color:red;
}
div img { 
height:100%; 
}

div{ 
height:50vh;
width:100%;
background-color:red;
}
div img { 
height:100%; 
}

So if I set height:100% in img it fits in that div height but if I set vh it doesn't work , can sum1 explain why ?

8 replies

KPCKevin Powell - Community

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

how to Remove border in input while focus in css

No description

7 replies

KPCKevin Powell - Community

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

nested routes in reactjs

I want to display the content of the nested route (e.g., Cake) and hide the parent component’s UI when navigating to /deliver/cake ..here /deliver is parent route Codes I only include main part of code App.js

js 

    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/deliver" element={<Delivery />}>
          <Route path="cake" element={<Cake />} />
        </Route>
      </Routes>
    </Router>
  );

js 

    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/deliver" element={<Delivery />}>
          <Route path="cake" element={<Cake />} />
        </Route>
      </Routes>
    </Router>
  );

Delivery.js

import { Outlet, Link } from 'react-router-dom';

function Delivery() {
  return (
    <div>
      <h2>Delivery</h2>
      <nav>
        <Link to="cake">Cake</Link>
      </nav>
      <Outlet />

import { Outlet, Link } from 'react-router-dom';

function Delivery() {
  return (
    <div>
      <h2>Delivery</h2>
      <nav>
        <Link to="cake">Cake</Link>
      </nav>
      <Outlet />

Cake.js

function Cake() {
  return <h3>Cake Component</h3>;
}

function Cake() {
  return <h3>Cake Component</h3>;
}

2 replies

KPCKevin Powell - Community

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

need help with fetch json files ( from files) in reactjs

No description

7 replies

KPCKevin Powell - Community

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

how to render a component by clicking in reactjs ?

I want to render a component by clicking? Here's the code I want to display that language component when I click button from that user.jsx and only render language component and disappear that user component Language.jsx

js 

import React from 'react';
export function Language({ usedetails }) {
  return <h1> Welcome {usedetails} </h1>;
}

js 

import React from 'react';
export function Language({ usedetails }) {
  return <h1> Welcome {usedetails} </h1>;
}

User.jsx

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

export function User() {
  const [usedetails, setUsedetails] = useState('');

  function redirect12() {
    <Language usedetails={usedetails}
}

  return (
    <div>
      <input
        type='text'
        onChange={(e) => setUsedetails(e.target.value)}
      />
      <button onClick={redirect12}>Next</button>

    </div>
  );
}

App.jsx

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

export function User() {
  const [usedetails, setUsedetails] = useState('');

  function redirect12() {
    <Language usedetails={usedetails}
}

  return (
    <div>
      <input
        type='text'
        onChange={(e) => setUsedetails(e.target.value)}
      />
      <button onClick={redirect12}>Next</button>

    </div>
  );
}

App.jsx

js import React from 'react'; import { User } from './User'; export function App() { return ( <div> <User /> </div> ); }

51 replies