Category: javascript

I want to match if NO end

/(?<=start ).+(?!end)/gs

for example in this example I don’t want match, what should i used instead of .+ ?

start 
blah
blah
blah
end

I try to show the data when it is true, but it doesn’t work. I want to make an accordion menu (after clicking on a question, toggle an open property and show the answer if it’s true)

Here is code:

<div class="accordion">
<h1 class="title">Frequently asked questions</h1>
<div class="wrapper">
    <div class="card" v-for="(item, i) in dataBase" :key="i">
      <div class="card-header" @click="item.open = !item.open">
        <h1>{{item.q}}</h1>
      </div>
      <div class="card-body" v-show="item.open">
        {{item.d}}
      </div>
    </div>
</div>

And data:

const dataBase = [{
  q: 'How much does it cost?',
  d: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
  open: false,
},
  {
    q: 'How it works?',
    d: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
    open: false,
  }]

Can anyone help and explain why in the console log it changes to true => false and vice versa, but doesn’t show the data when it’s true? Im new in Vue.

So, I’m trying to figure out how to scroll down the list of names on the left and as I do, the content on the right changes. It would change back as I’m scrolling back up as well. I would be looking to scroll in the middle of the viewport as well, which is why I’m having an issue. I dont quite understand how to do that.
This works only when I click because each list item is actually a radio button. Here is my code:

<section class="wrapper mx-5 md:mx-36 team-memers">
 <div class="team-members__title">
     <h1 class="text-black font-saria mt-9"><?php echo $title?></h1>
 </div>

 <div id="scene" class="scene">
     <div id="left-zone">
         <ul class="list">
             <?php $i = 0;?>
             <?php foreach($teamMembers as $teamMember) {; $i++?>
             <li class="item" id="section">
                 <?php if ($i == 1) { ?>
                 <input id="radio_<?php echo $i?>" type="radio" value="<?php echo $i?>" name="basic_carousel"
                     checked="checked">
                 <?php   } else { ?>
                 <input id="radio_<?php echo $i?>" type="radio" value="<?php echo $i?>" name="basic_carousel">
                 <?php  } ?>
                 <label class="label_<?php echo $i?>" for="radio_<?php echo $i?>"> <?php echo $teamMember['name']?>
                 </label>
                 <div class="content content_<?php echo $i?>">
                     <div class="picto" style="background-image: url(<?php echo $teamMember['image']['url'] ?>)">
                     </div>
                     <h1><?php echo $teamMember['name']?></h1>
                 </div>
             </li>
             <?php }?>
         </ul>
     </div>
     <div id="middle-border"></div>
     <div id="right-zone"></div>
 </div>

I dont have any Javascript, this is purely CSS

$menu-width: 350px;
$scene-width: 1000px;
$scene-height: 400px;



@keyframes slidein {
0% {
    top: -$scene-height;
    opacity: 0;
}

100% {
    opacity: 1;
    top: 0px;
}
}

@keyframes slideout {
0% {
    top: 0;
    opacity: 1;
}

   100% {
    top: -$scene-height;
    opacity: 0;
}
 }

::scrollbar {
display: none;
  }


#scene {
display: flex;
align-items: center;
justify-content: left;

width: $scene-width;
height: $scene-height;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: get-color(white);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
overflow: hidden;

#left-zone {
    background: get-color(white);
    height: 75%;
    flex-grow: 0;
    display: flex;
    width: $menu-width;
    align-items: center;
    justify-content: left;

    .list {
        display: flex;
        list-style: none;

        align-content: stretch;
        flex-direction: column;
        flex-grow: 1;

        margin: 0;
        padding: 0;

        li.item {

            input[type="radio"] {

                display: none;

                &~label {
                    display: block;
                    opacity: 0.5;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    color: #000;

                    &:first-letter {
                        text-transform: uppercase;
                    }

                    &:hover {
                        opacity: 0.75;
                        cursor: pointer;
                    }

                    &:before {
                        content: " ";
                        display: block;
                        position: absolute;
                        width: 50px;
                        height: 50px;
                        margin-left: 15px;
                        background-image: url('https://d30y9cdsu7xlg0.cloudfront.net/png/83067-200.png');
                        background-position: center;
                        background-size: 75% 75%;
                        background-repeat: no-repeat;
                    }
                }

                &~.content {
                    position: absolute;
                    left: $menu-width;
                    top: -$scene-height;
                    width: $scene-width - $menu-width;
                    height: $scene-height;

                    animation-duration: 0.75s;
                    animation-name: slideout;
                    animation-timing-function: ease-out;

                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;

                    .picto {
                        height: 100px;
                        width: 100px;
                        background-image: url('https://d30y9cdsu7xlg0.cloudfront.net/png/83067-200.png');
                        background-position: center;
                        background-size: cover;
                        background-repeat: no-repeat;
                    }

                    h1 {
                        color: limegreen;
                    }



                    h1 {
                        &:first-letter {
                            text-transform: uppercase;
                        }
                    }

                    p {
                        max-width: 50%;
                        text-align: center;
                    }
                }

                &:checked {
                    &~label {
                        opacity: 1;
                        animation: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
                        color: limegreen;
                        border-right: solid 4px limegreen;

                    }

                    &~.content {
                        animation-duration: 0.75s;
                        animation-name: slidein;
                        animation-fill-mode: forwards;
                        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
                    }
                }
            }
        }
    }
}

#middle-border {
    background-color: get-color(gray);
    height: 75%;
    flex-grow: 1;
    max-width: 2px;
    z-index: 0;
}

#right-zone {
    background: get-color(white);
    height: 100%;
    flex-grow: 3;
}

}

I have been trying to implement a mask on form fields (especially phone number) but jQuery plugin called “Maskedinput” is behaving weirdly.

When I try to give definitions it is not working but without definitions it is somehow working but with bugs.

This is my current code, I would like to have the mask that is indicated on the placeholder, but I need to give descriptions. Also, “*” is not working to define an alphanumeric value.

$(document).on('knack-scene-render.any  ', function(event, scene) {
    $("#field_6").mask("+998 (99) 999 99 99", {placeholder: "+998 (##) ### ## ##"});
        $("#field_7").mask("t.me/********?*********", {placeholder: "t.me/username"});
});

Below is the link to that application:
https://globalconnect.knack.com/portal#application/

Is there any common issue with jQuery plugins on Knack or am I doing something wrong? The thing is, the plugin is working perfectly on different JavaScript environments.

I appreciate any help. Thank you so much

I am trying to connect the SOAP web service using soap package

Here is my code

var options = {
    wsdl_options: {
      forever: true,
      rejectUnauthorized: false,
      strictSSL: false,
      pfx: fs.readFileSync(__dirname + '/certs/test_cert.pfx'),
      passphrase: '123123'
    }
  };

  soap.createClient(process.env.SOAP_ENDPOINT, options, function (err, client) {
    console.log(err);
    console.log(client);
  });

While executing this I m getting the following error

Error: unable to verify the first certificate
    at TLSSocket.onConnectSecure (node:_tls_wrap:1531:34)
    at TLSSocket.emit (node:events:378:20)
    at TLSSocket._finishInit (node:_tls_wrap:945:8)
    at TLSWrap.ssl.onhandshakedone (node:_tls_wrap:719:12) {
  code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE',
  config: {
    url: '<URL>?WSDL',
    method: 'get',

Not sure why I am getting this however I am successfully able to connect through the soap UI in that I am using a p12 file.

I am having trouble with slots & vue-eslint on VSCode

template

    <div>
      <slot name="content">
        <div>
          {{ text }} // slot is not filled
        </div>
      </slot>
    </div>

script

    mounted() {
        ...
        const slotCont = this.$slots.content;
        console.log(slotCont)
    }

The above code works fine but I get lint error:

vue/require-slots-as-functions
lint Error: Property in $slots
should be used as function.`

I tried to fix the lint error with:

   const slotCont = this.$slots.content && this.$slots.content();

now I get another error on the browser:

TypeError: this.$slots.content is not a function

I need help on the correct way of accessing $slots.

**Watching ecommerce react laravel api part6 tutorial in Youtube trying to configure how it will work in react v6 because my Routes is not working in inspect>console this is what I get
“Uncaught TypeError: routes.forEach is not a function” Thank you in Advance **https://www.youtube.com/watch?v=EXclftuufD4&list=PLRheCL1cXHrtT6rOSlab8VzMKBlfL-IEA&index=8

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter as Router} from 'react-router-dom'
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

App.js

import React from 'react';
import {useRoutes} from 'react-router-dom';
import Routes from './routes/Routes';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.js';
import axios from 'axios';

axios.defaults.baseURL = "http://127.0.0.1:8000/";
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.post['Accept'] = 'application/json';

axios.defaults.withCredentials = true;
axios.interceptors.request.use(function (config) {
    const token = localStorage.getItem('auth_token');
    config.headers.Authorization = token ? `Bearer ${token}` : '';
    return config 
  
  });





function App() {
  return (
    <div className="App">
        {
          useRoutes(Routes())
        }
            
            {/*<Route path="/login" element={<Login/>} />
            <Route path="/register" element={<Register/>} />*/}
            {/*<Route exact path="/" element={<Home/>} />
            <Route path="/login" element={localStorage.getItem('auth_token') ? <Navigate to="/"/> : <Login />} />
            <Route path="/register" element={localStorage.getItem('auth_token') ? <Navigate to="/"/> : <Register />} />*/}

            {/*<Route path="/*" element={<MasterLayout/>} />*/}
            
            {/*<Route element={<AdminPrivateRoute />}>
              {routes.map(({ path, component: Component }) => (
                <Route key={path} path={path} element={<Component />} />
              ))}
            </Route>*/}
          
    </div>
  );
}

export default App;


Routes.js

    import { Navigate } from 'react-router-dom';
import React, {useEffect, useState} from 'react';

import AdminLayout from '../layouts/admin/AdminLayout';
import AdminLogin from '../components/admin/auth/AdminLogin';
import AdminRegister from '../components/admin/auth/AdminRegister';
import AdminDashboard from '../components/admin/AdminDashboard';
import AdminProfile from '../components/admin/AdminProfile';
import GameManagement from '../components/admin/GameManagement';

import Home from '../components/frontend/Home'
import Layout from '../layouts/frontend/Layout';
import Login from '../components/frontend/auth/Login'
import Register from '../components/frontend/auth/Register'
import Dashboard from '../components/frontend/Dashboard';
import Profile from '../components/frontend/Profile';
import axios from 'axios';


const Routes = () => {

    const [Authenticated, setAuthenticated] = useState(false);

    const [loading, setLoading] = useState(true);


    useEffect(() => {
        axios.get(`/api/checkingAuthenticated`).then( res => {
            if(res.status === 200)
            {
                setAuthenticated(true);
            }
            setLoading(false);
        });
    
      return () => {
        setAuthenticated(false);
      }
    }, []);

    if(loading)
    {
        return <h1>Loading...</h1>
    }
    
    

    return (Authenticated ?
    [
        {path: '/', element: <Navigate to='/dashboard'/>},
        {path: '/', element: <Layout/>, children: [
            {path: '/dashboard', element: <Dashboard/>},
            {path: '/profile', element: <Profile/>},
        ]},
        {path: '/admin', element: <AdminLayout/>, children: [
            {path: '/admin/dashboard', element: <AdminDashboard/>},
            {path: '/admin/profile', element: <AdminProfile/>},
            {path: '/admin/game-management', element: <GameManagement/>},
        ]}, 
    ]
    : 
    [
        {path: '/*', element: <Navigate to='/login'/>},
        {path: '/', element: <Home/>, children: [
            {path: '/login', element: <Login/>},
            {path: '/register', element: <Register/>},
            {path: '/admin/login', element: <AdminLogin/>},
            {path: '/admin/register', element: <AdminRegister/>},
        ]}, 
    ]
    );
    
};

export default Routes;

I want to create an horizontal carousel that has a phrase or several words scrolling end to end of the screen in a loop.

What I’ve tried is duplicating the phrase in two different divs, to avoid the gap in the animation (otherwise, the phrase goes almost away before it starts from the beginning and looks awful).
The problem (even though I’ve tried to delay the 2nd animation by half the time of the first one for them not to overlap), depending on the device, the text still overlaps.

How can I create such cacrousel (with or without JS) making sure texts don’t overlap? https://tucuerpofit.com/testcarousel/

I have a problem with my axios query:

apiClient.get('http://localhost:8080/api/internalLocations/search', {
      params: {
        locationTypeCode: 'BIN_LOCATION',
        offset: '0',
        max: '5',
        parentLocation: {
          id: `${this.props.currentLocation}`,
        },
      },
    })

The query needs to be typeof ?[...]offset=5&parentLocation.id=xyz, but now it is like this: &offset=0&max=5&parentLocation={"id":"[object Object]"} and the backend doesn’t know how to handle that.
Is there any possibility to make it parentLocation.id=xyz?

I’m trying to make a simple application where I use Webpack and babel.
Down below you could find the code that I’ve writed…
Unfortunately ,launching npm run start, from the browser console does not give me any error and the file (index.js) does not work;

package.json:

  "scripts": {
    "start": "webpack serve",
    "build": "webpack",
    "test": "echo "Error: no test specified" && exit 1"
  },

That’s HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Canvas</title>
  </head>
  <body>
    <div id="root" ></div>
    <script type="text/js"  src="../src/index.js" ></script>
  </body>
</html>

Babel:

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1"
          }
        }
      ]
    ]
  }

Webpack:

// Plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    // Main
    mode: 'development',
    devtool:'inline-source-map',
    entry: './src/index.js',
    output:{
        path: path.resolve(__dirname,'./dist'),
        filename: 'main.bundle.js',
        clean:true,
    },
    // Loaders
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                loader: 'babel-loader',
                options: {
                    "presets":['@babel/preset-env']}
                }
            },
            {
                test:/.css$/,
                use:['style-loader','css-loader'],
            }
        ]},
    // HTML
    plugins:[new HtmlWebpackPlugin({
        filename:'main.bundle.html',
        template:path.join(__dirname,'public','index.html'),
    })],
    // Development Server 
    devServer:{
        hot:true,
        open:true,
        port:8080,
        compress:true,
        liveReload:true,
    }
  };

index.js:

alert('hello world!');
console.log('hello world!')

I am trying to develop a map using leaflet in angular, however the map is black and the console is saying

map container not found

my html is simple:

<mat-tab label="Facility">
                <br/>
                <h3>Facility Name: {{daformfacs.facilityName}}</h3>
                <mat-divider></mat-divider>
                <br/>
                <h3>Facility's Operational Status: {{daformfacs.facStatus}}</h3>
                <mat-divider></mat-divider>
                <br/>
                <h3>Number of Operational Equipment in the Facility: {{daformfacs.operEqu}}</h3>
                <mat-divider></mat-divider>
                <br/>
                <h3>Number of Inoperable Equipment in the Facility: {{daformfacs.inoperEqu}}</h3>
                <mat-divider></mat-divider>
                <br/>
                <h3>Damage Done to the Facility's Infrastructure: {{daformfacs.facilityDamage}}</h3>
                <mat-divider></mat-divider>
                <br/>
                <h3>Location:<br/></h3>
                <mat-card class="mapContainerClass">
                <div class="map-container">
                  <div class="map-frame">
                    <div id="map"></div>
                  </div>
                </div>
              </mat-card>
                <mat-divider></mat-divider>
                <br/>
                <h3>Images:<br/>
                    <img class="styleImage" src="http://localhost:3000/{{ daformfacs.facImage }}" />
                </h3>
              </mat-tab>

and is styled as such, css:

.map-container {
  width: 1000px;
  height: 500px;
  padding: 1px;
  margin: 20px;
}

.map-frame {
  border: 2px solid black;
  height: 100%;
  width: 100%;
  
}

#map {
  height: 100%;
}

My typescript assocated with this html file is:

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DAFormFac } from 'src/app/models/daformfac.interface';
import { DaformfacserviceService } from 'src/app/service/daformfacservice.service';
import * as L from 'leaflet';
import { MocMapService } from 'src/app/service/moc-map.service';

@Component({
  selector: 'app-daform-fac-view-full',
  templateUrl: './daform-fac-view-full.component.html',
  styleUrls: ['./daform-fac-view-full.component.css'],
})
export class DaformFacViewFullComponent implements OnInit, AfterViewInit {
  private map;
   private initMap(): void {

      this.map = L.map('map', {
         center: [10.536421, -61.311951],
         zoom: 8,
      });
    
      const tiles = L.tileLayer(
         'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
         {
            maxZoom: 18,
            minZoom: 3,
            attribution:
              '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
          }
      );
    
      tiles.addTo(this.map);
   }

  daformfac: DAFormFac[] = [];

  formID: string;
  getparamformid: any;
  daformfacs: any;

  constructor(
    private daformfacservice: DaformfacserviceService,
    private route: ActivatedRoute,
    private mapService: MocMapService,
  ) {}

  ngAfterViewInit(): void {
    this.initMap();
    this.mapService.getMarkers(this.map);
    
  }

  ngOnInit(): void {
    console.log(
      this.route.snapshot.paramMap.get('facviewid'),
      ' : ID of report'
    );
    this.getparamformid = this.route.snapshot.paramMap.get('facviewid');
    this.daformfacservice
      .getOneDAFacForm(this.getparamformid)
      .subscribe((daFormFac: DAFormFac[]) => {
        this.daformfacs = daFormFac;
        console.log(daFormFac, 'response of form');
      });
  }
  
}

My services is:

import { Injectable } from '@angular/core';
import { WebRequestService } from './web-request.service';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet'

@Injectable({
  providedIn: 'root'
})
export class MocMapService {

  baseURL: string = 'http://localhost:3000/DAFacility';
  constructor(private webReqService: WebRequestService, private http: HttpClient) { }

  getMarkers(map: L.Map): void {
    this.http.get(this.baseURL).subscribe((res: any)=> {

      for (const c of res){
        const lat = c.latitude;
        const lon = c.longitude;
        var marker = L.marker([lon, lat], {draggable: true}).addTo(map);
        marker.bindPopup(`<center><p><strong>${c.facilityName}</strong></p></center>`+ marker.getLatLng()).openPopup();
      }
    });
  }
}

and finally the index.html for the application is as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Damage Assessment Tool</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/[email protected]/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>
  </head>
  <body class="mat-typography">
    <app-root></app-root>
  </body>
</html>

I am getting a blank map, nothing is displaying it is completely empty. it had worked before in a different application but it doesnt work in this application. please help!

I want to found the ids connection with the help of name connection

this are my container elements

  const TotalNodes = [ 
                             {id : 1, name : "apple"},
                             {id : 2 , name : "banana"},
                             {id : 3 , name : "orange"},
                             {id : 4 , name : "lamon"},
                             {id : 5 , name : "suger"},
                             {id : 6 , name : "salt"}
                          ]

this is my reference array

const NodesConnection = [
                            {source : "suger" , target : "salt"},
                            {source : "apple" , target : "orange"}
                          ]

this is final output

 const NodesConnectionWithIds = [
                                   {source : 5 , target : 6},
                                   {source : 1 , target : 3}
                                 ]

any help is so appreciatable

With the code below, I’m unable to alert users to using only IE11 and any other browser but not lower versions of IE starting IE 10. How can I refine my jQuery to achieve it?

jQuery(document).ready(function($){
var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
// true on IE11
// false on Edge and other IEs/browsers.        filters.hide();
// Objective: Allow only IE 11 and other browsers like Edge, Chrome, Safar, firefox so on,
// but never all lower versions of IE starting IE 10.
if (isIE11 === FALSE) {
  alert("Your web browser is out of date. Please complete this form using an approved browser, 
  such as Edge, Chrome, Safari, or Firefox.");
}

});

Show changes of a commit in svn log:

As you can see, the cells with changes are indeed marked red — but THAT’S ALL.

There are 2 problems:

1. if the workbook has multiple worksheets, you have to traverse all worksheets because you don’t know exactly which worksheets have been changed.
2. if a worksheet has many rows (or many columns), you need to drag a long scroll bar to look for cells with changes.

What I have tried:

1. I did some google, many people say to use SPREADSHEETCOMPARE.exe, but I found that the latest version of Office has removed this feature.

2. I tried to modify the script that svn uses to handle excel compare:

   mouse right click menu > TortoiseSVN > Settings > Diff Viewer > Advanced

   .xlsx => wscript.exe “D:Program FilesTortoiseSVNDiff-Scriptsdiff-xls.js” %base %mine //E:javascript

var used_range_base = objBaseWorksheet.UsedRange;
var n_row_new = used_range_new.Rows.Count;
var n_col_new = used_range_new.Columns.Count;

var any_cell_diff = false;
                
for (var row = 1; row <= n_row_new; row++) {
  for (var col = 1; col <= n_col_new; col++) {
    if (used_range_new.Cells(row, col).value2 !== used_range_base.Cells(row, col).value2) {
      objNewWorksheet.Tab.ColorIndex = 7; // if any cell changed, mark the sheet's tab
      any_cell_diff = true;
      break;
    }
  }
    
  if (any_cell_diff) {
    break;
  }
}

This will indeed mark the modified worksheets:

BUT — I don’t know why, this algorithm is extremly slow…

So, finally my question is:

1. Is there any efficient way to check if 2 worksheets have any difference?
2. Is there a way to mark all the changed cells in a sheet ?(like marking the color line on the scroll bar)
   

I have a function checkIsDir and I have imported it to the main file cli.js but I am unable to access the value which is been returned, in this case, it is true.

checkIsDir.js

const fs = require('fs')
const listr = require('listr')

function checkIsDir(path) {
  const tasks = new listr([
    {
      title: 'Checking if path is a directory',
      task: () => {
        try {
          fs.lstatSync(path).isDirectory()
          // return true if the path is a directory
          return true
        }
        catch (err) {
          throw new Error(`Path ${path} is not a directory`)
        }
      }
    }
  ])
  tasks.run().catch(err => {
    throw new Error(err)
  })
}

module.exports = checkIsDir

cli.js

#! /usr/bin/env node

const inquirer = require('inquirer');
const fs = require('fs')

const questions = require('./data/questions');
const checkIsDir = require('./lib/checkIsDir');
const spiltPath = require('./lib/splitPath');

const path = process.cwd();

inquirer.prompt(questions).then(async (answers) => {
  console.log(checkIsDir(answers.path))
  if (checkIsDir(answers.path) === true) {
    spiltPath(answers.path);
  }
  else {
    console.log('Oh no')
  }
});

splitPath.js

function spiltPath(path) {
  var spiltArray = path.split('/');
  var folderName = spiltArray[spiltArray.length - 1];
  console.log(folderName);
}

module.exports = spiltPath