Category: javascript

Category Added in a WPeMatico Campaign

Google Dynamic Links API cann’t accessed client-side

I want to use the Google Dynamic Links APi client-side currently when I try to fetch data from the API through localhost I receive error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://books.google.com/books?bibkeys=ISBN:0451526538&jscmd=viewapi. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

here is my code

await fetch(`https://books.google.com/books?bibkeys=ISBN:0451526538&jscmd=viewapi`, {
      method: 'GET', 
      mode: 'cors', 
      headers: {
        'Access-Control-Allow-Origin':'*',
        'Content-Type': 'application/json'
      },
    });

Now I want to access that API client-side as the
the documentation says but I can not fetch the data because of the cross-origin-policy

.getElementsAtEventForMode using chart id in chart.js

I’m trying to make a onClick handler function in chart.js which returns the label of the bar clicked in. I’m aware of the funciton .getElementsAtEventForMode but it requires for you to have the chart’s name. This is a problem because I’m using components and am not calling the chart directly so all the graphs have the same name. I was wandering if there was a way to call this function using perhaps the component’s vue.js id.
Thank you in advance!

Elements stacking in fixed top navbar bootstrap5

I am currently working on a website with a fixed top navbar. The website navbar looked like this:

correct

I was asked to place the logo of the site next to the side menu toggle item (those three stacked dashes to the left.

I did so by changing this code snippet:

<header class="header" id="header">

        <div class="header_toggle" id="toggle-up"> <i class="fas fa-bars secondary-bs-color" id="header-toggle"></i></div>

        <div id="nav-buttons" class="me-5 d-sm-block">
            <button type="button" class="white-bs-color fw-bold btn btn-primary me-4" data-bs-toggle="modal" data-bs-target="#login-modal">Login</button>
            <button type="button" class="white-bs-color fw-bold btn btn-secondary" data-bs-toggle="modal" data-bs-target="#registration-modal">Register</button>
        </div>

</header>

to this:

<header class="header" id="header">

        <div class="d-inline">
            <div class="header_toggle" id="toggle-up"> <i class="fas fa-bars secondary-bs-color" id="header-toggle"></i></div>
            <img class="w-5 h-auto" src="./img/Logo Vegaz Bet MOEDA.png" alt="">
        </div>
        <div id="nav-buttons" class="me-5 d-sm-block">
            <button type="button" class="white-bs-color fw-bold btn btn-primary me-4" data-bs-toggle="modal" data-bs-target="#login-modal">Login</button>
            <button type="button" class="white-bs-color fw-bold btn btn-secondary" data-bs-toggle="modal" data-bs-target="#registration-modal">Register</button>
        </div>

</header>

Yet, after doint it, all elements in the top bar started to stack and I can’t figure out why…

incorrect

Can anyone help me understand why this is happening and how to fix it? Here is my full code (custom.css is the bootstrap library)

HTML:

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

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

    <link href="./css/custom.css" rel="stylesheet">
    <link href="./css/navlayout.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet">

    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script defer src="./js/navlayout.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>

    <link rel="icon" href="./img/icon.png" />

    <title>Vegaz.bet</title>
</head>

<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover;">
    <header class="top-header align-middle">
        <div class="mx-auto"></div>
    </header>
    <header class="header" id="header">

        <div class="header_toggle" id="toggle-up"> <i class="fas fa-bars secondary-bs-color" id="header-toggle"></i></div>

        <div id="nav-buttons" class="me-5 d-sm-block">
            <button type="button" class="white-bs-color fw-bold btn btn-primary me-4" data-bs-toggle="modal" data-bs-target="#login-modal">Login</button>
            <button type="button" class="white-bs-color fw-bold btn btn-secondary" data-bs-toggle="modal" data-bs-target="#registration-modal">Register</button>
        </div>
    </header>
    <div class="l-navbar" id="nav-bar">
        <nav class="nav">
            <div>
                <div class="nav_list">
                    <a href="#" class="nav_link active"> <i class="fas fa-chart-line nav_icon secondary-bs-color"></i> <span class="nav_name">Crash</span> </a>
                    <a href="#" class="nav_link"> <i class="far fa-life-ring nav_icon secondary-bs-color"></i> <span class="nav_name">Roullete</span> </a>
                    <a href="#" class="nav_link"> <i class="fas fa-dice nav_icon secondary-bs-color"></i> <span class="nav_name">Dice</span> </a>
                    <a href="#" class="nav_link"> <i class="fas fa-coins nav_icon secondary-bs-color"></i> <span class="nav_name">Heads or Tails</span> </a>
                    <hr class="bg-white border-2 border-top border-white">
                    <a href="#" class="nav_link"> <i class="fas fa-hand-holding-usd nav_icon white-bs-color"></i> <span class="nav_name">Deposit /<br> Withdrawal</span> </a>
                    <a href="#" class="nav_link"> <i class="far fa-question-circle nav_icon white-bs-color"></i> <span class="nav_name">Help</span> </a>
                </div>
            </div>
            
        </nav>
    </div>
    <div class="r-navbar invisible" id="nav-bar-chat">

        <div id="invisible-toggle-div" class="container pb-5 invisible">

            <div class="row h-20 mb-1">
                <button id="close-chat" type="button" class="position-absolute top-8 start-10 btn-close btn-close-white" aria-label="Close"></button>
                <button type="button" class="w-50 position-absolute top-7 end-10 white-bs-color fw-bold btn btn-primary"><span class="text-nowrap">Vegaz Chat</span></button>
            </div>

            <div class="row h-60">
                <div id="chatContainer" class="chat-font d-flex flex-column bd-highlight position-absolute top-15 end-5 w-90 h-75">
                    
                    <span class="time-span-chat ms-2">11:29</span>
                    <div class="card bg-field-grey text-white mb-1">
                        <span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: yellow">youranus420:</span> oi putões</span>
                    </div>
                    
                    <span class="time-span-chat ms-2">11:29</span>
                    <div class="card bg-field-grey text-white mb-1">
                        <span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: yellow">youranus420:</span> bora crash?</span>
                    </div>
                    
                    <span class="time-span-chat ms-2">11:30</span>
                    <div class="card bg-field-grey text-white mb-1">
                        <span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: purple">elon musk:</span> Olha o nome do cara kkkkk</span>
                    </div>
                        
                </div>
            </div>

            <div class="row h-10">
                <div class="bg-primary text-center position-absolute end-3 bottom-6 w-94 h-5">
                    <div class="input-group mb-3">
                        <input type="text" class="chat-font form-control" placeholder="Your message" aria-label="Message">
                        <button class="chat-font btn btn-outline-secondary" type="button" id="button-addon2">Send</button>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <!--Container Main start-->
    <div class="height-100">
        <h4>Main Components</h4>

        <a class="position-absolute bottom-5 end-5 float-icon-chat" id="chatButton" role="button">
            <span class="position-absolute top-15 start-20"><i class="far fa-comment-dots" style="font-size: 40px;"></i></span>
        </a>
    </div>
    <!--Container Main end-->

    <!-- Login modal -->
    <div class="modal fade modal-fullscreen-sm-down" id="login-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog bg-primary">
            <div class="bg-primary text-white border border-4 border-secondary modal-content">
                <div class="border-bottom border-4 border-secondary modal-header">
                    <div class="mx-auto">
                        <button type="button" class="white-bs-color fw-bold btn btn-primary">Login</button>
                        <button type="button" class="white-bs-color fw-bold opacity-50 btn btn-primary" data-bs-dismiss="modal" aria-label="Close" data-bs-toggle="modal" data-bs-target="#registration-modal">Register</button>
                    </div>
                    <button type="button" class="position-absolute end-5 btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex flex-column bd-highlight">
                        <div class="text-center p-2 bd-highlight">
                            <img src="" alt="Logo Vegaz">
                        </div>
                        <div class="text-center fw-bold p-2 bd-highlight">
                            Login to Vegaz
                        </div>
                        <div class="text-center p-2 bd-highlight">
                            <input class="bg-field-grey text-white border-0 form-control mb-3" type="text" placeholder="Username or Email" id="login-username" aria-label="Username">
                            <input class="bg-field-grey text-white border-0 form-control mb-3" type="password" placeholder="Password" id="login-password" aria-label="Password">
                        </div>
                        <div class="text-center p-2 bd-highlight">
                            <button type="button" class="white-bs-color btn btn-primary" data-bs-dismiss="modal" aria-label="Close" data-bs-toggle="modal" data-bs-target="#recover-modal">Forgot your password?</button>
                        </div>
                    </div>
                </div>
                <div class="border-top border-4 border-secondary modal-footer">
                    <button type="button" class="mx-auto btn btn-secondary" data-bs-dismiss="modal">Login</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Recover password modal -->
    <div class="modal fade modal-fullscreen-sm-down" id="recover-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog bg-primary">
            <div class="bg-primary text-white border border-4 border-secondary modal-content">
                <div class="border-bottom border-4 border-secondary modal-header">
                    <div class="mx-auto">
                        <button type="button" class="white-bs-color fw-bold btn btn-primary">Recover your password</button>
                    </div>
                    <button type="button" class="position-absolute end-5 btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex flex-column bd-highlight mb-3">
                        <div class="text-center p-2 bd-highlight">
                            <img src="" alt="Logo Vegaz">
                        </div>
                        <div class="text-center fw-bold p-2 bd-highlight">
                            We'll send you an email with instructions to recover your account
                        </div>
                        <div class="text-center p-2 bd-highlight">
                            <input class="bg-field-grey text-white border-0 form-control mb-3" type="email" placeholder="Email" id="recover-email" >
                        </div>
                    </div>
                </div>
                <div class="border-top border-4 border-secondary modal-footer">
                    <button type="button" class="mx-auto btn btn-secondary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#recover-confirmation-modal">Recover password</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Recover password confirmation modal -->
    <div class="modal fade modal-fullscreen-sm-down" id="recover-confirmation-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog bg-primary">
            <div class="bg-primary text-white border border-4 border-secondary modal-content">
                <div class="border-bottom border-4 border-secondary modal-header">
                    <div class="mx-auto text-center fw-bold">
                        Recover your password
                    </div>
                    <button type="button" class="position-absolute end-5 btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex flex-column bd-highlight mb-3">
                        <div class="text-center p-2 bd-highlight">
                            <img src="" alt="Logo Vegaz">
                        </div>
                        <div class="text-center p-2 bd-highlight">
                            You'll receive an email shortly with instructions to recover your password. Check your inbox!
                        </div>
                    </div>
                </div>
                <div class="border-top border-4 border-secondary modal-footer">
                    <button type="button" class="mx-auto btn btn-secondary" data-bs-dismiss="modal">Understood</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Registration modal -->
    <div class="modal fade modal-fullscreen-sm-down" id="registration-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog bg-primary">
            <div class="bg-primary text-white border border-4 border-secondary modal-content">
                <div class="border-bottom border-4 border-secondary modal-header">
                    <div class="mx-auto">
                        <button type="button" class="white-bs-color fw-bold opacity-50 btn btn-primary" data-bs-dismiss="modal" aria-label="Close" data-bs-toggle="modal" data-bs-target="#login-modal">Login</button>
                        <button type="button" class="white-bs-color fw-bold btn btn-primary">Register</button>
                    </div>
                    <button type="button" class="position-absolute end-5 btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex flex-column bd-highlight mb-3">
                        <div class="text-center p-2 bd-highlight">
                            <img src="" alt="Logo Vegaz">
                        </div>
                        <div class="text-center fw-bold p-2 bd-highlight">
                            Create your Vegaz account
                        </div>
                        <div class="text-center p-2 bd-highlight">
                            <input class="bg-field-grey text-white border-0 form-control mb-3" type="email"  placeholder="Email" id="register-email" >
                            <input class="bg-field-grey text-white border-0 form-control mb-3" type="text" placeholder="Username" id="register-username" aria-label="Username">
                            <input class="bg-field-grey text-white border-0 form-control mb-3" type="password" placeholder="Password" id="register-password" aria-label="Password">
                            <input class="bg-field-grey text-white border-0 form-control mb-3" type="password" placeholder="Password repeat" id="register-password-repeat" aria-label="Password repeat">
                        </div>
                    </div>
                </div>
                <div class="border-top border-4 border-secondary modal-footer">
                    <button type="button" class="mx-auto btn btn-secondary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#registration-confirmation-modal">Register</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Registration confirmation modal -->
    <div class="modal fade modal-fullscreen-sm-down" id="registration-confirmation-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog bg-primary">
            <div class="bg-primary text-white border border-4 border-secondary modal-content">
                <div class="border-bottom border-4 border-secondary modal-header">
                    <div class="mx-auto text-center fw-bold">
                        Welcome to Vegaz
                    </div>
                    <button type="button" class="position-absolute end-5 btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex flex-column bd-highlight mb-3">
                        <div class="text-center p-2 bd-highlight">
                            <img src="" alt="Logo Vegaz">
                        </div>
                        <div class="text-center p-2 bd-highlight">
                            You're now part of the best online gaming casino community!
                            Let's play and good luck!
                        </div>
                    </div>
                </div>
                <div class="border-top border-4 border-secondary modal-footer">
                    <button type="button" class="mx-auto btn btn-secondary" data-bs-dismiss="modal">Start playing!</button>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

CSS:

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
:root {
    --top-header-top-position: 5%;
    --header-height: 3rem;
    --nav-width: 68px;
    --chat-width: 100px;
    --primary-color: var(--bs-primary);
    --secondary-color: var(--bs-secondary);
    --white-color: var(--bs-white);
    --body-font: 'Montserrat', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100;
    --z-topbar: 101;
}

*,
::before,
::after {
    box-sizing: border-box
}

.top-header {
    width: 100%;
    height: var(--top-header-top-position);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--secondary-color);
    z-index: var(--z-topbar);
    transition: .5s;
    text-align: center !important;
}

.header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: var(--top-header-top-position);
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--primary-color);
    z-index: var(--z-fixed);
    transition: .5s
}

.header_toggle {
    color: var(--primary-color);
    font-size: 1.5rem;
    cursor: pointer
}

.header_img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}

.header_img img {
    width: 40px
}

.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--primary-color);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed)
}

.r-navbar {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    background-color: var(--primary-color);
    padding: 1rem 0 0 1rem;
    transition: .5s;
    z-index: var(--z-fixed);
    padding: 1rem 0 0 1rem;
}

.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    margin-top: 5rem;
}

.nav_logo,
.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .5rem 0 .5rem 1.5rem;
    text-decoration: none;
}

.nav_logo {
    margin-bottom: 2rem
}

.nav_logo-icon {
    font-size: 1.25rem;
    color: var(--white-color)
}

.nav_logo-name {
    color: var(--white-color);
    font-weight: 700
}

.nav_link {
    position: relative;
    color: var(--white-color);
    margin-bottom: 1.5rem;
    transition: .3s
}

.nav_link:hover {
    color: var(--white-color)
}

.nav_icon {
    font-size: 1.25rem;
}

.secondary-bs-color {
    color: var(--bs-secondary)
}

.white-bs-color {
    color: var(--white-color)
}

.show-left-nav {
    left: 0;
    width: calc(var(--nav-width) + 156px);
}

.show-right-nav {
    width: 100%;
}

.body-menu-pd {
    padding-left: calc(var(--nav-width) + 188px); 
}

.body-chat-pd {
    padding-right: calc(var(--chat-width) + 1rem);
}

.chat-font {
    font-size: small;
}

.time-span-chat {
    font-size: smaller;
    color: var(--white-color);
}

#chatContainer {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
}

#chatContainer::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.active {
    color: var(--white-color)
}

.active::before {
    content: '';
    position: absolute;
    left: 0;
    width: 2px;
    height: 32px;
    background-color: var(--white-color)
}

.height-100 {
    height: 100vh
}

.float-icon-chat {
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-radius: 50px;
    text-align: center;
    vertical-align: middle;
}

@media screen and (min-width: 768px) {
    .header {
        height: calc(var(--header-height) + 1rem);
        padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
    }
    .header_img {
        width: 40px;
        height: 40px
    }
    .header_img img {
        width: 45px
    }
    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 0
    }
    .r-navbar {
        right: 0;
        padding: 1rem 0 0 1rem;
        width: 0;
    }
    .show-left-nav {
        width: calc(var(--nav-width) + 156px)
    }
    .show-right-nav {
        width: calc(var(--chat-width) + 156px)
    }
    .body-menu-pd {
        padding-left: calc(var(--nav-width) + 188px);   
    }
    .body-chat-pd {
        padding-right: calc(var(--chat-width) + 156px)
    }
}

JS:

document.addEventListener("DOMContentLoaded", function(event) {

    const showNavbar = (toggleId, navId, bodyId, headerId) => {
        const toggle = document.getElementById(toggleId),
            nav = document.getElementById(navId),
            bodypd = document.getElementById(bodyId),
            headerpd = document.getElementById(headerId),
            toggleup = document.getElementById("toggle-up")

        // Validate that all variables exist
        if (toggle && nav && bodypd && headerpd) {
            toggleup.addEventListener('click', () => {
                // show navbar
                nav.classList.toggle('show-left-nav');
                //hide navbar buttons on sm
                document.getElementById("nav-buttons").classList.toggle('d-none');
                // change icon
                toggle.classList.toggle('fa-times');
                // add padding to body
                bodypd.classList.toggle('body-menu-pd');
                // add padding to header
                headerpd.classList.toggle('body-menu-pd');
            });
        }
        
    }

    showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header');


    /*===== LINK ACTIVE =====*/
    const linkColor = document.querySelectorAll('.nav_link');

    function colorLink() {
        if (linkColor) {
            linkColor.forEach(l => l.classList.remove('active'));
            this.classList.add('active');
        }
    }
    linkColor.forEach(l => l.addEventListener('click', colorLink));

    // show chat
    const showChat = (toggleId, navId, bodyId, headerId) => {
        const toggle = document.getElementById(toggleId),
            nav = document.getElementById(navId),
            bodypd = document.getElementById(bodyId),
            headerpd = document.getElementById(headerId),
            closeChat = document.getElementById("close-chat")

        // Validate that all variables exist
        if (toggle && nav && bodypd && headerpd) {
            const toggleFunc = () => {
                // show navbar
                document.getElementById("invisible-toggle-div").classList.toggle('invisible');
                nav.classList.toggle('invisible');
                nav.classList.toggle('show-right-nav');
                
                // change icon
                toggle.classList.toggle('invisible');
                // add padding to body
                bodypd.classList.toggle('body-chat-pd');
                // add padding to header
                headerpd.classList.toggle('body-chat-pd');
            }
            toggle.addEventListener('click', toggleFunc);
            closeChat.addEventListener('click', toggleFunc);
        }
        
    }

    showChat('chatButton', 'nav-bar-chat', 'body-pd', 'header');
    
});

How to capture all 13 digits after that regex non-capture group

I’m trying to capture a SKU of a product from localstorage in javascript

the item is a html string and i’m trying to figure out a regex that capture that SKU id

the localstorage return looks like this:

<li class="cart__item">SKU: MLB2046549757 | NAME: Notebook Multilaser Legacy Book Pc310 Preta 14.1 , Intel Celeron N3000 4gb De Ram 64gb Ssd, Intel Hd Graphics 1366x768px Windows 10 Home | PRICE: $1415</li><li class="cart__item">SKU: MLB2046549757 | NAME: Notebook Multilaser Legacy Book Pc310 Preta 14.1 , Intel Celeron N3000 4gb De Ram 64gb Ssd, Intel Hd Graphics 1366x768px Windows 10 Home | PRICE: $1415</li>

i tried (?:SKU: ){13} regex to get e.g. MLB2046549757 SKU id but it didn’t worked.

I need to capture all 13 digits after SKU: and save it in an array.

Anyone have an idea how could i do that?

Convert Javascript Date object to Excel serial number

So I have a Javascript date object with year, month, days, hours, minutes, seconds, and milliseconds data and I need to convert this object to an Excel serial number but I didn’t find a way to do that.
I found how to convert only a Date object but the way I found didn’t consider the time part.

Any suggestions?
Thank you,
Regards.

I am calling a authentication token using an api call but it keeps returning new tokens

I am sending an api call to cognito to get a jwtToken in return. I am using hooks for the API call but the issue is that I am getting infinite number tokens in return as the API call keeps getting data.

useEffect(() => {
    Axios.post(`${apiUrl}/api/auth/login`, loginInfo).then((res) =>
      setToken(res.data.accessToken.jwtToken)
    );
    Axios.get(getEventsUrl, config).then((response) =>
      setEventsData(response.data)
    );
  }, [loginInfo]);

How do I end only one request?

Add div just below the td.button that called it

I have a table with some information, one of the columns has a button that when clicking displays a div, I need this div to be displayed below the td.button that invoked it

https://jsfiddle.net/L4jh0rsw/23/

I would like to use Jquery and/or JavaScript for the resolution

<html>
<table border="1">
<tr>
  <th>Button</th>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
  <th>Column 4</th>
</tr>
<tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr><tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr><tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr><tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr>
</table>
</html>

<br>

<div id="div" style="display: none">
  information about that rowxcolumn
</div>

$(".class").on("click", function(){ 

    $("#div").show();   
  
});

Axios POST request on iOS device times out but works fine on desktop

I’m working on a Nuxt JS application that uses the axios nodule and am experiencing a strange problem that appears to be intermittent but appears to only be happening on iOS devices and wondered if there’s any thing specific I could be checking.

My form submits data to a Laravel API and waits for a response, I’ve got a 50 second timeout baked into my client-side post request for axios and using the Laravel Telescope package I can see that the request was handled successfully and did return a response, despite this the client-side code still timed out.

My suspicion thus far is network or iOS/device/platform changes:

// submit application
this.$axios.post(`${this.$config.apiUrl}/api/application`, this.$store.state.application.application, {
  timeout: 50 * 1000
}).then(res => {

  // invalid (shows error screen and messages)
  if (!this.applicationSubmissionIsValid(res.data)) {
    return
  }

  // SUCCESS!
  this.configureApplicationPolling(res.data.threadID, res.data.check_frequency)
}).catch(err => {
  const status = err.response ? err.response.status : null
  this.setSubmissionErrors(4, status)
}).finally(() => {
  window.scrollTo(0, 0)
  this.meta.isSubmittingApplication = false
  this.meta.applicationSubmitted = true
})

Findings so far:

  • I’ve tried connecting my phone to my macbook and inspect the element, there’s no status code returned.
  • Out of a dozen attempts on iOS, it has worked once whilst continuing to work just fine on other devices
  • Requests handled correctly by the back-end
  • I’ve also had the timeout for the

Not sure what else to check

Looping eventListener?

Hi you guys I’m new to JS and programming in general. Just started learning and was wondering out of curiosity is there a way to loop through click eventListener. So Each time I click on my h1 header with a title id I get the innerHTML changed kind of like a infinite shuffle ?

const element = document.getElementById("title");


element.addEventListener("click", function(){
    element.innerHTML = "Cool Right?";

    element.addEventListener("click", function(){
        element.innerHTML = "SoundPad";
    });
});

Pass data of dropped files inside a div to another page

document.getElementById('drag_drop').ondrop = function(event)
{
    event.preventDefault();

    var form_data  = new FormData();
    var drop_files = event.dataTransfer.files;

    for(var count = 0; count < drop_files.length; count++)
        form_data.append("images[]", drop_files[count]);

    var ajax_request = new XMLHttpRequest();

    ajax_request.open("post", "upload.php");
    ajax_request.send(form_data);
}
#drag_drop{
  background-color : #f9f9f9;
  border : #ccc 4px dashed;
  line-height : 250px;
  padding : 12px;
  font-size : 24px;
  text-align : center;
}
<div id="drag_drop">Drag & Drop File Here</div>

This code allow you to upload files using the “drag and drop” function: I drop the files in the apposite div (#drag_drop) and with JS I create a POST request to the PHP file that will upload the files…

What I want to do is that as soon as the user drops the files redirect to ANOTHER html page containing the script and then send the request to the PHP file.
I have no idea how not to lose the data of the files dropped inside the div during the page change (maybe inserting form_data/drop_files in a localstorage item… (?)).

NO JQUERY.

Non-monotonic line chart

I’ve created a linechart in ExtJS but came accross an obstacle. I want to create a line chart that doesn’t go to each next point in a Monotonic fashion.
Let’s say I have the following dataset:

let testData = [{
        price: 500,
        date: '01-01-2021'
    }, {
        price: 200,
        date: '01-02-2021'
    }, {
        price: 1000,
        date: '02-09-2021'
    }];

When using this data in an ExtJS linechart it will create a diagonal line between the price of 200 and 1000, this data representation is incorrect since the price did not gradually rise in this time.

My question is: How can I achieve this using ExtJS charts?

Check the visual examples for the current and desirable result.

Please let me know if you need any extra information.

Monotonic (current result):
Monotonic linechart

Non-monotonic (Desirable result)
Non-monotonic

Javascript array in external file?

I have a large profanity list, as an array. Since this list is so big, I don’t want it in my main file, but externally. I want something like this:

const blacklist = require(./blacklist.js)

And currently it is something like this:

const blacklist = [
"1",
"2",
"3"
]

The rest of the code here is:

 blacklist.forEach((word) => {
      if (message.content.toLowerCase().includes(word));
      message.delete();
      message.channel.send("Let's try to keep it family friendly!");

And will that last piece of code still work?

Conditional data view in datatable to user

I am designing attendance report at the moment using Datatable. Some column have to be hidden or shown to some users.

Condition : If date mentioned in table header matches with current date, then only current user who logged in would be able to login and see only that table column, other columns with other dates should be hidden.
But no clue. I am at beginner level in JS. Please help.