Category: javascript

sh: 1: nuxt: not found I’m always getting this error when trying to run the docker container.
It’s only working when I have node modules and a .nuxt folder mounted from my local. As soon as I delete them, that docker container starts giving the same error.
Here is my dockerfile:

FROM node:16.14
WORKDIR /app
ADD package.json ./
RUN npm install
ADD . .

Here is my docker-compose.yml:

version: "3.9"
services:
  web:
    build: .
    restart: always
    container_name: myapp-nuxt
    volumes:
      - ".:/app"
    depends_on:
      - "server"
    environment:
      - NUXT_HOST=0.0.0.0
      - NUXT_PORT=3001
    network_mode: "host"
    command: npm run dev

PS – I tried following almost all tutorials. Issue is same with all of them.

I added a code in that I trying to call api using get method but is is not taking the method when on click button is pressed in order to work the button what should I need to do

Context:

In my web app I create several groups of elements all positioned relative to each other in 3d space. All elements have transform-style: preserve-3d. A parent element is used to rotate, scale, and move all these elements together in response to user navigation.

Some of these elements are “portals,” rectangular windows through which several other elements might be visible. It is important to note that the elements within these “portals” must exist within the same global 3d space (not just 2d) as elements outside their parent portal.

These “portals” have overflow: hidden in order to hide overflowing elements within them.

As per the w3 spec, overflow is one of several css property values that group objects together and creates a 2d “flattened” rendering context; effectively the same result as “transform-style: flat;”

Question:

I must find some way to inverse (cancel-out) the transformation matrix created by transform-style: flat; and create an identical 3D rendering context to one preserved using transform-style: preserve-3d;

All 3D css transforms are represented by a 3d matrix internally. In the case of transform-style: flat the user-agent is doing some mysterious “flattening” math on its own transformation matrix. Then this matrix gets applied to its children, creating the illusion that its children are all flattened in their parent’s pane. It should be possible to bypass this effect with a little matrix math.

Unfortunately, the w3 spec makes no specification of what this “flattening” means mathematically; they are rather vague on the subject, simply calling it a “flattened representation of their (the element’s) content” that “has no depth.”

I can’t figure out what matrix math needs to be done to reproduce the “flattening” effect. If the algorithm could be reverse engineered, this “flattening” behavior could be easily negated with an inverted matrix. A secondary element inside each portal element could be used to apply this inverted matrix as a transform, thereby negating the “flattened” transform and correctly restoring 3d position/rotation/perspective.

Shown below is a demo demonstrating that is is absolutely possible to create the impression of depth within a flattened parent. In this case, I naively apply the inverse of the top-most parent’s transform. Unfortunately, inverting a “flattened” matrix is not so simple:

Demo and Links:

• JSFiddle demo unchanged for testing
• JSFiddle demo with the naive algorithm demonstration
• W3 spec
• MDN on transform-style

Notes:

• Solutions involving bypassing the problem using masks, clip-paths, other likely won’t work since they are also grouping property values
• In addition to the above, clip-paths have rendering issues on chrome and firefox
• Algorithm should work for different parent positions, rotations, scales and perspective. I’m not looking for a magic transform value that will fix my example and my example only.
• I’ve experimented solving this issue using several independent 3d contexts layered on top of each other. Clip paths were used to cut out portals. However, this resulted in issues when portals need to be obscured by other portals or elements within other layers.
• I am open to other alternative suggestions given the context of my project.
• A similar question has been asked before, however in a much different context where the OP is looking for a css-only solution: CSS: “overflow: hidden” alternative that doesn’t break 3D transforms

I can’t access this button when I try to access on some other file. It is working when I do it inside first file but not able to do on file 2?
BTW, Css is working fine, if I create a CSS file and add some styling to the elements, it works, but not the javascript

file1.js
product_carousel_wrapper.innerHTML = recent.map(productData => 
`
  <h1>Hello</h1>
  <button class="click">CTest</button>
  <h1>Bye</h1>
`
).join('');

file2.js

document.querySelector('.click').addEventListener('click', () => {
  alert('Heyy);
});

I fetch this data from the api

array : { “Blue”: 8646, “Red”: 3451, “Green”: 2342}

then i want to split this into two array

arrayColor : [“Blue”, “Red”, “Green”]

arrayNumber : [8646, 3451, 2342]

i try using split function but it didn’t work, when i check for array.length, console said it undefined.

when i console.log(array)

it show like this

Proxy { “Blue”: 8646, “Red”: 3451, “Green”: 2342}

Help me please.

I passing callback function to foo directive using & binding:

<div foo="onFoo()"></div>

And I have callback on the scope. but when I calling to callback it doesn’t invoke the passing function onFoo.

export const FooDirective = () => ({
  restrict: 'A',
  scope: {
    callback: '&',
  },
  link(scope, element, attributes) {
    console.log('in link');
    scope.callback(); // why it's not invoke the passing callback function?
  },
});

stackblitz

Any idea why? is it possible to pass function and trigger it inside the directive using & binding?

I recently stumbled upon a bug caused by .includes() method in javascript. I wanted to return the exact result in respect to case-sensitive but for some reason this does not works

["Ford", "BMW", "Fiat"].includes("bmw");
//returns false
//expected result true

I then fixed my issue with the help of .find() like below:

!!["Ford", "BMW", "Fiat"].find(el => el.toUpperCase() === "bmw".toUpperCase());
//returns true

Can someone help me understand why includes does not work in case-sensitive situations ?

I am building a simple app that is expected to render the data from http://vk-consumer:8003/v1/entity endpoint. Users should be able to access the links and explore further http://vk-consumer:8003/v1/entity/countries

This is what I have to test if I can access the endpoint, but when I run this, I get a Module not found: Error: Can't resolve 'url' in /node_modules/axios/lib/adapters'.

I also don’t know if I am getting the headers correctly. I have two keys and values that I need to be able to access the endpoints:

x-auth: f44f7d9f-53e7-41ac-89sh-57d1bc6fc93f.4cde51e9-fb15-45ce-95ff-a6c0396bd619.b77738aa-f798-4bb9-93c4-914c5c83608c

'x-audience': 'access-all'

Any idea how i can get this to render the data from the endpoint?

Code

import { useEffect, useState } from 'react';
import axios from 'axios'

function MyComponent() {
    const [error, setError] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [items, setItems] = useState([]);
    const baseURL = "http://vk-consumer:8003/v1";
    const headers = {
      'x-token': 'f44f7d9f-53e7-41ac-acd3-57d1bc6fc93f.4cde51e9-fb15-45ce-95ff-a6c0396bd619.b77738aa-f798-4bb9-93c4-914c5c83608c',
      'x-audience': 'access-all',
      "Access-Control-Allow-Origin": "*",
      
    }

    useEffect(() => {
      axios.get(`${baseURL}/entity`, { headers })
        .then(res => res.json())
        .then(
          (result) => {
            setIsLoaded(true);
            setItems(result);
          },
          // handle error
          (error) => {
            setIsLoaded(true);
            setError(error);
          }
        )
    }, [])

    if (error) {
      return <> {error.message}</>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <ul>
          {items.map(item => (
            <li key={item.id}>
              {item.name}
            </li>
          ))}
        </ul>
      );
    }
  }
  export default MyComponent;```

I quoted this link to use CSS and JS of animation library, but it doesn’t work in the background of the website. There is no problem opening it in hbuilder. What’s going on? < link rel = “stylesheet” type = “text / CSS” href = ” https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css ” />

new WOW().init();

I can use the bootstrap link normally, but this animation library doesn’t work

this is the animation i am trying to do in html CSS and js
I have tried with transition and also with some animation properties but don’t know I am in right way or not need help.

this is the animation i am trying to do in html CSS and js
I have tried with transition and also with some animation properties but don’t know I am in right way or not need help.

$(document).ready(function () {
                onClickMoveUPorDOWN();

                function onClickMoveUPorDOWN() {
                    targetToAppend = document.querySelector("#appendedBanners");

                    var btn_moveDOWN = [
                        ...document.getElementsByClassName("ClickDOWN"),
                    ];
                    var btn_moveUP = [
                        ...document.getElementsByClassName("ClickUP"),
                    ];
                    btn_moveUP.forEach((onebyone) => {
                        onebyone.addEventListener("click", ChangePositionUP);
                    });

                    btn_moveDOWN.forEach((onebyone) => {
                        onebyone.addEventListener("click", ChangePositionDOWN);
                    });
                }

                function ChangePositionUP() {

                    let currentElement = this.parentElement.parentElement; 
                    currentElement.classList.add("MovingUp");

                    let previosElement = currentElement.previousElementSibling;
                    previosElement.classList.add("MovingDown");
                    
                    
                    setTimeout(() => {
                        currentElement.classList.remove("MovingUp");
                        previosElement.classList.remove("MovingDown");
                    }, 300);


                    CurrentElement_TOMOVE = this.parentElement.parentElement;
                    // console.log(CurrentElement_TOMOVE);
                    activeClass =
                        document.getElementsByClassName("activelyMoving");
                                     
                    this.parentElement.parentElement.classList.add(
                        "activelyMoving"
                    );
                    setTimeout(function () {
                        currentElement.classList.remove("activelyMoving");
                    }, 700);
                    // CurrentElement_TOMOVE =  closest(this, 'stoptillhere')
                    previousElement_TOMOVE =
                        CurrentElement_TOMOVE.previousElementSibling;
                    targetToAppend.insertBefore(
                        CurrentElement_TOMOVE,
                        previousElement_TOMOVE
                    );
                }

                function ChangePositionDOWN() {
                   let  currentElement = this.parentElement.parentElement;
                    currentElement.classList.add("MovingDown");

                   let nextElement  = currentElement.nextElementSibling;
                    nextElement.classList.add("MovingUp");

                    setTimeout(function () {
                        currentElement.classList.remove("MovingDown");
                        nextElement.classList.remove("MovingUp");    
                    }, 300);

                    CurrentElement_TOMOVE = this.parentElement.parentElement;
                   
                    this.parentElement.parentElement.classList.add(
                        "activelyMoving"
                    );
                    setTimeout(function () {
                        currentElement.classList.remove("activelyMoving");
                    }, 700);
                    nextElement_TOMOVE =
                        CurrentElement_TOMOVE.nextElementSibling;
                    // console.log(nextElement_TOMOVE);
                    targetToAppend.insertBefore(
                        nextElement_TOMOVE,
                        CurrentElement_TOMOVE
                    );
                }
            });

.fa {
                width: 5px;
                height: 4px;
                margin-right: 5px;
            }
            .arrow {
                visibility: hidden;
                border: 1px solid #d4d4d499;
                cursor: pointer;
            }
            .arrow:hover {
                cursor: pointer !important;
            }
            /* tr {
                padding: 10px;
                background-color: #fafafc;
            } */
            tr:hover {
                background-color: #f5f5f5;
            }
            tr:hover .arrow {
                animation: scale-up-center 0.2s;
                visibility: visible;
            }
            .activelyMoving {
                background-color: #f5f5f5;
                transform: scale(1);
                /* box-shadow: 0px 0px 10px rgb(100, 100, 100); */
                box-shadow: 0px 3px 8px rgb(100, 100, 100);
                -moz-box-shadow: 0px 3px 8px rgb(100, 100, 100);
                -webkit-box-shadow: 0px 3px 8px rgb(100, 100, 100);
            }
            .activelyMoving .arrow {
                visibility: visible;
            }
            .t-row{
                transition: all 0.3s;
            }
            .MovingUp{
                background-color: #f5f5f5;
                transform: scale(1);
                /* box-shadow: 0px 0px 10px rgb(100, 100, 100); */
                box-shadow: 0px 3px 8px rgb(100, 100, 100);
                -moz-box-shadow: 0px 3px 8px rgb(100, 100, 100);
                -webkit-box-shadow: 0px 3px 8px rgb(100, 100, 100);

            }
            .MovingDown{
                background-color: #f5f5f5;
                transform: scale(1);
                /* box-shadow: 0px 0px 10px rgb(100, 100, 100); */
                box-shadow: 0px 3px 8px rgb(100, 100, 100);
                -moz-box-shadow: 0px 3px 8px rgb(100, 100, 100);
                -webkit-box-shadow: 0px 3px 8px rgb(100, 100, 100);

            }

            /* @keyframes scale-up-center {
                0% {
                    transform: scale(0.5);
                }
                100% {
                    transform: scale(1);
                }
            }
            @keyframes slide-top {
                0% {
                    -webkit-transform: translateY(0);
                    transform: translateY(0);
                }
                100% {
                    -webkit-transform: translateY(-100px);
                    transform: translateY(-100px);
                }
            }
            @keyframes slide-bottom {
                0% {
                    -webkit-transform: translateY(0);
                            transform: translateY(0);
                }
                100% {
                    -webkit-transform: translateY(100px);
                            transform: translateY(100px);
                }
            } */

            /* @keyframes flip-horizontal-bottom {
                0% {
                    -webkit-transform: rotateX(0);
                    transform: rotateX(0);
                }
                100% {
                    -webkit-transform: rotateX(-180deg);
                    transform: rotateX(-180deg);
                }
            } */

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Table Row animation</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />

        
    </head>

    <body>
        <div class="container mt-3">
            <table class="table" id="table_appendHTML">
                <thead>
                    <tr>
                        <th>Rule Name</th>
                        <th>Type</th>
                        <th>priority</th>
                        <th>status</th>
                        <th> </th>
                    </tr>
                </thead>
                <tbody id="appendedBanners" class="animate">
                    <tr id class="t-row">
                        <td>One</td>
                        <td>type 1</td>
                        <td>
                            <button class="btn btn-sm ClickUP arrow">
                                <i class="fa fa-chevron-up" aria-hidden="true"></i>
                            </button>
                            <span class="span span-1">1</span>
                            <button class="btn btn-sm ClickDOWN arrow">
                                <i
                                    class="fa fa-chevron-down"
                                    aria-hidden="true"
                                ></i>
                            </button>
                        </td>
                        <td>Active</td>
                        <td>...</td>
                    </tr>
    
                    <tr id class="t-row">
                        <td>two</td>
                        <td>type 2</td>
                        <td>
                            <button class="btn btn-sm ClickUP arrow">
                                <i class="fa fa-chevron-up" aria-hidden="true"></i>
                            </button>
                            <span
                                class="span span-2"
                                style=
                                >2</span
                            >
                            <button class="btn btn-sm ClickDOWN arrow">
                                <i
                                    class="fa fa-chevron-down"
                                    aria-hidden="true"
                                ></i>
                            </button>
                        </td>
                        <td>Active</td>
                        <td>...</td>

                    </tr>
    
                    <tr id class="t-row">
                        <td>three</td>
                        <td>type 3</td>
                        <td>
                            <button class="btn btn-sm ClickUP arrow">
                                <i class="fa fa-chevron-up" aria-hidden="true"></i>
                            </button>
                            <span class="span span-3">3</span>
                            <button class="btn btn-sm ClickDOWN arrow">
                                <i
                                    class="fa fa-chevron-down"
                                    aria-hidden="true"
                                ></i>
                            </button>
                        </td>
                        <td>Paused</td>
                        <td>...</td>


                    </tr>
                </tbody>
            </table>
        </div>
        

        
    </body>
</html>

enter image description here

Hello
I’m trying to make an infinite loop of pictures I’m the background like in the photo can someone help me please

I only found examples using jquery, but I would like to know how to add and remove classes in sequence, according to the button click, using Vanilla JS. I tried using forEach but I was only able to add all the classes at once.

.dots{
   position: relative;
   display: flex;
  justify-content: space-around;
   width: 100%;
   height: 10px;
   margin-bottom: 40px;
}

.dot{
   position: relative;
   height: 10px;
   width: 100%;
   background-color: grey;
   margin: 5px;
}

.dot.active{
   background-color: red;
}

  <div class="dots">
    <div class="dot active"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
   </div> 
   
 <button type="button" id="removeBtn">Remove</button>
 <button type="button" id="addBtn">Add</button>

When I use vite + vue3 to create a three application, I often use three to check the situation in the scene JS developer tools, but recently the plug-in always shows waiting for a scene to be observed, but the scene has indeed been loaded. And this situation is normal occasionally (very low frequency)

I have this code below:

<div class="dropdown no-arrow">
                        <a class="dropdown-toggle btn btn-primary btn-sm" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Submit <i class="fas fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                          <div class="dropdown-header">Submission Type</div>
                          <a class="dropdown-item" href="#" onclick="completion()">Completion</a>
                          <!-- <button type="submit" class="dropdown-item">Completion</button> -->
                        </div>
                      </div>
                    </div>
                    
                    <textarea id="message" type="text" name="prompt" placeholder="required field of entry" required></textarea>
                    <script>
                      function completion() {
                        fetch("/input", {
                          method: "POST",
                          headers: {'Content-Type': 'application/json'}, 
                          body: document.getElementById('message').value
                        }).then(res => {
                          console.log("Request complete! response:", res);
                        });
                      }
                    </script>

and on my backend, I have this function:

router.post('/input', authCheck, (req, res) => {
  console.log(req.body)
})

and when I click the button and it calls the function completion(), it calls it properly but then I get a POST /input 400 11.850 ms - 90, and it doesn’t send anything back. How can I fix this?

I’ve found this on google and gave it a go. But it seems as if its not doing anything. it isn’t updating the price total area at all, nor is it adding or subtracting. It gives an error stating

“Uncaught TypeError: Cannot read properties of null (reading ‘value’)
at doMath (testbuild.php:999:61)
at HTMLInputElement.onclick (testbuild.php:253:155)”

But the value is not null, its 45.00

Heres the JS to handle the addition of all items

<script type="text/javascript">
    function doMath() {
        // Capture the entered values of two input boxes
        var my_input1 = document.getElementsByName("case").value;
        var my_input2 = document.getElementsByName("cpu").value;
        var my_input3 = document.getElementsByName("cooling").value;
        var my_input4 = document.getElementsByName("ram").value;
        var my_input5 = document.getElementsByName("gpuchoice").value;
        var my_input6 = document.getElementsByName("storage").value;
        var my_input7 = document.getElementsByName("storage1").value;
        var my_input8 = document.getElementsByName("storage2").value;
        var my_input9 = document.getElementsByName("powersupchoice").value;
        var my_input10 = document.getElementsByName("fans").value;
        var my_input11 = document.getElementsByName("lighting").value;
        var my_input12 = document.getElementsByName("sleeving").value;
        var my_input13 = document.getElementsByName("peripherals").value;
        var my_input14 = document.getElementsByName("headsets").value;
        var my_input15 = document.getElementsByName("controllers").value;
        var my_input16 = document.getElementsByName("wirelessadapter").value;
        // Add them together and display
        var sum = parseInt(my_input1) + parseInt(my_input2) + parseInt(my_input3) + parseInt(my_input4) + parseInt(my_input5) + parseInt(my_input6) + parseInt(my_input7) + parseInt(my_input8) + parseInt(my_input9) + parseInt(my_input10) + parseInt(my_input11) + parseInt(my_input12) + parseInt(my_input13) + parseInt(my_input14) + parseInt(my_input15) + parseInt(my_input16);
      document.getElementsByName("text2").value = sum;
      document.getElementsByName("text2").innerHTML = sum;
    }
      </script>

HTML

<div id="price" class="price">&nbsp;<br>Price<br>
            <div name="text2" id="text2" class="text2">$250.00</div>
            <input type="hidden" value="$250.00" name="pricetotal" id="pricetotal"/>
            <div class="text1">So Far...</div>
          </div>
  <article data-ref="case">

            <div class="box box1">
              <h2 style="font-size:1.7em">Select Your Case</h2>
              <div class="clear">&nbsp;</div>


              <div style="background-image: url(&quot;phantekseclipse.jpg&quot;); background-size: 200px 250px; background-repeat: no-repeat;" id="chosencase"></div>
              <h1 id="case" name="case">Phanteks Eclipse Case</h1>
              <p id="description">The Phanteks Eclipse Mesh case is an affordable, high airflow case, with an extremely pleasing aesthetic. Be the envy of your friends with this stealth-like case.</p>


              <p class="stylelabel">
                <input type="radio" name="case" value="45.00" id="case1-radio" onClick="doMath(this.value);" checked>

                <label for="case1-radio"><img src="phantekseclipse.jpg"> <br />Phanteks Eclipse Case(+$69.99)</label>

                <input type="radio" name="case" value="24.00" id="case2-radio" onClick="doMath(this.value);">

                <label for="case2-radio"><img src="morovoldiamond.jpg"> <br />(+$10)</label>
                <br>
                <input type="radio" name="case" value="10.00" id="case3-radio" onClick="doMath(this.value);">

                <label for="case3-radio"><img src="antecwave.jpg"> <br />(+$10)</label>

                <input type="radio" name="case" value="10.00" id="case4-radio" onClick="CB(this.value);">

                <label for="case4-radio"><img src="antecdarkphantom.jpg"> <br />(+$10)</label>
                <br>
                <input type="radio" name="case" value="15.00" id="case5-radio" onClick="CB(this.value);">

                <label for="case5-radio"><img src="raidmaxp8.jpg"> <br />(+$10)</label>

                <input type="radio" name="case" value="55.55" id="case6-radio" onClick="CB(this.value);">

                <label for="case6-radio"><img src="morovalirregular.jpg"> <br />(+$10)</label>
              </p>
            </div>

          </article>
     

so on and so forth….

Any advice?