kingtigerknight Posts - Answer Overflow

Topics

kingtigerknight

KPCKevin Powell - Community

•Created by kingtigerknight on 5/21/2024 in #front-end

[Solved] The "transition" doesn't work

I just started to work with Vue with SCSS for the first time and I noticed that when I tryed transition like the code below, when I hover over my a elements, they don't have that transition time. I try to do it with normal CSS but that didn't work too but it worked with HTML. So maybe it has to do with Vue? Anyone know how to fix this?

nav {
    border-bottom: 1px solid $c-gold;

    .active {
        color: red;
    }

    a {
        padding: 0.5rem 1rem;
        transition: 200ms ease-in-out;
    }

    a:hover {
        background: $c-gold;
        background: linear-gradient(
            339deg,
            rgba(255, 200, 0, 1) 0%,
            rgb(131, 103, 0) 100%
        );
    }
}

nav {
    border-bottom: 1px solid $c-gold;

    .active {
        color: red;
    }

    a {
        padding: 0.5rem 1rem;
        transition: 200ms ease-in-out;
    }

    a:hover {
        background: $c-gold;
        background: linear-gradient(
            339deg,
            rgba(255, 200, 0, 1) 0%,
            rgb(131, 103, 0) 100%
        );
    }
}

15 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 3/5/2024 in #back-end

For some reason the post value isn't being shown even tho in var_dump it shows that it's there.

No description

23 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 12/5/2023 in #back-end

How to deploy your website without other users getting into your database user and password file?

Lets say I want to deploy a folder into github and it's connected to a database and I name it a file called db.php. Is there a way to make it so that when I upload this to GitHub, I can still connect to the database but other people cannot find the file? Dose the gitignore file dose that? I never thought about it until now.

28 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 12/2/2023 in #front-end

How do I create this horizontal scroll while stopping the user from scrolling pass?

I found a cool website https://familyindustrieslive.com/ and while looking scrolling through it when I get to the "The Experience" it stops me from scrolling and it horizontal scrolls before I'm allow to scroll down more. How do it do this?! This is COOL!!!!

5 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 11/24/2023 in #back-end

Question about putting up your website with a Database

Hello, I been using GitHub and Netlify to deploy my sites. They are using HTML, CSS, and Javascript. Now that I have learn PHP and MySql I want to use MySql however I have no idea how to deploy a website with MySql. So, I was wondering if anyone know if there is a way to deploy my website online using GitHub or Netlify or another way to deploy it free? If unable to for free then whats the cheapest and best option? I'm very new to this, so I'm up to learn 🙂

7 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 2/17/2023 in #front-end

What files can or should not be put into GitHub when you build your app?

Hello, since this is going to be my first time putting something into GitHub when building something with React to share to others... what files do I put? When I was only using html, css, and javascript it was very easy as I just put everything into the folder and BAM, it's in gitHub and working fine. Now that I'm using React, theres a node_modules, public, src, and build folders. There is also a package-lock, and package json files. There is so much other folders and files that I don't know which of theses of should I put into a folder so that publish into GitHub like, do I just put everything from the folder into github or do I only put the build folder? I'm kind of confused about that. Thanks in advance 🙂

9 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 2/7/2023 in #back-end

1st time picking up a database, require recommendations

Hello, I'm starting to learn a bit about the backend database and I been seeing RethinkDB, MongoDB, OrientDB, and many more. With so much to choose from, I want you guys to recommend me one as someone new to all of theses databases as you guys will know more about which one is better or easy to use for someone starting out like me. I would be using this with React.js so if there is one that works well with React I would prefer that. Thanks in advance 🙂

19 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 2/1/2023 in #front-end

React v5 to v6 update help with params update

Hello, dose anyone know a way to update v5 this.props.match.params.id into v6 which is import { useParams } from "react-router-dom"; but with out changing the class into a function? I tried to search for a way however I can't seem to find a solution for this. Here is one of my code that needs to be updated

componentDidMount() {
        const genres = getGenres();
        this.setState({ genres });

        const movieId = this.props.match.params.id;
        if (movieId === "new") return;

        const movie = getMovie(movieId);
        if (!movie) return this.props.history.replace("/not-found");

        this.setState({ data: this.mapToViewModel(movie) });
    }

componentDidMount() {
        const genres = getGenres();
        this.setState({ genres });

        const movieId = this.props.match.params.id;
        if (movieId === "new") return;

        const movie = getMovie(movieId);
        if (!movie) return this.props.history.replace("/not-found");

        this.setState({ data: this.mapToViewModel(movie) });
    }

Here you can see that in const movieId = this.props.match.params.id; it has the this.props.match.params.id however that doesn't work anymore in v6. It's in a class however I would like to keep it as a class and not changed it into a function if possible. Dose anyone know a way?

class Form extends Component

class Form extends Component

1 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 1/28/2023 in #front-end

Is there a way to useParams() in a class in v6 of react-router-dom?

After many videos and googling I can't really find what I'm looking for as useParams() works but with a function and not a class. Dose anyone know a way to fix this? Here is the version I tried as a class

class ProductDetails extends Component {
    handleSave = () => {
console.log("test");
    };

    render() {
        const params = useParams();

        return (
            <div>
                <h1>Product Details - {params.id} </h1>
                <button onClick={this.handleSave}>Save</button>
            </div>
        );
    }
}

class ProductDetails extends Component {
    handleSave = () => {
console.log("test");
    };

    render() {
        const params = useParams();

        return (
            <div>
                <h1>Product Details - {params.id} </h1>
                <button onClick={this.handleSave}>Save</button>
            </div>
        );
    }
}

Here is the version I tried as a funtion

const Details = () => {
    handleSave = () => {
        console.log("test");
    };

    const params = useParams();

    return (
        <div>
            <h1>Product Details - {params.id} </h1>
            <BtnHandleSave onClick={this.props.onHandleSave()}></BtnHandleSave>
        </div>
    );
};

const Details = () => {
    handleSave = () => {
        console.log("test");
    };

    const params = useParams();

    return (
        <div>
            <h1>Product Details - {params.id} </h1>
            <BtnHandleSave onClick={this.props.onHandleSave()}></BtnHandleSave>
        </div>
    );
};

4 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 1/26/2023 in #front-end

Need help with <Route>

Hello, I'm learning react by following a video, however I did everything the same but I came across this error below. Since the video is about 1 year ago, I'm guessing that the react has updated by then since "<Routes>" was never mentioned. How do I fix this? "Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>."

class App extends Component {
    render() {
        return (
            <div>
                <NavBar />
                <div className="content">
                    <Route path="/products" Component={Products} />
                    <Route path="/posts" Component={Posts} />
                    <Route path="/admin" Component={Dashboard} />
                    <Route path="/" Component={Home} />
                </div>
            </div>
        );
    }
}

class App extends Component {
    render() {
        return (
            <div>
                <NavBar />
                <div className="content">
                    <Route path="/products" Component={Products} />
                    <Route path="/posts" Component={Posts} />
                    <Route path="/admin" Component={Dashboard} />
                    <Route path="/" Component={Home} />
                </div>
            </div>
        );
    }
}

11 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 1/23/2023 in #front-end

Common folder names for organization in React

Hello, I started learning about react and after many videos I notice that there were a lot of folders in the src folder with many names. As of right now, I learned that there is a components folder in which have files which is reusable in other apps, a services folder in which has the data/json files and there functions to get the data, a utils folder where we have functions that help with math. Can anyone tell me the common names or the best practice to start doing with naming the folders and what types of code in the files to put in there?

5 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 1/12/2023 in #front-end

Video not showing when page loads up but fixes when you press on it.

10 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 1/11/2023 in #front-end

How do I keep the width of the video the same while changing the height in smaller screens?

3 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 11/16/2022 in #front-end

Question about NodeJS with Typescript and how to put it up on github.

1 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 11/10/2022 in #front-end

9 is higher than 871?

rowsDuplicate.sort((rowA, rowB) => {
        let cellA;
        let cellB;

        // Get the content of cells
        cellA = rowA.querySelectorAll('td')[1].innerHTML;
        cellB = rowB.querySelectorAll('td')[1].innerHTML;

        // descending order
        switch (true) {
            case cellA > cellB:
                return -1;
            case cellA < cellB:
                return 1;
            case cellA === cellB:
                return 0;
        }
    })

rowsDuplicate.sort((rowA, rowB) => {
        let cellA;
        let cellB;

        // Get the content of cells
        cellA = rowA.querySelectorAll('td')[1].innerHTML;
        cellB = rowB.querySelectorAll('td')[1].innerHTML;

        // descending order
        switch (true) {
            case cellA > cellB:
                return -1;
            case cellA < cellB:
                return 1;
            case cellA === cellB:
                return 0;
        }
    })

I have this sort, and for some reason 9 is greater than 871 for some reason. Is there a way to make it so that it reads the entire number not just the first digit?

3 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 11/3/2022 in #front-end

When using array sort, how to ignore the table header?

Here is what I have tried

function sortTable(headerClicked, column) {
    tableContainerRows = tableContainer.querySelectorAll('tr');

    const rowsDuplicate = Array.from(tableContainerRows);

    rowsDuplicate.sort(function (rowA, rowB) {
        console.log(rowA, rowB);

        // Get the content of cells
        const cellA = rowA.querySelectorAll('td')[column].innerHTML;
        console.log(cellA);
        const cellB = rowB.querySelectorAll('td')[column].innerHTML;
        console.log(cellB);
    })
}

function sortTable(headerClicked, column) {
    tableContainerRows = tableContainer.querySelectorAll('tr');

    const rowsDuplicate = Array.from(tableContainerRows);

    rowsDuplicate.sort(function (rowA, rowB) {
        console.log(rowA, rowB);

        // Get the content of cells
        const cellA = rowA.querySelectorAll('td')[column].innerHTML;
        console.log(cellA);
        const cellB = rowB.querySelectorAll('td')[column].innerHTML;
        console.log(cellB);
    })
}

The only error I have is that it gets the 1st row which is the headers and that becomes a problem

6 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 11/3/2022 in #front-end

trouble with split() and also weird quotes around a key in the object

I have a csv file which I'm going through each line and spliting it with text.split(",");. However, the problem is when I go to titles like this: "Pokemon: Let's Go, Pikachu/Eevee". This splits into "Pokemon: Let's Go, Pikachu and /Eevee" instead of "Pokemon: Let's Go, Pikachu/Eevee". Dose anyone know a way around this? I know that it will split because it has , in the title but is there a way around this? Maybe something like only split , if not surrounded by " " quotes?

47 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 11/2/2022 in #front-end

Reading, flitering, and showing CSV files

Hello, I was wondering if anyone know a website somewhere or know how to read csv files with javascript and also filter it? I have google through many pages however it seems to be popular with python but I was wondering if anyone knew a way with javascript?

43 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 10/14/2022 in #front-end

what is the event listener wheel for phone?

question, what is the event listener "wheel" for phone? Was wondering why the phone dosen't scroll is because it dosen't have a mouse wheel XDDDDDDDDDDDD I'm using the wheel event listener for delta however I can't do that with the phone since the phone dosen't have a mouse wheel XD

5 replies

KPCKevin Powell - Community

•Created by kingtigerknight on 10/12/2022 in #back-end

jq memory issue

jq is using too much ram, is there a way to limit the amount of memory usage?

1 replies