Blackwolf Posts - Answer Overflow

Blackwolf

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

How do I get HTML Color Picker to return RGB values

I am more than capable of converting the Hex values to RGB, but just wondering if there was a setting on the Color Input to automatically return RGB or RGBA values instead of the Hex ones

25 replies

KPCKevin Powell - Community

•Created by Blackwolf on 4/1/2024 in #front-end

Why is my variable not Global ?

I have successfully fetched data from an API, and can console.log it in one function but not another. How do I make it globally accessible please?

    let movieList
    let currentMovie = 0

    getMovies()
    displayCurrentMovie()

    async function getMovies() {
        movieList = await fetchMovieData()
        console.log(movieList) // THIS WORKS
    }

    function displayCurrentMovie() {
        console.log(movieList) // THIS DOES NOT WORK
    }

    // Get the 20 most popular movies from TMDB
    async function fetchMovieData() {
        const API_URL = 'https://api.themoviedb.org/3/movie/popular'
        const API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c'

        const response = await fetch(
            `${API_URL}?api_key=${API_KEY}&language=en-GB`
        )
        const results = await response.json()
            .then((data) => {
                movieList = data.results
            })
        return movieList
    }

    let movieList
    let currentMovie = 0

    getMovies()
    displayCurrentMovie()

    async function getMovies() {
        movieList = await fetchMovieData()
        console.log(movieList) // THIS WORKS
    }

    function displayCurrentMovie() {
        console.log(movieList) // THIS DOES NOT WORK
    }

    // Get the 20 most popular movies from TMDB
    async function fetchMovieData() {
        const API_URL = 'https://api.themoviedb.org/3/movie/popular'
        const API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c'

        const response = await fetch(
            `${API_URL}?api_key=${API_KEY}&language=en-GB`
        )
        const results = await response.json()
            .then((data) => {
                movieList = data.results
            })
        return movieList
    }

17 replies

KPCKevin Powell - Community

•Created by Blackwolf on 3/11/2024 in #front-end

CSS Z-index changing unexpectedly

I have simplified this just to show what is going on. I have a box (originally a button), with a 3D effect. When it is hovered over, the box rises by 2 pixels and the 3D effect drops by 3 pixels (hiding it). However, for some reason the 3D effect behind the box moves in front. Can anyone explain why this is please? https://codepen.io/iBlackwolf/pen/ZEZWdQx

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Hmmmmmmm</title>
        <style>
            body {
                width: 100vw;
                height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            #box {
                position: relative;
                width: 150px;
                height: 150px;
                border: none;
                border-radius: 30px;
                background-color: #f00;
                font-size: 20px;
                color: #fff;
                cursor: pointer;
            }

            #box::before {
                position: absolute;
                content: '';
                width: 146px;
                height: 150px;
                left: 2px;
                top: -5px;
                border: none;
                border-radius: 30px;
                background-color: #44f;
                z-index: -1;
            }

            #box:hover {
                transform: translateY(-2px);
            }

            #box:hover::before {
                transform: translateY(3px);
            }
        </style>
    </head>

    <body>
        <div id="box"></div>
    </body>

</html>

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Hmmmmmmm</title>
        <style>
            body {
                width: 100vw;
                height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            #box {
                position: relative;
                width: 150px;
                height: 150px;
                border: none;
                border-radius: 30px;
                background-color: #f00;
                font-size: 20px;
                color: #fff;
                cursor: pointer;
            }

            #box::before {
                position: absolute;
                content: '';
                width: 146px;
                height: 150px;
                left: 2px;
                top: -5px;
                border: none;
                border-radius: 30px;
                background-color: #44f;
                z-index: -1;
            }

            #box:hover {
                transform: translateY(-2px);
            }

            #box:hover::before {
                transform: translateY(3px);
            }
        </style>
    </head>

    <body>
        <div id="box"></div>
    </body>

</html>

25 replies

KPCKevin Powell - Community

•Created by Blackwolf on 12/5/2023 in #front-end

My CSS "absolute, left 10px" moves when animated

Here is my Codepen project https://codepen.io/iBlackwolf/pen/RwvEKOZ I am trying to make my menu shrink in size when closed, but remain 10px from the left of the div. I have no idea why is moves to the right. The actual animation is supposed to take 1 second, but I have slowed it down so you can see the effect better

11 replies

KPCKevin Powell - Community

•Created by Blackwolf on 10/2/2023 in #front-end

Why is my TRY ... CATCH not working?

My CATCH is not catching the error, what am I doing wrong please? HTML

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Github Profiles</title>
    </head>

    <body>
        <script src="script.js"></script>
    </body>

</html>

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Github Profiles</title>
    </head>

    <body>
        <script src="script.js"></script>
    </body>

</html>

JAVASCRIPT

async function getUser() {
    try {
        const res = await fetch('https://api.github.com/users/uiouiouiouiouio');
        const data = await res.json()
        console.log(data)
    } catch (err) {
        console.log('Error: ' + err)
    }
}

getUser()

async function getUser() {
    try {
        const res = await fetch('https://api.github.com/users/uiouiouiouiouio');
        const data = await res.json()
        console.log(data)
    } catch (err) {
        console.log('Error: ' + err)
    }
}

getUser()

16 replies

KPCKevin Powell - Community

•Created by Blackwolf on 9/22/2023 in #front-end

How do I get HEIGHT or MAX-HEIGHT to work dynamically with TRANSITION in CSS?

I have an accordion menu, which I would like to open and close smoothly Although this appears fairly smooth, what in fact is happening is the transition is working over the full 1000px of the max-height and not the actual height. If you open all the sub-menus of section 5 and then open and close the main section, and then compare that to opening and closing section 1, you will see the apparent latency as you catch the tail-end of the transitions. Adding "height: auto", or "height: 100%" changes the whole thing to just snap open and closed Does anyone have any clues please? Link to my CodePen project: https://codepen.io/iBlackwolf/pen/bGOazwx Feel free to critique any of my code

7 replies

KPCKevin Powell - Community

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

Which is the best way to present CSS?

Both of the following divs are identical, but I have seen both methods of applying CSS. Most people seem to teach the former, but the likes of Amazon and Facebook use the latter. Just wondering if there are any advantages to either. Maybe admin could create a poll to see which is most popular 😄

<style>
    .containerOne {
        width: 100px;
        height: 100px;
        padding: 10px;
        border: solid 2px black;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .w100 {
        width: 100px;
    }

    .h100 {
        height: 100px;
    }

    .p10 {
        padding: 10px;
    }

    .b2b {
        border: solid 2px black;
    }

    .br50pc {
        border-radius: 50%;
    }

    .df {
        display: flex;
    }

    .fd-c {
        flex-direction: column;
    }

    .jc-c {
        justify-content: center;
    }

    .ta-c {
        text-align: center;
    }
</style>

<div id="containerOne" class="containerOne">
    CONTAINER ONE
</div>

<div id="containerTwo" class="w100 h100 p10 b2b br50pc df fd-c jc-c ta-c">
    CONTAINER TWO
</div>

<style>
    .containerOne {
        width: 100px;
        height: 100px;
        padding: 10px;
        border: solid 2px black;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .w100 {
        width: 100px;
    }

    .h100 {
        height: 100px;
    }

    .p10 {
        padding: 10px;
    }

    .b2b {
        border: solid 2px black;
    }

    .br50pc {
        border-radius: 50%;
    }

    .df {
        display: flex;
    }

    .fd-c {
        flex-direction: column;
    }

    .jc-c {
        justify-content: center;
    }

    .ta-c {
        text-align: center;
    }
</style>

<div id="containerOne" class="containerOne">
    CONTAINER ONE
</div>

<div id="containerTwo" class="w100 h100 p10 b2b br50pc df fd-c jc-c ta-c">
    CONTAINER TWO
</div>

12 replies

KPCKevin Powell - Community

•Created by Blackwolf on 5/16/2023 in #back-end

Why is the zero-indexed item in my $array not recognised?

<?php
    $array = ["1", "3", "5", "7", "9"];

    $compare = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

    foreach ($compare as $c) {
        echo '$array ';
        if (array_search($c, $array, true)) {
            echo 'does ';
        } else {
            echo 'does not ';
        }
        echo "contain $c <br>";
    }

<?php
    $array = ["1", "3", "5", "7", "9"];

    $compare = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

    foreach ($compare as $c) {
        echo '$array ';
        if (array_search($c, $array, true)) {
            echo 'does ';
        } else {
            echo 'does not ';
        }
        echo "contain $c <br>";
    }

results: $array does not contain 0 $array does not contain 1 $array does not contain 2 $array does contain 3 $array does not contain 4 $array does contain 5 $array does not contain 6 $array does contain 7 $array does not contain 8 $array does contain 9

43 replies

KPCKevin Powell - Community

•Created by Blackwolf on 12/8/2022 in #back-end

How do I display a single entry from an array from MYSQL

This works ...

$result = mysqli_query($conn, "SELECT * from $table");
          $pix = array();
          while ($row = $result->fetch_assoc()) {
           $pix[] = $row;
          }
          foreach ($pix as $pic) {
           echo "PID: {$pic['PID']}<br>"
            . "Title: {$pic['title']}<br>"
            . "Filename: {$pic['filename']}<br><br>";
          }

$result = mysqli_query($conn, "SELECT * from $table");
          $pix = array();
          while ($row = $result->fetch_assoc()) {
           $pix[] = $row;
          }
          foreach ($pix as $pic) {
           echo "PID: {$pic['PID']}<br>"
            . "Title: {$pic['title']}<br>"
            . "Filename: {$pic['filename']}<br><br>";
          }

How do I display just the entry with PID value of "5" from the array?

35 replies

Gaming

Programming