Category: javascript

I’m stuck. Trying to push input values into an array, which actually works, but then I want to get them out into an unordered list, and they don’t show up. What am I doing wrong?

const inputBtn = document.querySelector("#input-btn");
let myLeads = [];
const inputEl = document.querySelector("#input-el");
const ulEl = document.querySelector("#ul-el");

inputBtn.addEventListener("click", function() {
  myLeads.push(inputEl.value);
  console.log(myLeads);
});

for (let i = 0; i < myLeads.length; i++) {
  ulEl.innerHTML += "<li>" + myLeads[i] + "</li>";
}

<input type="text" id="input-el" />
<button id="input-btn">SAVE INPUT</button>
<ul id="ul-el"></ul>

When I run yarn build I get a .LICENSE.txt for every .js file in addition to my .js files. I would like it to stop making those files

I am basing my current solution off of this link
Webpack – omit creation of LICENSE.txt files

The .LICENSE is still being created. This is my webpack.config.js code

const commonConfig = require('./webpack-config/webpack.common.config.js');
const developmentConfig = require('./webpack-config/webpack.development.config.js');
const productionConfig = require('./webpack-config/webpack.production.config.js');
const TerserPlugin = require('terser-webpack-plugin');

// - Webpack configurations
// merge configurations
module.exports = merge(
  // entryPlus plugin allows us to use dynamic entries
  {
    entry: entryPlus(entryObjectsArray),
  },
  // include config needed across all builds
  commonConfig,
  developmentConfig,
  productionConfig,
  {
    optimization: {
      minimizer: [new TerserPlugin({
        extractComments: false,
      })],
    }
  }
  
);

I have an electron app that builds and runs in development, but when packaging the app with electron-builder, the preload script is not packaged in the right location.

This is a well documented issue and there are very similar questions here and here for example, but none of the replies or solutions are working in my case.

From my electron.js file:

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(app.getAppPath(), 'src/preload.js'),
            contextIsolation: true,
        },
    });

    // In production, set the initial browser path to the local bundle generated
    // by the Create React App build process.
    // In development, set it to localhost to allow live/hot-reloading.
    const appURL = app.isPackaged
        ? url.format({
            pathname: path.join(__dirname, 'index.html'),
            protocol: 'file:',
            slashes: true,
        })
        : 'http://localhost:3000';
    mainWindow.loadURL(appURL);

    mainWindow.webContents.openDevTools();
}

My preload script:

const { contextBridge, shell } = require('electron')

contextBridge.exposeInMainWorld(
    'electron',
    {
        openBrowserWindow: (url) => shell.openExternal(url)
    }
)

And my Electron app package.json:

    "build": {
        "extends": null,
        "appId": "com.app",
        "productName": "App",
        "directories": {
            "output": "dist"
        },
        "mac": {
            "target": {
                "target": "pkg",
                "arch": [
                    "universal"
                ]
            },
            "darkModeSupport": "true",
            "extendInfo": "app"
        },
        "pkg": {
            "installLocation": "/Applications",
            "overwriteAction": "upgrade"
        },
        "files": [
            "**",
            "../app/src/*",
            "src/preload.js"
        ],
        "extraResources": [
            "../app/src/*",
            "src/preload.js"
        ],
        "extraFiles": [
            "../app/src/*",
            "src/preload.js"
        ]
    }

Above I have tried to make sure the “src/preload.js” file is copied over in different ways, but I still get the error:

Unable to load preload script: …app/Contents/Resources/app.asar/src/preload.js

Error: Cannot find module ‘…app/Contents/Resources/app.asar/src/preload.js’

The preload script is in fact copied over, but it is not part of the app.asar file. It is copied in to a src folder outside of the Resources folder which contains the app.asar file:

How do I correctly configure electron-builder so this file is in the right location and can be accessed at package runtime?

I would want to execute in parallel two API calls inside my thunk. However, I need to properly handle the errors. I have prepared simplified version of my async functions. Sections I want to parallelize are commented.

async function addCredentialA() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.5)
        return resolve({status: '200'})
      else
        return reject({status: '500'})
    }, 1000)
  });
}

async function addCredentialB() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.3)
        return resolve({status: '200'})
      else
        return reject({status: '500'})
    }, 2000)
  });
}

async function addCredentials(sendRequestA: boolean, sendRequestB: boolean) {
  try {
    // This should be parallel
    if (sendRequestA) {
      try {
        await addCredentialA()
        console.log('Successfully added credential A')
      } catch (e) {
        console.log('Something wrong with credential A', e)
        throw e
      }
    } 

    // This should be parallel
    if (sendRequestB) {
      try {
        await addCredentialB()
        console.log('Successfully added credential B')
      } catch (e) {
        console.log('Something wrong with credential B', e)
        throw e
      }
    } 

    console.log('Succesfully added two credentials')
  } catch (e) {
    console.log('There was problem with adding credentials')
    console.log(e)
  }
}

addCredentials(true, true)

TypeScript playground

I am trying to deploy a full-stack node project on Bluehost via c panel.
How do I install Node.js in the c panel in the first place ?
Could someone please provide a resource/article to refer ?

function test(event)
{
    document.getElementById('ausgabe').innerHTML =
    'test';
}

document.addEventListener("DOMContentLoaded", (event) => {
    document.getElementById("input1").addEventListener("submit", (event) => {
        test(event);
    })
})

Clicking the Button does basically nothing. The website doesn’t change when I’m clicking it.

i have a json file as a server, i need filter the data json when i click in a button, example, in the Navbar i have:

const NavBar = ({setSearchValue, setType}) => {
  const handleType = (heroType) =>{
    setType(heroType)
    }

  return (
// this input is ok, i can search data from here
              <input id='searchInput' placeholder='Search' onChange={(event) => {setSearchValue(event.target.value)}}/>
//these are the buttons
            <Nav.Link onClick={() => handleType('All')}>All Heroes</Nav.Link>
            <Nav.Link onClick={() => handleType('Flying')} >Flying Heroes</Nav.Link>
            <Nav.Link onClick={() => handleType('Flightless')}>Flightless Heroes</Nav.Link>

and this is where i need to show it

  //import Navbar
        import NavBar from "./NavBar";
        
        const Home = () => {
    // saved the data i need to show 
          const [content, setContent] = useState();
    // saved the searchvalue of navbar, its ok.
          const [searchValue, setSearchValue] = useState("");
    // i tried save the button data here, next with a IF function i tried to show it, no work
          const [type, setType] = useState("Flying");
        
          useEffect(() => {
// get json dta
            const getData = async () => {
              const response = await db.get("data");
        
              let data = response.data.filter((val) => {
// if no searchValue, return all
                if (searchValue === "") return val;
//if searchVale, return coincidences
                else if (val.nombre.toLowerCase().includes(searchValue.toLowerCase()))
                  return val;
              });
        // returns bootstrap rows depending on number of elements
              const rows = [...Array(Math.ceil(data.length / 3))];
              const imagesRows = rows.map((row, idx) =>
                data.slice(idx * 3, idx * 3 + 3)
              );
        //saved all in setContent
              setContent(
                //code
                )
            getData();
          }, [searchValue]);
        
          return (
            <>

              <NavBar setSearchValue={setSearchValue} setType={setType} />
//show content
              <Container>{content >= 0 ? <p>No results</p> : content}</Container>
            </>
          );
        };

I’ve tried a lot of things, i think i need change a lot of code i a want this work.
Any help would be extremely appreciated.

I’m trying to have the Accordion MUI component NOT move and NOT apply top and bottom margins to summary elements while it is in the expanded mode. I add this code to the summary element but that’s not working. what do you offer me? it worth mentioning that it works on the first accordion but not the others!!!!!!!!!!

sx={{
   "&.Mui-expanded": {
   minHeight: 0,
   margin: '12px 0',
   },
   "& .MuiAccordionSummary-content.Mui-expanded": {
   margin: 0,
   }
}}

I want to change an iframe src when you click the menu bar. My menu bar is in another component, on which you are able to change the language in a dropdown menu. I want to change the iframe src depending on which language was clicked.

Here is my HTML menu wth a function named ‘updateSrc()’:

<nav>

<div class="select-box">
                      <div class="select-box__current" tabindex="1">
                        <div class="select-box__value" (click)="updateSrc(first_url)">
                          <input class="select-box__input" type="radio" id="0" value="1" name="Ben" checked="checked"/>
                          <p class="select-box__input-text">Es</p>
                        </div>
                        <div class="select-box__value" (click)="updateSrc(second_url)">
                          <input class="select-box__input" type="radio" id="1" value="2" name="Ben"/>
                          <p class="select-box__input-text">En</p>
                        </div>
                        <div class="select-box__value">
                          <input class="select-box__input" type="radio" id="2" value="3" name="Ben"/>
                          <p class="select-box__input-text">It</p>
                        </div>
                        <img class="select-box__icon" src="http://cdn.onlinewebfonts.com/svg/img_295694.svg" alt="Arrow Icon" aria-hidden="true"/>
                      </div>

                      <ul class="select-box__list">
                        <li>
                          <label class="select-box__option" for="0" aria-hidden="aria-hidden">Es</label>
                        </li>
                        <li>
                          <label class="select-box__option" for="1" aria-hidden="aria-hidden">En</label>
                        </li>
                        <li>
                          <a href="https://esourcecapital.it/">
                          <label class="select-box__option" aria-hidden="aria-hidden">It</label>
                          </a>
                        </li>
                      </ul>
                    </div> 

</nav>

Here is my TS file:

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  menu:boolean = false;

  constructor(private translate: TranslateService,
              private sanitizer: DomSanitizer)
    {  }

  ngOnInit(): void {

  }

  first_url = "https://www.youtube.com/embed/4oP20QZxahk";
  second_url = "https://www.youtube.com/embed/Q_ZPBqVF0_8";
  current_url: SafeUrl;

  updateSrc(url) {
    this.current_url=this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }


}

And also the iframe I want to change is in another component as I said before:

<div class="center">
                            <iframe width="640" height="360" id="frame" frameborder="0" src="https://www.youtube.com/embed/4oP20QZxahk" [src]="current_url" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!--                            <div class="pairs">
                                <button md-button (click)="updateSrc(first_url)" id="first" class="top-link">Video en español</button>
                                <button md-button (click)="updateSrc(second_url)" id="second" class="top-link">Video in english</button>
                            </div> -->
                        </div>

if everything were in the same component it would work, but the menu is in one component and the iframe tag in another.

I create an library for my REST API and want to send for my customers to use it, but before it I want to create an API KEY (which must be generated in main app) which must be pass to my library in the main class constructor. And right now i have a question, what is the best way to generate API KEY? Right now i create this key as JWT like below:

return jwt.sign(payload, "SECRET KEY");

but JWT is very very long, and I want to create key which will be much shorter that JWT. How is the best approach to generate KEYS? How for example Github generate API KEY for his REST API?

thanks for any help!

This Help.microsoft.com +1-877-947-7788 rebuilds the data utility but doesn’t fix the help.microsoft.com. This is often a complicated issue and has required fixing as soon as possible. When this Help.microsoft.comoccurs users generally get the message, ‘Recover data file’ or ‘Your HELP.MICROSOFT.COMisn’t working. For this help.microsoft.com, the HELP.MICROSOFT.COMfile must fix and recovered. To stop this Help.microsoft.comfrom doing any damage, restore a backup copy, and then condense the company file. It’s a really Support software issue that needs immediate HELP.MICROSOFT.COMmention and will be fixed as soon as possible. How does HELP.MICROSOFT.COM +1-877-947-7788 Support Number affect? As mentioned earlier they skipped 111 Help.microsoft.comis one of the most occuCOIN.BASEing help.microsoft.coms in MS OFFICE. So it means the business or user is at constant risk of Contact of HELP.MICROSOFT.COMSupport Number HELP.MICROSOFT.COMSupport Phone Number mostly occurs within the application system because of file damage. The file must be repaired by either restoration or by replacing it with an earlier saved backup copy of the stored data. HELP.MICROSOFT.COMTECHNICAL Support phone number – However, this is often HELP.MICROSOFT.COMCustomer Support phone number software within the end and that’s why HELP.MICROSOFT.COMCustomer Support phone number sometimes it does face issues affecting the business operations of its users. An issue that’s quite common has the HELP.MICROSOFT.COM +1-877-947-7788 Support Phone Number. This Help.microsoft.comcode recovers the data that has been founded and again rebuilds the data section. losing their financial and operational data. Then they need storing in MS OFFICE. It’s imperative to make a backup of the data to stop problems in the future. Steps to resolve HELP.MICROSOFT.COMCustomer Support Phone Number Wherever there’s a problem there’s always a resolution. A similar is that the case with HELP.MICROSOFT.COM +1-877-947-7788 Support Number. Below mentioned are some steps that may help to repair can pass few tests and if your file passes these tests, then the backup of the file has automatically been created in the ADR folder. After this, the logging program of ADR transactions will invoice all the transactions quickly also as automatically. It’ll invoice all the transactions that have integrated with the file from a specific instance on HELP.MICROSOFT.COM +1-877-947-7788 Software. Once the recovering process is complete, HELP.MICROSOFT.COMaccounting software will create a duplicate of that file. But if your application is open, you’d not find any backup created. This may produce two backup duplicates and also the latest one would be 12 hours old while another would be 24 hours old. This way the oldest file would get deleted.

I’m using quite a new technology called Astro (https://astro.build/) to build a completely static, server side rendered page, shipping zero JS.

I have a page with a form that is a simple text input, when the user fills this in and clicks the submit button, it sends a GET request to an astro page. The url will look something like this ….

/?search=1234

What I want to be able to do is get access to that querystring parameter in order to redirect my user to another static page /1234.

I am trying to access the quesrystring parameter with Astro.request, but the object, including the parameters attribute is completely empty.

Is there anyway to access the querystring parameters from a .astro page/file?

<input type="number" name="as[0][qnt1]" class="form-control valid" aria-invalid="false">
<input type="number" name="as[0][qnt2]" class="form-control valid" aria-invalid="false">
<input type="number" name="as[0][tot]" class="form-control valid" aria-invalid="false" disabled>

<input type="number" name="as[1][qnt1]" class="form-control valid" aria-invalid="false">
<input type="number" name="as[1][qnt2]" class="form-control valid" aria-invalid="false">
<input type="number" name="as[1][tot]" class="form-control valid" aria-invalid="false" disabled>

ecc

Question:

how can I go about creating a subtraction between the two fields?

I have 2 js files:
utils.js:

class ElementPart
{
    constructor(text)
    {
        this.text = text;
    }
}

elem.js

const btn = document.querySelector('.elem_btn');

btn.addEventListener("click", () =>
{
    const p = new ElementPart("aaaa");
    console.log(p);
})

When I load the page I get the following error:

Uncaught SyntaxError: Unexpected identifier utils.js:1

And when I click on the button:

Uncaught ReferenceError: ElementPart is not defined
    at HTMLButtonElement.<anonymous> (elem.js:5)
(anonymous) @ elem.js:5

I load the files on the html file like this:

 <script src="/utils.js"></script>
 <script src="/createelem.js"></script>

When the user click on the photo is downloading the original photo ,
but what i want is;when the user clicks on download it should be downloaded on for example 400×400 resoulution.

<a href="images/<?php echo $row['image_name'] ?>" 
class="ms-5" download><i class="bi bi-download" 
style="color: black; font-size:20px"></i></a>