Category: javascript

I have a string like this:

"string1tstring2nttstring3"

I want to print the string as it is in javascript. How do I do so?

i want to make simple navbar ,i read react router documentation.i think my code is correct,but it return these error :

my app code:

import './App.css';
import Dashboard from './component/dashboard';
import Home from './component/home';
import Navbar from './component/navbar';
import {BrowserRouter as Router,Routes,Route} from "react-router-dom"
function App() {
  return (
    <div className="App">
      <Navbar/>
      <div id="body">
      <Router >
        <Routes>
          <Route path="/"  element={<Home/>}/>
          <Route path="/dashboard"  element={<Dashboard/>}/>
        </Routes>
      </Router>
      
      </div>
    </div>
  );
}

export default App;

my navbar code :

import { NavLink } from "react-router-dom"
export default function Navbar(){


    return(<div className="App-header">
    <div id="logo">
      <p>logo</p>
      </div>
      <div id="nav_bar">
        <NavLink  to="/dashboard">dashboard</NavLink>
      </div>
      <div id="cantact_slide">
        <p>contact</p>
      </div>
</div>)
}

I installed react-router-dom: “^6.11.2”,nodejs : v18.16.0

New to React. I ask experts to help translate the code from Angular to React. Idk analog angular.module in React, don’t know what is notebooks.controller.

var notebooks = angular.module('notebooks', []);

notebooks.controller('NotebookListCtrl', function($scope) {
  $scope.notebooks = [
    {"name": "Lenovo",
     "procesor": "Intel i5",
     "age": 2011},
    {"name": "Toshiba",
     "procesor": "Intel i7",
     "age": 2010},

  ];
  $scope.orderList = "name";
});

And HTML

<div id="notebooks" ng-app="notebooks" ng-controller="NotebookListCtrl">
  <input type="text" id="query" ng-model="query"/>
  <select ng-model="orderList">
    <option value="name">By name</option>
    <option value="-age">Newest</option>
    <option value="age">Oldest</option>
  </select>
  <ul id="notebook_ul">
    <li ng-repeat="notebook in notebooks | filter:query | orderBy: orderList">
      name: {{notebook.name}}<br/>
      procesor: {{notebook.procesor}}<br/>
      <div class="right top">{{notebook.age}}</div>
    </li>
  </ul>
  <span>Number of notebooks: {{notebooks.length}}</span>
</div>

I don’t know how to change angular.module for react, and don’t know how fix html code.

So I am trying to build locally but doesn’t seem to work during the npm install, what do you think could be the issue?

Let’s say I have a lib project here:

npm ls

cwd is: /Users/my/git-main5/eclipse/setup/decouple/vue-lib/lib

@my/[email protected] /Users/my/git-main5/eclipse/setup/decouple/vue-lib/lib

I do npm install

npm run build

npm link

Now I want to reference this version 1.2.3 in my main project

pwd
/Users/my/git-main5/eclipse/setup/decouple/myapp/app

npm link @my/[email protected]
Or
npm link @my/vue-components

npm install

Error
npm ERR! notarget No matching version found for @my/[email protected]

…

If I run npm ls, seems to list it

npm ls -g (this technically is wrong)

├── @my/[email protected] -> ./../../../Users/my/git-main5/eclipse/setup/decouple/vue-lib/lib

But this is right:

npm ls
├── @my/[email protected] -> ./../../vue-lib/lib

Still can’t find that reference to the local library.

package json:

{
  "name": "@my/vue-components",
  "version": "1.2.3",
  "files": [
    "src/**/*"
  ],
  "main": "src/index.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && npm run test:unit  && cp ./coverage/clover.xml ./test-report.xml && cp ./coverage/lcov.info ./",
    "bundle": "vue-cli-service build --target lib --name 'bd-vue-components' ./src/components/index.js",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit --no-cache"
  },

In application user should be able to authorize using his twitch account, here is how business requirements looks like:

1. for twitch authorization user should be redirected (by the backend application) to the twitch authentication page
2. after logging in on twitch side:
   _ if user was not found in our application – new user should be
   created and then logged in to our application
   _ if user already existed – it should be logged in
3. then user should be redirected back to the frontend application

And here is how I’ve managed to do it:

// this class represents business logic
class TwitchAuthService {
  // this method returns url and then controller redirects user to the appropriate page
  public getRedirectionUrlToStartAuth = (
    { successUrl, failUrl }: { successUrl: string; failUrl: string; }
  ): string => {
    return 'https://id.twitch.tv/oauth2/authorize?' +
      new URLSearchParams({
        response_type: 'code',
        client_id: this.twitchId,
        redirect_uri: this.getRedirectUrl(),
        scope: 'user:read:email',
        state: `successUrl=${successUrl}&failUrl=${failUrl}`,
      })
  }
  
  // after receiving token from twitch, we 
  // - return already existing user or
  // - create a new one and return it
  authenticateUser() { ... }
}

And at the moment when I receive callback from twitch, I have to parse successUrl and failUrl parameters from twitch-url in response for further redirection (I’ve provided these parameters earlier while using getRedirectionUrlToStartAuth method)

I’ve created a separate method for this “parsing” functionality, getRedirectUrlsFromCallback but where should I locate it?

Is it still part of business logic? Or should I create some infrastructure service for Twitch and put this method here? Or it simply can be added as private method of the controller?

  public getRedirectUrlsFromCallback = (state: string): { successUrl: string; failUrl: string } => {
    const urlParams = new URLSearchParams(state);
    const successUrl = urlParams.get('successUrl');
    const failUrl = urlParams.get('failUrl');

    if (!successUrl || !failUrl) {
      throw new IncorrectCallbackUrlError();
    }

    return {
      successUrl,
      failUrl,
    }
  }

enter image description here
The following error originated from your application code, not from Cypress.

Cannot read properties of null (reading ‘length’)
When Cypress detects uncaught errors originating from your application it will automatically fail the current test.
This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event.L

I have links in a container with anchors in another container hidden by default.
When both container are showing, the link works without problem, but when the “Anchors” container is hidden, the link does not work.

What I would like to do : on the click of the link, show the relative container and go to the line of the anchor.

Here is what I did, without much success https://jsfiddle.net/zqsv1b29/14/

and the code

html

<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<body class="wy-body-for-nav">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
             
 <div class="toggle docutils container">
  <div class="header docutils container">
  <p><strong>Keywords</strong></p>
  </div>
    <pre class="literal-block">
    <a class="reference internal" href="#ref1"><span class="std std-ref">ref1</span></a> value = 1
    <a class="reference internal" href="#ref2"><span class="std std-ref">is_planar</span></a>  value= 2
    </pre>
</div>

  <div class="toggle docutils container">
  <div class="header docutils container">
  <p><strong>Anchors</strong></p>
  </div>
  <p id="ref1">ref1 anchor
  <p id="ref2">ref2 anchor
</div>
</body>
</html>

css:

.
.toggle .header {
    display: block;
    clear: both;
}

.toggle .header p:before {
    content: " ▶ ";
}

.toggle .header.open p:before {
    content: " ▼ ";
}

javascript:

$(document).ready(function() {
  $(".toggle > *").hide();
  $(".toggle .header").show();
  $(".toggle .header").click(function() {
    $(this).parent().children().not(".header, .wy-table-responsive").toggle(400);
    $(this).parent().children(".wy-table-responsive").children().toggle(400);
    $(this).parent().children(".header").toggleClass("open");
    $(this).parent().children(".wy-table-responsive").toggleClass("open");
  });
  
  // Add click event listeners to links with href pointing to anchors in hidden section
  $("a[href^='#']").click(function(event) {
    event.preventDefault(); // Prevent default behavior of link
    var targetId = $(this).attr("href").substring(1); // Get the id of the target anchor
    $(document.location.targetId).slideDown().prev().addClass('active');
  });
});

I’m busy with a to do list project, but for some reason my div’s are not stretching to the fill the screen when I resize to bigger than 400px. I don’t have any sizes set on the divs only display:flex and display:grid on the body. please help.

I’ve tried setting min-width, max-width as well as media queries but the size doesn’t grow beyond 400px.

I need to encrypt a file using TripleDES, ECB and PKCS5 padding. I haven’t found in forums or in stackoverflow any answer, due to the fact that they always use Pkcs7 on TripleDES, and i need Pkcs5. Right now this code doesn’t work when i send it to the server for desencryption.

reader.onload = function (event) {
                    var fileData = event.target.result;

                    var key = "123456789";
                    var keyBytes = CryptoJS.enc.Utf8.parse(key);

                    var encryptedData = CryptoJS.TripleDES.encrypt(fileData, keyBytes, {
                        mode: CryptoJS.mode.ECB,
                        padding: CryptoJS.pad.Pkcs7
                    });

                    var fileEnc = new Blob([encryptedData]);from string

                    var a = document.createElement("a");
                    var url = window.URL.createObjectURL(fileEnc);
                    var filename = file.name + ".enc";
                    a.href = url;
                    a.download = filename;
                    a.click();
                    window.URL.revokeObjectURL(url);
                };
                reader.readAsDataURL(file);

Is there any way of doing the same code but with pkcs5? Or any JavaScript library which could help me use it instead of CryptoJS?

Write a program that accepts user input from the user till 0 is entered. Then prints the total number of entries, the addition of their values, and an average of their values as well as the minimum and the maximum number entered. If a negative number is entered it should be converted into a positive and to be added to the sum.

I have this exercise to do and I need help with it.

everybody.

I have a problem with a string extracted from a text file, that I need to transform in an array.
This is an example of the structure I have to work with:

data: '[
            {
              text: "Go",
              name: "search",
              onClick: function () {
                console.log(document.getElementById("searchName").value);
                alert("Value: " + document.getElementById("searchName").value + "button: " + idCaller);
              },
            },
            {
              text: "Cancel",
              name: "btnCancel",
            },
          ]'

Checking the string with length, It finds of course an array with around 500 elements…

I tried to look for suggestions on the web, included many answer in stackoverflow, but I can’t find a correct way.
A line code like this:

let array = JSON.parse(data);

doesn’t work because it doesn’t recognize a correct JSON structure.

Another usual way is the use of the split() function, but as it needs a delimiter, and ‘,’ (comma) is incorrect, it doesn’t apply.

Has someone a solution or a suggestion?

Hey buddy I was wondering how did I use react on existing Laravel project, I wanna know how to do that

I have a Laravel project and the UI is still using plain HTML, and I want to change the UI using react (maybe I will make new branch and then change it there)

I’m trying to send an alert to my slack channel every time a user clicks on a specific hyperlink and in this case its the “link” element within the page. What I have now is, every time a user clicks in any part of the page, I receive that alert. How do I resolve this?

Appreciate all the inputs I can get. Thank you in advance

Part of the code:

let link = document.createElement("a");
document.querySelector('[class^="awsui_tabs- 
content"]').addEventListener("click", (link) => log('A link was 
clicked'));

I also tried below code but it gives me the same result.

document.querySelectorAll('[class^="awsui_tabs-content"]').forEach(link => {link.addEventListener('click', (e) => {log('A link was clicked'); 
}); 
});

I want to use antd theme tokens to style my custom component? May be there is an emotion-like way:

// style.ts
export default createStyles((token) => ({
  foo: {
    color: token.colorPrimary,
  }
})

// index.tsx
import styles from './style';

const FooBar = () => {
  return (
    <div className={styles.foo}>
      FooBar
    </div>
  );
};

Or maybe there is a better way to do it? There is practically nothing in the docs except useToken and use in style directly.

I have an array,

const boxes=[
    {
        "trolleyNo": "345A",
        "trolleyItems": [
            {
                "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                "name": "Bar Cart - Liquor, Liqueur",
                "value": "Bar Cart - Liquor, Liqueur",
                "label": "Bar Cart - Liquor, Liqueur"
            },
            {
                "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                "name": "Bar Cart - Beer & Wine",
                "value": "Bar Cart - Beer & Wine",
                "label": "Bar Cart - Beer & Wine"
            },
            {
                "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                "name": "Bread Basket & Tongs",
                "value": "Bread Basket & Tongs",
                "label": "Bread Basket & Tongs"
            },
            {
                "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                "name": "Crew Store - Cookies, juices, etc",
                "value": "Crew Store - Cookies, juices, etc",
                "label": "Crew Store - Cookies, juices, etc"
            }
        ],
        "cartType": "fullCart",
        "index": "FC-093"
    },
    {
        "trolleyNo": "560S",
        "trolleyItems": [
            {
                "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                "name": "Bar Cart - Beer & Wine",
                "value": "Bar Cart - Beer & Wine",
                "label": "Bar Cart - Beer & Wine"
            },
            {
                "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                "name": "Bread Basket & Tongs",
                "value": "Bread Basket & Tongs",
                "label": "Bread Basket & Tongs"
            },
            {
                "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                "name": "Crockery - Full Plates",
                "value": "Crockery - Full Plates",
                "label": "Crockery - Full Plates"
            }
        ],
        "cartType": "halfCart",
        "index": "FC-093"
    }
]

i have a source array

   const items= [
               {
            "_id": "646d96f669cad73dc5d14a25",
            "name": "Bar Cart - Beer & Wine",
            "customerId": "02f2c8e0-cd40-11ed-8563-092a964acecc"
        },
                {
                    "_id": "646d96f669cad73dc5d14a24",
                    "name": "Bar Cart - Liquor, Liqueur",
                    "customerId": "02f2c8e0-cd40-11ed-8563-092a964acecc"
                },
                
                {
            "_id": "646d96f669cad73dc5d14a2b",
            "name": "Bread Basket & Tongs",
            "customerId": "02f2c8e0-cd40-11ed-8563-092a964acecc"
        },
        {
            "_id": "646d96f669cad73dc5d14a2d",
            "name": "Crew Meals",
            "customerId": "02f2c8e0-cd40-11ed-8563-092a964acecc"
        },
        {
            "_id": "646d96f669cad73dc5d14a31",
            "name": "Crew Store - Cookies, juices, etc",
            "customerId": "02f2c8e0-cd40-11ed-8563-092a964acecc"
        },
        {
            "_id": "646d96f669cad73dc5d14a32",
            "name": "Crockery - Full Plates",
            "customerId": "02f2c8e0-cd40-11ed-8563-092a964acecc"
        },
    
                ]

all the objects are not included because of the lengthy size of the array.

my intention is to create a new array which goes like

const final= [
        {
            "cartId": "full",
            "itemsCategory": [
                {
                    "categoryId": "645bbe9141332374a05919d2"
                },
                {
                    "categoryId": "645bbf960e37e37b5c18e37e"
                }
            ]
        },
        {
            "cartId": "half",
            "itemsCategory": [
                {
                    "categoryId": "645bc57dd374a392f8226708"
                },
                {
                    "categoryId": "645bc588d374a392f8226709"
                }
            ]
        }
    ]

here cartId will be the cartType in the boxes array.and itemsCategory array should be obtained by matching the key in the trolleyItems array of boxes array with the customerId of items array and getting the _id of the object corresponding to the matching key in the items array.