Category: javascript

Category Added in a WPeMatico Campaign

How to simulate receiving message from Server to Client in order to unit test SignalR client/manager with react-testing-library and jest?

I have a working SignalR manager with a connection: HubConnection that is already built with .build().
Check the following quick example:

const connection: HubConnection = new HubConnectionBuilder().withUrl(...).build();
connection.start().then(() => {
  console.log('connected');
  ...
  connection.on('PushNewMessage', (message) => addNewMessageToReduxStore(message));
  connection.on('DeleteMessage', (messageId) => deleteMessageFromStoreWithId(messageId));
  ...
});

Server sends message ‘PushNewMessage’ with an object with string text and number id. This triggers the addNewMessageToReduxStore(message) which is tracked for changes and trigger more Redux changes.

I want to write a unit test that starts with “Server sending a message” and compares the final Redux store state after 5 seconds since the message was received from the server to match an expected store state – then the test will pass.

So how to simulate receiving a message from the server in that exact web socket managed by the HubConnection used in the unit test initialization?

pieces not dropping properly after dragging pieces – chessboard.js

I’ve been trying to adapt a chess engine tutorial for my needs, and I’ve been trying to figure out how the board renders. When I drag a piece, while it is dropped it doesn’t stay and instead stays with my mouse pointer. The move highlight works but I cant drag another piece or see my random bot play the next move. I’ve checked the FEN and the moves are registered there though.

HTML Header:

<head>
  <title>ChessBot</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
  integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2"
  crossorigin="anonymous"></script>

  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="assets/main.css">
  <link rel="stylesheet" href="assets/font/font.css">
  <link rel="stylesheet" href="assets/style.css">
  <!-- Font Awesome JS -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
    integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
    crossorigin="anonymous"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
    integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
    crossorigin="anonymous"></script>
  <!-- Chessboard JS -->
  <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.css"
    integrity="sha384-q94+BZtLrkL1/ohfjR8c6L+A6qzNH9R2hBLwyoAfu3i/WCvQjzL2RQJ3uNHDISdU" crossorigin="anonymous">
  <script defer src="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.js"
    integrity="sha384-8Vi8VHwn3vjQ9eUHUxex3JSN/NFqUg3QbPyX8kWyb93+8AC/pPWTzj+nHtbC5bxD"
    crossorigin="anonymous"></script>

  <!-- Chess JS (slightly modified) -->
  <script defer src="js/chess.js"></script>

  <!-- Bootstrap JS -->
  <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"
    integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous">
    </script>

  <!-- Custom JS -->
  <script defer src="js/script2.js"></script>

</head>

Javascript Board Manipulation

function removeGreySquares() {
  $('#myBoard .square-55d63').css('background', '');
}

function greySquare(square) {
  var $square = $('#myBoard .square-' + square);

  var background = whiteSquareGrey;
  if ($square.hasClass('black-3c85d')) {
    background = blackSquareGrey;
  }

  $square.css('background', background);
}

function onDragStart(source, piece) {
  // do not pick up pieces if the game is over
  if (game.game_over()) return false;

  // or if it's not that side's turn
  if (
    (game.turn() === 'w' && piece.search(/^b/) !== -1) ||
    (game.turn() === 'b' && piece.search(/^w/) !== -1)
  ) {
    return false;
  }
}

function onDrop(source, target) {
  undo_stack = [];
  removeGreySquares();

  // see if the move is legal
  var move = game.move({
    from: source,
    to: target,
    promotion: 'q', // NOTE: always promote to a queen for example simplicity
  });

  // Illegal move
  if (move === null) return 'snapback';

  globalSum = evaluateBoard(game, move, globalSum, 'b');
  updateAdvantage();

  // Highlight latest move
  $board.find('.' + squareClass).removeClass('highlight-white');

  $board.find('.square-' + move.from).addClass('highlight-white');
  squareToHighlight = move.to;
  colorToHighlight = 'white';

  $board
    .find('.square-' + squareToHighlight)
    .addClass('highlight-' + colorToHighlight);

  alert(game.fen()) 
  if (!checkStatus('black'));
  {
    // Make the best move for black
    window.setTimeout(function () {
      makeRandomMove('b');
      window.setTimeout(function () {
        showHint();
      }, 250);
    }, 250);
  }
}

function onMouseoverSquare(square, piece) {
  // get list of possible moves for this square
  var moves = game.moves({
    square: square,
    verbose: true,
  });

  // exit if there are no moves available for this square
  if (moves.length === 0) return;

  // highlight the square they moused over
  greySquare(square);

  // highlight the possible squares for this piece
  for (var i = 0; i < moves.length; i++) {
    greySquare(moves[i].to);
  }
}

function onMouseoutSquare(square, piece) {
  removeGreySquares();
}

function onSnapEnd() {
  board.position(game.fen());
}

Config:

var config = {
  draggable: true,
  position: 'start',
  onDragStart: onDragStart,
  onDrop: onDrop,
  onMouseoutSquare: onMouseoutSquare,
  onMouseoverSquare: onMouseoverSquare,
  onSnapEnd: onSnapEnd,
};
board = Chessboard('myBoard', config);

Screenshot

Any help would be greatly appreciated.

Pretty Printing the structure of nested SASS Maps?

If we have nested maps in SASS (an Angular Theme for example) we can log the contents of it with @debug however it outputs everything in one line.

Anyone know if SASS has something that will pretty print the structure of nested maps?

So for example if we had:

$colors: (
  "primary": (
    "milk":       #fff,
    "cola":       #000,
    "mine-shaft": #232323,
  ),
  "secondary": (
    "pampas":      #f4f1ef,
    "pearl-brush": #e9e2dd,
    "alto":        #ddd,
  ),
);

We could do something like

@recursive-debug $colors

To log the structure of it.

Google Calendar API – getEvents everyday and only certain events with time frames

I am trying to write a script that I can click a custom menu button and it will pull all the events scheduled on my calendar within the hours of (9:00 AM – 11:00 AM , 12:00 PM – 1:00 PM , 3:00 PM to 5:00 PM). Right now it runs by grabbing everything on my calendar for the day (including lunch) and internal meetings but I only need the events that are scheduled within the specific hours.

Also is it possible to only pull certain things from the description of a google event? For ex, the getDescription will get everything included and most of it is not needed, though there is a linkedin profile URL in the description that i do need. How can I set it so it gets the description and only retains the items I want? Here is the script I am running in App Script with the Calendar API.


  var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var cal = CalendarApp.getCalendarById("[email protected]");
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth(); //January is 0!
  var yyyy = today.getFullYear();
  var hh = 

  var events = cal.getEvents(new Date(yyyy, mm, dd, 0, 0, 0), new Date(yyyy, mm, dd, 23, 0, 0));

  for(var i = 0;i<events.length;i++){

   var title= events[i].getTitle();
   var sd = events[i].getStartTime();
   var loc = events[i].getLocation();
   var des = events[i].getDescription();
   var email = events[i].getGuestList().map(function(x) {return x.getEmail();}).join(',')
  
   ss.getRange(i+2, 2).setValue(title);
   ss.getRange(i+2, 8).setValue(loc);
   ss.getRange(i+2, 9).setValue(des); 
   ss.getRange(i+2, 9).trimWhitespace();
   ss.getRange(i+2, 1).setValue(sd);
   ss.getRange(i+2, 1).setNumberFormat("mm/dd/yyyy");
   ss.getRange(i+2, 7).setValue(email);
  }
 }


function addCandidates()  {

  let ui = SpreadsheetApp.getUi();
  ui.createMenu('Run Code').addItem('Add New Candidates','getEvents').addToUi();



}```

How to detect page load for accessing anchor hash input to the browser?

I have links as follows:

www.foo.com/#my_hash

The problem is, is that when the user input this, the hash is not scrolled to / accessed. My temporary work around was to use a custom method, which waits 4 seconds to manually scroll.

client.scrollToHash = function(delay = 0, offset = 0) {
  window.setTimeout(() => {
    const hash = document.location.hash.slice(1);
    if(!hash) {
      return;
    }
    const element = document.getElementById(hash);
    if(!element) {
      return;
    }
    window.scrollTo({
      top: element.getBoundingClientRect().top - offset,
      behavior: 'smooth'
    });
  }, delay);
};

Is it possible to detect something like an on load event from the native DOM, instead of using a timeout?

I am using functional components.

Do react functional components have an easy way to let you know that the component has rendered?

I am confused how anchor hashes work in general as if they come in from the user / browser, there will always be a delay, as the page takes time to load.

I would prefer not to use another library, but accomplish this using the DOM, or React functionality if possible.

How does the reducer function know that count is a state’s item?

I do not understand how reducer knows that count is from state without using state’s name in the code. I thought it was like “return {state.count: state.count + 1}“. How does it work?

import { useReducer } from 'react';
    
    const initialState = {count: 0};
    
    const reducer = (state, action) =>{
      switch(action.type){
        case 'minus':
          return {count: state.count + 1}
        break;
        case 'plus':
          return {count: state.count - 1}
        break;
        case 'reset':
          return initialState;
        break;
      }
      return state;
    }
    
    const App = () =>{
      const [state, dispatch] = useReducer(reducer, initialState);
    
      return(
        <div>
          <button onClick={() => dispatch({type: 'menos'})}>-</button>
          <div>{state.count}</div>
          <button onClick={() => dispatch({type: 'mais'})}>+</button>
          <button onClick={() => dispatch({type: 'reset'})}>reset</button>
        </div>
      );
    }
    
    export default App;

Unable to access property in javascript file in react component

I am building a chrome extension, which uses react/webpack, and it needs to inject code into an existing page. So I need to load one of my javascript files when the component is rendered.

However, I cannot access properties in that javascript file. I get error ‘Cannot read properties of undefined (reading ‘initialvalue’)‘. I have given the manifest.json file all the proper permissions and I know the script file is loading correctly. What am I doing wrong?

plugin.bundle.js (javascript file I’m trying to load)

var plugin = plugin || {};

SetupPlugin();
function SetupPlugin() {
    plugin.initialvalue = plugin.initialvalue || 123;
}

index.jsx

import { render } from 'react-dom';
import Embedtab from './Embedtab';

render(<Embedtab />, window.document.body.querySelector('.someclass'));

Embedtab.tsx

declare global {
  interface Window {
    plugin: any;
  }
}

export class Embedtab extends React.Component<any> {
  componentDidMount() {
    const script = document.createElement("script");
    script.src = chrome.runtime.getURL("./../plugin.bundle.js");
    script.async = false;
    script.onload = () => this.scriptLoaded();

    document.body.appendChild(script);
  }

  scriptLoaded() {
    alert("embedded loaded, value is " + window.plugin.initialvalue); //errors here
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          Hello World
        </header>
      </div>
    );
  }
};

export default Embedtab;

Variable in React is undefined on first render but defined after re-rendering. (Uncaught TypeError: vairable is undefined)

When I try to show the title of a movie (line 8 of App.js) I get the error “Uncaught TypeError: movies[0] is undefined”. If I do a log of the variable “movies” after line 5 the console makes two logs: Frist, logs movies as an empty array and then logs movies as an array with all the content, like I want.

The weird thing is that if I delete the line 8 {movies[0].title} and save the error dissapears as normal, but then if I add it again and save the movie title renders on screen like I’m trying to do.

App.js:

import './App.css';
import useApi from './useApi';

function App() {
  const movies = useApi();
  return (
    <div className="App">
      {movies[0].title}
    </div>
  );    
}

export default App;

My useApi returns an array with a list of movies:

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

const useApi = () => {
    const [movies, setMovies] = useState([]);

    const getData = async () => {
        try {
            const res = await axios(url);
            setMovies(res.data.results);
        } catch (error) {
            return [];
        }
    }

    useEffect(() => {
        getData();
    }, [])

    return movies;
}

export default useApi;

Knowing that if I print movies it logs an empty array but then it prints it normal like I said, i guess I’m having a problem with asynchrony but I can’t figure out what. And the fact that it works when removing and readding line 8 makes me more confused.

How to change the left position of div instance with arrow key using javascript?

I am new to javascript, please bear with me.
When the right arrow key is pressed I would like to change the div 100 pixels to the right. I use my own class to create a square and then try to change this instance position.

class Square {
  constructor(length) {
    this.width = length;
    this.height = length;

    this.div = document.createElement("div");
    this.div.style.position = "absolute"; // to be able to move it
    this.div.style.backgroundColor = "red";
    this.div.style.width = length + "px";
    this.div.style.height = length + "px";
    document.body.appendChild(this.div);

    this.xPos = 50;
    this.div.style.left = this.xPos + "px";

  }
}

var square2 = new Square(10);

window.addEventListener(
  "keydown",
  function (event) {
    if (event.defaultPrevented) {
      return; // Do nothing if the event was already processed
    }

    switch (event.key) {
      case "ArrowDown":
        alert("ArrowDown");
        // Do something for "down arrow" key press.
        break;

      case "ArrowUp":
        // Do something for "up arrow" key press.
        break;

      case "ArrowLeft":
        alert("ArrowLeft");
        // Do something for "left arrow" key press.
        break;

      case "ArrowRight":
        alert("ArrowRight");
        square2.div.style.left += 100 + "px"; // this code does nothing?
        
        break;

      default:
        return; // Quit when this doesn't handle the key event.
    }

    // Cancel the default action to avoid it being handled twice
    event.preventDefault();
  },
  true
);

The code square2.div.style.left += 100 + "px"; does nothing.

(Javascript) Why can I not refer to my function with this inside of a child object? [duplicate]

so this is the code i wrote:

const PersonProto = {
  calcAge() {
    return 2022 - this.birthYear;
  },

  init(firstName, birthYear) {
    this.firstName = firstName;
    this.birthYear = birthYear;
  },
};

const walter = Object.create(PersonProto);

const StudentProto = Object.create(PersonProto);
StudentProto.init = function (firstName, birthYear, course) {
  PersonProto.init.call(this, firstName, birthYear);
  this.course = course;
};

StudentProto.introduce = function () {
  console.log(
    `hi i am ${this.firstName} who is ${this.calcAge} years old and is studying ${this.course}`
  );
};

const penny = Object.create(StudentProto);
penny.init('Penny', 2021, 'maths');
penny.calcAge();
penny.introduce();

and the problem is that for penny.introduce(), I get

hi i am Penny who is calcAge() {
    return 2022 - this.birthYear;
  } years old and is studying maths

in the console. However penny.calcAge() does work correctly. So why does it not work inside of the other function? I’m just starting to learn about inheritance and prototypes so it’s hard for me to figure this out by myself. Thanks in advance, any help is welcome!

MongoDB JS 304 StatusCode

First of all I’m extremely sorry but i can’t figure out what the title should be,
I’m trying to send data to MongoDB Database but for some reason, I keep getting 304 status code, I tried searching it on the internet but I couldn’t find a solution, and was hard for me to understand, can you guys please help me?

Here’s the data I’m trying to send to DB

  const router = require("express").Router();
  const User = require("../models/User");



 router.get("/register", async (req,res) => {
 const user = await new User ({
 username:"username",
  email:"[email protected]",
  password:"123456"
  })
 await user.save();
 res.send("okk!");

});


module.exports = router;

//
MongooseError: Operation users.insertOne() buffering timed out after 10000ms
at Timeout. node_modulesmongooselibdriversnode-mongodb-nativecollection.js:151:23)
at listOnTimeout (node:internal/timers:557:17)
at processTimers (node:internal/timers:500:7)

Why am I getting axios.get is not a function?

I’m realtively new to Node and so I am trying to iron out some of the creases.

I’ve been trying to get used to working with packages and npm and decided to start by importing axios to make a simple http request.

I successfully initialised the project using npm init.

The first issue I encountered was when I tried to run npm install axios, this returned the following error:

npm ERR! code ENOTDIR
npm ERR! syscall mkdir
npm ERR! path G:My DriveNodeJSAnother Package Examplenode_modules
npm ERR! errno -4052
npm ERR! ENOTDIR: not a directory, mkdir 'G:My DriveNodeJSAnother Package Examplenode_modules'

In order to try and resolve this I used the command provided by the error i.e. mkdir ‘G:My DriveNodeJSAnother Package Examplenode_modules’, was this the correct thing to do? This created the node_modules folder and when I tried to run npm install axios I didn’t get an error, but instead:

npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR EBADF: bad file descriptor, write
npm WARN tar TAR_ENTRY_ERROR EBADF: bad file descriptor, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR EBADF: bad file descriptor, write
npm WARN tar TAR_ENTRY_ERROR EBADF: bad file descriptor, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR EBADF: bad file descriptor, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR EBADF: bad file descriptor, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR EBADF: bad file descriptor, write
npm WARN tar TAR_ENTRY_ERROR EBADF: bad file descriptor, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR EBADF: bad file descriptor, write
npm WARN tar TAR_ENTRY_ERROR EBADF: bad file descriptor, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR EBADF: bad file descriptor, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR EBADF: bad file descriptor, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR EBADF: bad file descriptor, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write
npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write

added 8 packages, and audited 9 packages in 2s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Below is the code I wrote for my request.js file:

const axios = require('axios');

axios.get('https://www.google.com')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

However, when I try to run the code using node request.js I get the below response:

.get('https://www.google.com')
   ^

TypeError: axios.get is not a function
    at Object.<anonymous> (G:My DriveNodeJSAnother Package Examplerequest.js:4:4)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

Furthermore, if I open my node_modules folder and open any of the files they appear to all be empty, which I’m assuming is causing this issue but I’m not 100% sure.

I have tried, removing the node_modules folder and inputting the command again but that didn’t work.

How to make horizontal scroll smoother?

I added this code to my WordPress based website to make its front page horizontal. But it’s not smooth and I cannot add scroll snap or anchor points. Can you help me about these? My website is https://kozb.art

function replaceVerticalScrollByHorizontal( event ) {
  if ( event.deltaY !== 0 ) {
   window.scroll(window.scrollX + event.deltaY * 2, window.scrollY );
   event.preventDefault();
  }
 }

 const mediaQuery = window.matchMedia( '(min-width: 770px)' );

 if ( mediaQuery.matches ) {
  window.addEventListener( 'wheel', replaceVerticalScrollByHorizontal );
 }
</script>```

Option box not appearing below the box

Is there any reason why this is happening?the option box is not appearing below the box itself

The option appears normally on big screen, it’s just when I inspect and make it responsive it seems like the option box is not moving at all? are there any particular details why?

I am a new developer and would like to know more on how to prevent this happening, and if someone please tell me why it’s happening too? thank you

html code:

    <!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">
    <!-- meta name/property starts -->
    <meta name="description" content="CDA offers driving lessons in Cambridge and surrounding areas extending all through Cambridgeshire. CDA has a fully-qualified team of instructors ">
    <meta property="og:title" content="Driving Lessons Cambridge | CDA">
    <meta property="og:description" content="CDA offers driving lessons in Cambridge and surrounding areas extending all through Cambridgeshire. CDA has a fully-qualified team of instructors ">
    <meta property="og:url" content="https://www.cambridgedrivingacademy.com">
    <meta property="og:site_name" content="cambridge driving ac">
    <meta property="og:type" content="website">
    <meta name="google-site-verification" content="-U4J2qSZr6SaN8sIfVFsM1Kl280vQ5CifW_lt12tbeo">
    <meta name="twitter:title" content="Driving Lessons Cambridge | CDA">
    <meta name="twitter:description" content="CDA offers driving lessons in Cambridge and surrounding areas extending all through Cambridgeshire. CDA has a fully-qualified team of instructors ">
    <!-- meta name close -->
    <title>CDA | Cambridge Driving Academy | Driving School in Cambridge</title>
    <!-- fas cdn -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <!-- personal css -->
    <link rel="stylesheet" href="/css/style.css" text="css">
    <link rel="stylesheet" href="/css/gallery.css" text="css">
    <!-- custom css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
    <link rel="stylesheet" href="/css/enrolment.css">
    <!-- swiper -->
    <link  rel="stylesheet"  href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
    <!-- llight gallery CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lightgallery.min.css">

</head>
<body>
    
    <!-- header section starts -->
        <header>
            <a href="#" class="logo">Cambridge <span>Driving Academy</span></a>
            <a href="#" ><img src="imgs/CDA_NEWLogo.png" class="img-logo" alt=""></a>
            <div class="navbar">
                <a href="#home">Home</a>
                <a href="index.html#courses">Courses</a>
                <a href="instructors.html">Team</a>
                <a href="index.html#about-us">About Us</a>
                <a href="training.html">Instructor Training</a>
                
                <a href="pricing.html">Prices</a>
            </div>
            <div class="icons">
                <i class="fa-solid fa-bars" id="menu-bars"></i>
                <a href="https://www.instagram.com/cambridgedriving/?hl=en" target="_blank">
                    <i class="fa-brands fa-instagram"></i>
                </a>
                <a href="https://www.facebook.com/cambridgedrivingacademy" target="_blank">
                    <i class="fa-brands fa-facebook">
                    </i></a>
                <a href="tel:07496 842781">
                    <i class="fa-solid fa-phone"></i>
                </a>
                
            </div>
        </header>
    <!-- ender ends -->

    <div class="enrolment-logo">
        <img src="/imgs/CDA_NEWLogo.png" alt="">
    </div>

    <!-- enrolment form starts -->
    <div class="cda-form" id="contact">

        <h1 class="heading">
            <span>Enrolment Form</span>
        </h1>
    
        <div class="row">


            <!-- <div class="image">
                <img src="/imgs/contact.png" alt="contact-us">
            </div> -->

            

 
    
            <form action="contact-form.php" method="POST">
    
                <span>Your Full Name</span>
                <input type="text" required placeholder="Enter your name" id="name" class="box" maxlength="40">
    
                <span>Your Email Address</span>
                <input type="email" required placeholder="Enter your email" id="email" class="box" maxlength="40">

                <span>Your Date of Birth</span>
                <input type="date" required placeholder="Enter your email" id="email" class="box" maxlength="40">

                <span>Your Address</span>
                <input type="text" required placeholder="First Line Address" id="email" class="box" maxlength="40">
                <input type="text"  placeholder="Second Line Address" id="email" class="box" maxlength="40">
                <input type="text"  placeholder="Third Line Adress" id="email" class="box" maxlength="40">
    
                <span>Your mobile number</span>
                <input type="text" required placeholder="Enter your mobile number" id="number" 
                class="box" maxlength="99999999999" onkeypress="if(this.value.length == 10) return false;">
    
                <span>Transmission Type </span>
                <select name="Courses" id="courses" class="box" required>
                    <option value="" disabled selected> Select Transmission --</option>
                    <option value="Manual Driving Course">Manual</option>
                    <option value="Automatic Driving Course">Automatic</option>
                </select>

                <span>Licence Type </span>
                <select name="Courses" id="courses" class="box" required>
                    <option value="" disabled selected> What type of licence do you have?</option>
                    <option value="Manual Driving Course">Provisional Licence</option>
                    <option value="Automatic Driving Course">
                        Full Automatic Licence</option>
                    <option value="Manual Driving Course">Full Licence</option>
                    <option value="Manual Driving Course">Foreign Licence</option>
                </select>

                <span>Your Driving Licence Number</span>
                <input type="email" required placeholder="Enter your Driving Licence Number" id="email" class="box" maxlength="40">
                
                <span>Theory Test </span>
                <select name="Courses" id="courses" class="box" required>
                    <option value="" disabled selected>Pass or Failed</option>
                    <option value="Manual Driving Course">Passed</option>
                    <option value="Automatic Driving Course">Failed</option>
                    <option value="Automatic Driving Course">Not Taken</option>
                </select>

                <span>Practical Test </span>
                <select name="Courses" id="courses" class="box" required>
                    <option value="" disabled selected>Pass or Failed</option>
                    <option value="Manual Driving Course">Passed</option>
                    <option value="Automatic Driving Course">Failed</option>
                    <option value="Automatic Driving Course">Not Taken</option>
                </select>

                <span>If you have an upcoming Theory and/or Practical Driving Test, please select one of the option </span>
                <select name="Courses" id="courses" class="box" required>
                    <option value="" disabled selected>Test booked --</option>
                    <option value="Manual Driving Course">Theory Test</option>
                    <option value="Automatic Driving Course">Driving Test</option>
                    <option value="Automatic Driving Course">Nothing Booked at the moment</option>
                </select>

                <Span>If you have already your Practical Driving Test booked, please provide booking reference number, test date, time and test centre:<Span>
                    <textarea name="message" id="message" cols="30" rows="3" placeholder="Type of test, Booking Ref #, Test Date, Time and Test Centre"></textarea>

                <Span>Driving Experience<Span>
                <textarea name="message" id="message" cols="30" rows="7" placeholder="Additional Information"></textarea>

            

                <h1 class="heading">
                    Parent/s or Guardian/s
                </h1>

                <span>Parents or Guardian's name</span>
                <input type="text" required placeholder="Enter your name, enter N/A if not applicable" id="name" class="box" maxlength="40">

                <span>Parents or Guardian's Email Address</span>
                <input type="text" required placeholder="Enter your guardian's email address, enter N/A if not applicable" id="name" class="box" maxlength="40">

                <span>Parents or Guardian's Contact Phone Number</span>
                <input type="text" required placeholder="Enter your guardian's contact number, enter N/A if not applicable" id="name" class="box" maxlength="40">


                
    
                <input type="submit" value="Submit Form" class="btn">
            </form>



        </div>
    
    </div>
    



    <!-- enrolment form ends -->
    




    <!-- scripts -->
        <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/js/lightgallery.min.js"></script>
        <script src="/js/script.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
        

        <script>

            AOS.init({
                duration:800,
                offset:150,
            })

            lightGallery(document.querySelector('.gallery .gallery-container'));

            
        </script>

    <!-- script ends -->
</body>
</html>

css code :

.enrolment-logo img {
    height:8rem;
}

.enrolment-logo {
    text-align: center;
    margin-top:5%;
}

.cda-form {
    background-color: #fff;
    padding:2% 15%;
    text-align: center;
    width:80%;
    margin: 0 auto;
}

.cda-form .heading span {
    color:var(--primary-color);

}

.cda-form .row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:1.5rem;
}

.cda-form .row .image{
    flex: 1 1 40rem;
    text-align: center;
}

.cda-form .row .image img {
    width:60%;
}

.cda-form .row form  .box,textarea{

    width:100%;
    margin-top: 1rem;
    margin-bottom: 2rem;
    border-radius: .5rem;
    background-color:white;
    box-shadow: var(--box-shadow);
    font-size: 1.8rem;
    color:var(--black);
    resize: none;
    padding:1.4rem;
    font-family: 'Poppins', sans-serif;
}

.cda-form .row form  {
    flex: 1 1 20rem;

}
.cda-form .row form span {
    color:var(--primary-color);
    font-size: 1.6rem;
}
input,option {
    text-align: center;
}

::-webkit-input-placeholder {
    text-align: center;
 }
 
 :-moz-placeholder { /* Firefox 18- */
    text-align: center;  
 }
 
 ::-moz-placeholder {  /* Firefox 19+ */
    text-align: center;  
 }
 
 :-ms-input-placeholder {  
    text-align: center; 
 }


 @media(max-width:1400px){

    .enrolment-logo {
        text-align: center;
        margin-top:10%;
    }
    

}

@media(max-width:850px){

    .enrolment-logo {
        text-align: center;
        margin-top:20%;
    }
    .cda-form .heading span{
        font-size: 5rem;
    }

    .cda-form .row form  .box,textarea{

        font-size:1.5rem;
    }

}

@media(max-width:450px){

    .cda-form .heading span{
        font-size: 5rem;
        text-align: center;
        justify-content: center;
        display: flex;
    }
}